基于HT for Web矢量实现3D叶轮旋转

在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。

在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了一些常规的3D模型，但是对于那些比较复杂的模型，比如汽车、人物等模型就无能为力了，那再项目中需要用到这样的模型该肿么办呢？这时候就需要借助专业的3ds Max工具来建模了，然后通过3ds Max工具将模型导出成obj文件，然后再项目中引用导出的obj文件，这样就能成功的使用上复杂的图元了。

在《HT图形组件设计之道（四）》一文中有提及HT for Web引入obj文件的介绍，在这里我就不做重复介绍了，我们先来看看今天作为演示的Demo模型长什么样：

嘿嘿，是不是感觉今天的模型有些大材小用了，没办法，怪只怪自己不懂3ds Max工具，只能先用这个大家熟悉的模型来做Demo演示了。

首先我们需要有3ds Max工具将模型导出成obj及mtl文件，然后调用HT for Web的ht.Default.loadObj()方法读取并解析模型文件，在解析完成后，通过调用ht.Default.setShape3dModel()方法将模型注册到系统中，如此在后续的代码中就能够应用到该模型了，模型文件的读取及注册具体代码如下：

ht.Default.loadObj('plane.obj', 'plane.mtl', {                    center: true,r3: [0, -Math.PI/2, 0], // make plane face rights3: [0.15, 0.15, 0.15], // make plane smallerfinishFunc: function(modelMap, array, rawS3){if(modelMap){  ht.Default.setShape3dModel('plane', array);var plane = new ht.Node();plane.s3(rawS3);plane.s({'shape3d': 'plane','shape3d.scaleable': false,'wf.visible': true,'wf.color': 'white','wf.short': true});dataModel.add(plane);}}
});

注册完3D模型后，我们马上创建了一个3D图元，并将其添加到了dataModel容器中，这时我们需要一个3D拓扑来显示这个3D图元，具体的创建代码如下：

var dataModel = new ht.DataModel();
var g3d = new ht.graph3d.Graph3dView(dataModel);
g3d.setEye(200, 50, 300);
g3d.setDashDisabled(false);
g3d.getView().style.background = '#4C7BBB';
g3d.addToDOM();

在3D拓扑上做了些简单的属性设置，让拓扑看起来舒服些，如此我们就可以看到我们创建出来的飞机模型到底长什么样了

怎么样，创建一个复杂模型好像并没有想象中的复杂（复杂的东西都让美工做完了）。

我们仔细观察飞机会发现，飞机前面的螺旋桨颜色和机身一样，一眼看去不太容易注意到它的存在，那能否将其颜色改掉呢？我们可以查看下mtl文件，看飞机的螺旋桨是否分离机身独立成一个材质，mtl文件的内容如下：

newmtl bodyNs 10.0000Ni 1.5000d 1.0000Tr 0.0000Tf 1.0000 1.0000 1.0000 illum 2Ka 0.3608 0.4353 0.2549Kd 0.3608 0.4353 0.2549Ks 0.0000 0.0000 0.0000Ke 0.0000 0.0000 0.0000newmtl propellerNs 10.0000Ni 1.5000d 1.0000Tr 0.0000Tf 1.0000 1.0000 1.0000 illum 2Ka 0.3608 0.4353 0.2549Kd 0.3608 0.4353 0.2549Ks 0.0000 0.0000 0.0000Ke 0.0000 0.0000 0.0000

正如我们所想，飞机模型的机身和螺旋桨是分开了两个独立的材质，并将螺旋桨的材质名字定义为propeller，因此我们可以独立控制机身及螺旋桨，那么我们就来修改下螺旋桨的颜色吧，在loadObj()方法中的finishFunc回调函数中添加上如下代码即可：

modelMap.propeller.s3 = [1, 1.2, 1.2];
modelMap.propeller.color = ‘yellow';

在代码中，我们不仅改变了螺旋桨的颜色，我们还对螺旋桨做了缩放处理，令螺旋桨的宽度和长度变大一点。

到这里，模型就算完成了，接下来要做的就是让螺旋桨动起来，和2D叶轮旋转类似，在3D模型上也可以做数据绑定，要想让螺旋桨旋转起来，我们就需要设置螺旋桨的rotation属性，和3D上的图元不同的是，设置3D图元的rotation属性需要设置一个数组，定义3D上三个方向的旋转值。

我们先来尝试下让螺旋桨沿着x轴旋转45度试下：

modelMap.propeller.r3 = [Math.PI / 4, 0, 0];

果然可以，那么接下来我们就可以为螺旋桨的rotation属性做数据绑定的处理了：

modelMap.propeller.r3 = {func: function(data){return [data.a('angle'), 0, 0];}
};

我们将螺旋桨的x轴上的旋转角度绑定到图元的angle自定义属性上，我们可以通过改变angle属性值令螺旋桨沿着x轴转动起来，那么接下来我们就通过定时器来动态改变angle属性吧，看看螺旋桨是不是真的可以动起来：

