上篇将3D弹力布局的算法运行在Web Workers后台，这篇我们将进一步折腾，将算法运行到真正的后台：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能...io = require('socket.io').listen(8036); ht = require('ht.js').ht; require("ht-forcelayout.js"); reloadModel...插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储。...2、Util.js定义的reloadModel函数我增加了this.reloadModel = reloadModel;的逻辑，这样才能在Node.js后台代码reloadModel = require...，我打开了两个页面，这样就会有两个socket分别连接后台Node.js，而Node.js默认是单线程的，如果正在一个请求函数密集运算处理，则其他请求只能排队等待处理，这也是视频中我拖拽一个页面布局是，
上篇将3D弹力布局的算法运行在Web Workers后台，这篇我们将进一步折腾，将算法运行到真正的后台：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能...的类库肯定不能操作window和document之类的页面特定元素对象，从这点说很多考虑不周全的类库会把自己限制死只能在页面主线程运行，这点HT for Web考虑得很周到，不仅ht.js包括所有ht-forcelayout.js...插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储。...2、Util.js定义的reloadModel函数我增加了this.reloadModel = reloadModel;的逻辑，这样才能在Node.js后台代码reloadModel = require...，我打开了两个页面，这样就会有两个socket分别连接后台Node.js，而Node.js默认是单线程的，如果正在一个请求函数密集运算处理，则其他请求只能排队等待处理，这也是视频中我拖拽一个页面布局是，
html逻辑: <!...crossorigin="anonymous" /> ❄️ 雪一直下 ❄️ css逻辑： * { box-sizing: border-box; } body { background-color: #323975...动画的意思是线性的永远的执行下去. js逻辑: const body = document.body; function createSnowFlake() { const snow_flake
style.css" /> 自动打字机 <script src="main.<em>js</em>...text-align: center; color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } <em>js</em>...prog.slice(0,index); index++; if(index>prog.length) { index=1; } } setInterval(writeText,300); <em>js</em>...<em>逻辑</em>: ?
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的节奏...3D呈现固然比2D方式更直观，但如果摆放图元布局却比2D麻烦，毕竟增加了一个维度，手工布局不如以前2D手工操作方便，因此3D的自动布局功能比2D凸显其重要性。...importScripts("ht.js"); importScripts("ht-forcelayout.js"); importScripts("util.js"); ht = self.ht;...拓扑自动布局的效果，这个例子纯粹为了玩玩Web Workers，这样折腾性能并不会提高，甚至因为来回序列化更费性能，Web Worker可以使用的场景并不太多，比较适合纯数学运算的业务逻辑，同时还需要注意跑在...下篇《3D拓扑自动布局之Node.js篇》我们再将算法移到Node.js端玩
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的节奏...3D呈现固然比2D方式更直观，但如果摆放图元布局却比2D麻烦，毕竟增加了一个维度，手工布局不如以前2D手工操作方便，因此3D的自动布局功能比2D凸显其重要性。...的代码，通过importScripts("ht.js")引入HT核心包，通过importScripts("ht-forcelayout.js")引入HT的弹力布局插件，通过importScripts("...拓扑自动布局的效果，这个例子纯粹为了玩玩Web Workers，这样折腾性能并不会提高，甚至因为来回序列化更费性能，Web Worker可以使用的场景并不太多，比较适合纯数学运算的业务逻辑，同时还需要注意跑在...下篇《3D拓扑自动布局之Node.js篇》我们再将算法移到Node.js端玩 http://v.youku.com/v_show/id_XNjc1MjYzODg4.html
所以这时候结构清晰的3D树的需求就来了，那么这个3D树具体长成啥样呢，我们来一起目睹下~ ? 要实现这样的效果，该从何下手呢？接下来我们就将这个问题拆解成若干个小问题来解决。 1....在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...搞定，就是这样子了，2D拓扑上面的布局搞定了，那么接下来该出动3D拓扑啦~ 3....加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局...也不需要太大的改造，我们只需要修改下布局器并且将2D拓扑组件改成3D拓扑组件就可以了。
这是一个简单的 JS 3D 模型，能跑在包括 IE6 的所有浏览器上，结合一下 tween 缓动算法，理论上已经可以完美模拟像 http://www.cu3ox.com/ 这个网站上方 banner 的各种变换效果了...介绍一下实现细节，矢量绘图仍然用的是 Raphael 库，Raphael 我在《如何用 JS 实现 3D ×××效果》这篇文章里有过介绍。...关于画家算法 渲染器工作时，会从他的角度上能看到的所有物体都描绘出来，即用 2D 的手法去描述 3D 的物体。
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台...：Node.js，事先申明Node.js篇和Web Workers篇一样，在这个应用场景下并不能提高性能，纯粹为了折腾好玩，当然也不会白玩，人生就在折腾中，只有折腾才能真正成长。...io = require('socket.io').listen(8036); ht = require('ht.js').ht; require("ht-forcelayout.js"); reloadModel...插件都是可运在Web Workers和Node.js的非GUI环境，因为我也常需要ht.js运行在后台直接将DataModel的数据和前台进行JSON的数据格式转换存储。...2、Util.js定义的reloadModel函数我增加了this.reloadModel = reloadModel;的逻辑，这样才能在Node.js后台代码reloadModel = require
很简单，就在3D拓扑中放两个正方体： var g3d = new ht.graph3d.Graph3dView(); var node = new ht.Node(); node.s3(30, 30,...接下来就是今天的重头戏了，该如何实现拖拽List上的节点到3D拓扑上，并实现节点的图标吸附到3D拓扑的图元上呢，我给大家细细道来。 ?...OK，接下来该解决图元吸附功能，当鼠标拖拽ListView节点到3D拓扑上的图元是，将该节点的图标设置为图元当前面的贴图。 思路是这样子的： 1....在between状态时，通过ht.Default.containedInView()方法判断殿前鼠标是否在3D拓扑组件上； 2....若鼠标在3D拓扑上，则通过g3d.getHitFaceInfo()方法，根据鼠标当前信息获取当前鼠标下的图元表面信息； 3.
很简单，就在3D拓扑中放两个正方体： var g3d = new ht.graph3d.Graph3dView();var node = new ht.Node(); node.s3(30, 30, 30...接下来就是今天的重头戏了，该如何实现拖拽List上的节点到3D拓扑上，并实现节点的图标吸附到3D拓扑的图元上呢，我给大家细细道来。 ?...OK，接下来该解决图元吸附功能，当鼠标拖拽ListView节点到3D拓扑上的图元是，将该节点的图标设置为图元当前面的贴图。 思路是这样子的： 1....在between状态时，通过ht.Default.containedInView()方法判断殿前鼠标是否在3D拓扑组件上； 2....若鼠标在3D拓扑上，则通过g3d.getHitFaceInfo()方法，根据鼠标当前信息获取当前鼠标下的图元表面信息； 3.
逻辑运算符 在 js 中，我们都知道有逻辑运算符，比如 逻辑与 （ && ）、逻辑或（ || ）、逻辑非（ ! ）、空值合并运算符（??）...逻辑与 （ && ） 当且仅当所有操作数为 true 时，一组布尔操作数的逻辑与（&&，逻辑连接）运算结果为 true，否则为 false。...逻辑赋值 就是在逻辑运算符的情况下+赋值比如 a&&=2，就是 a=a&&2 逻辑空赋值（??=） 逻辑空赋值运算符（x ??...25 逻辑与赋值（&&=） 逻辑与赋值（x &&= y）运算仅在 x 为真值时为其赋值。...注意：逻辑运算符除了逻辑非是（ !
但是搭建 3D 应用场景又依赖于通过 3ds Max 或 Maya 的专业 3D 设计师来建模，Unity 3D 引擎做图形渲染等，这对用户来说都是挑战！...上提供了 shape3d属性，预定义了多种 3D 的形体，详情见HT for Web 3D 手册。...dataModel.add(device2); dataModel.add(device2_edge); } 3、连线 HT for Web 提供了默认的直线和多点的连线类型能满足大部分基本拓扑图形应用... edge：当前连线对象； gap：多条连线成捆时，本连线对象对应中心连线的间距； graphView：当前对应拓扑组件对象...我们 HT 有扩展流动线插件，可以在 ht.Shape 和 ht.Edge 上增加流动效果，支持内部流动元素或用户自定义的流动元素沿着路径步进，要使用也非常方便，只需要引入 ht-flow.js 文件，
看完这本书《3D Game Programing for Kids》之后，发现3D游戏的学习，也可以使用javascript来写的。...先要上这个网站https://threejs.org，然后下载它的three.js源码放到一个目录，比如js。 然后放入这段代码： My first three.js app ...body { margin: 0; } canvas { width: 100%; height: 100% } var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera
现在，3D 模型已经用于各种不同的领域。...这些种种都让我们前端开发者觉得如果我们可以不用学习 unity3d 或者其他游戏开发工具就能实现 3D 效果，而且能够精准的靠代码来控制移动或者方向就好了。。。...于是我利用 HT For Web 中的 3D组件 来实现了一个小例子，用了 HT 中 3D组件 的大部分功能，做这个例子就是想把 3D 组件好好的掌握，尽量放进一个例子中，到时候别人有需要就可以参考了。...用 HT for Web，现有的 3d 模板创建三层底板不是问题，问题是要如何将图中第一层的“电脑”和“机柜组件”放上去？...我一开始直接使用了 3d 模型中封装好的函数，导致后来根本不知道函数中使用的参数是做什么用的，而且也不明白 3d 模型是怎么构成的，然后自己又重新看了前面的“模型基础”，才知道原来 3d 模型采用的一个面
在JavaScript中，逻辑运算符可以操作ECMAScript中的任意值，同时也不强制返回boolean类型。 在js逻辑操作中，需要隐式的转换为boolean类型再计算。...的作用是把一个其他类型的变量转换成bool类型 在||和&&逻辑操作中的短路原则： a && b：左操作数为false，返回左操作数，否则返回右操作数。
现在，3D模型已经用于各种不同的领域。...于是我利用HT For Web中的3D组件来实现了一个小例子，用了HT中3D组件的大部分功能，做这个例子就是想把3D组件好好的掌握，尽量放进一个例子中，到时候别人有需要就可以参考了，但是因为之前从来没有实现过...我一开始直接使用了3d模型中封装好的函数，导致后来根本不知道函数中使用的参数是做什么用的，而且也不明白3d模型是怎么构成的，然后自己又重新看了前面的“模型基础”，才知道原来3d模型采用的一个面，最基础的是三角面...界面上展现2d图片，只要按照平常的路走就行，因为ht中的Graph3dView和其他的组件的根部都是div，在div上生成图片用的就是原生js，new Image()，再将image的src和大小赋值，...想让2d图片在3d管线上移动则是使用g3d.toViewPosition(position)来获取3d模型的二维坐标，这个函数中的参数就是三维模型的3d坐标，我们可以直接将polyline管线上的点传入
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