window.setInterval(function() {var rotation = plane.a('angle') + Math.PI / 10;if (rotation > Math.PI * 2) {rotation -= Math.PI * 2;}plane.a('angle', rotation);
}, 40);

螺旋桨果然动起来了，这个定时器让螺旋桨做匀速运动，但是飞机的螺旋桨在起飞和降落的时候其旋转速度都不是匀速，我们要模拟飞机起飞和降落时螺旋桨的旋转速度该如何处理呢？这个时候我们可以考虑用HT for Web中的动画来解决这个问题，关于动画的内容由于比较复杂，在这里就不深入探讨，等以后有机会再和大家分享动画的相关内容，今天就先讲诉下动画的基本用法，简单实现螺旋桨模拟起飞和降落的效果，具体的代码如下：

var params = {delay: 1500,duration: 20000,easing: function(t){return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));},action: function(v, t){plane.a('angle', v*Math.PI*120);},finishFunc: function(){ht.Default.startAnim(params);}
};ht.Default.startAnim(params);

我们来分析下代码：
1. delay属性：定义动画播放前的停顿时间；
2. duration属性：定义动画持续时间；
3. easing函数：定义动画缓动函数；
4. action函数：action函数必须提供，实现动画过程中的属性变化，在这里设置angle属性；
5. finishFunc函数：动画结束后调用的函数，在这里又启动了动画，让螺旋桨不断的旋转。

运行代码，你会发现螺旋桨在1.5秒后进入旋转状态，并且旋转速度由慢变快，再变慢直至停止，然后再过1.5秒后继续旋转，如此周而复始。

好了，今天的内容到这里就结束了，整个Demo的运行效果可以通过下面的视频查看，最后再附上本次Demo的所有代码。

http://v.youku.com/v_show/id_XMTI5NDI5MzYyOA==.html

<!DOCTYPE html>
<html><head><title>HT for Web - Plane</title><meta charset="UTF-8" name="viewport" content="user-scalable=yes, width=600"><script src="../../../build/ht-debug.js"></script><script src="../../../build/ht-obj-debug.js"></script><script>function init(){var dataModel = new ht.DataModel();var g3d = new ht.graph3d.Graph3dView(dataModel);g3d.setEye(200, 50, 300);g3d.setDashDisabled(false);g3d.getView().style.background = '#4C7BBB';g3d.addToDOM();ht.Default.loadObj('plane.obj', 'plane.mtl', {center: true,r3: [0, -Math.PI/2, 0], // make plane face rights3: [0.15, 0.15, 0.15], // make plane smallerfinishFunc: function(modelMap, array, rawS3){if(modelMap){modelMap.propeller.r3 = {func: function(data){return [data.a('angle'), 0, 0];}};// make propeller a litter biggermodelMap.propeller.s3 = [1, 1.2, 1.2];modelMap.propeller.color = 'yellow';ht.Default.setShape3dModel('plane', array);var plane = new ht.Node();plane.s3(rawS3);plane.s({'shape3d': 'plane','shape3d.scaleable': false,'wf.visible': true,'wf.color': 'white','wf.short': true});dataModel.add(plane);var params = {delay: 1500,duration: 20000,easing: function(t){return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));},action: function(v, t){plane.a('angle', v*Math.PI*120);},finishFunc: function(){ht.Default.startAnim(params);}};ht.Default.startAnim(params);/*window.setInterval(function() {var rotation = plane.a('angle') + Math.PI / 10;if (rotation > Math.PI * 2) {rotation -= Math.PI * 2;}plane.a('angle', rotation);}, 40);*/}}});}</script></head><body onload="init();">                         </body>
</html>

基于HT for Web矢量实现3D叶轮旋转相关推荐

基于HT for Web 快速搭建3D机房设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...
基于HT for Web 3D呈现Box2DJS物理引擎
为什么80%的码农都做不了架构师?>>> 上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来 ...
html5游戏开发box2djs,基于HT for Web 3D呈现Box2DJS物理引擎
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...
基于HT for Web的Web SCADA工控移动应用
在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...
基于HT for Web的3D拓扑树的实现
在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在 ...
基于HTML5 Canvas 实现矢量工控风机叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 先看看最后我们实现的效果:http://www.hightopo.com/demo/fan/index.html ...
基于HTML5 Canvas实现工控2D叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 我们先来看下这个叶轮模型长什么样从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们 ...
background 旋转_基于HTML5 Canvas 实现矢量工控风机叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 先看看最后我们实现的效果我们先来看下这个叶轮模型长什么样从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不 ...
background 旋转_基于HTML5 Canvas实现工控2D叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元--叶轮旋转. 我们先来看下这个叶轮模型长什么样从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们 ...
基于HT For Web 打造可视化海绵城市，搏动“城市之肾“！
根据国务院75号文件的要求,全国2020年要实现年径流控制率20%的目标.2030年要实现年径流控制率达到80%.为了整治城市内涝问题,促进城市与自然的和谐发展,近些年来海绵城市建设变得如火如荼. 什 ...

基于HT for Web矢量实现3D叶轮旋转

基于HT for Web矢量实现3D叶轮旋转相关推荐

最新文章

热门文章