前端可视化项目流程,涉及three.js(webGL),3DMax技术,持续更新 .pdfVIP

前端可视化项⽬流程，涉及three.js（webGL）,3DMax技术，持续更新

最近在做⼀个可视化展⽰的项⽬，记录⼀下流程：

1.建模，模型来源，可以参考沙盘展⽰类项⽬，⾃⼰建模或者拼装其他源模型（本⼈以前是3D建模师，可以应付⼀些简单的场景）

2.有效模型导⼊到web端，这⾥采⽤的obj，mtl的组合格式

3.使⽤Three.js创建场景和模型的编辑--3DMax技术

4.实现数据与模型的交互，位置可以是API，实时状态可以soket通信

项⽬链接地址：Visualization

蛋糕盘旋转效果、透视：

实际项⽬运⽤：

平滑转换摄像机镜头：

functionanimateCamera(oldP,oldT,newP,newT,callBack){

vartween=newTWEEN.Tween({

x1:oldP.x,//相机x

y1:oldP.y,//相机y

z1:oldP.z,//相机z

x2:oldT.x,//控制点的中⼼点x

y2:oldT.y,//控制点的中⼼点y

z2:oldT.z控制点的中⼼点//z

});

tween.to({

x1:newP.x,

y1:newP.y,

z1:newP.z,

x2:newT.x,

y2:newT.y,

z2:newT.z

},1000);

tween.onUpdate(function(object){

camera.position.x=object.x1;

camera.position.y=object.y1;

camera.position.z=object.z1;

controls.target.x=object.x2;

controls.target.y=object.y2;

controls.target.z=object.z2;

controls.update();

})

tween.onComplete(function(){

controls.enabled=true;

callBackcallBack()

})

tween.easing(TWEEN.Easing.Cubic.InOut);

tween.start();

}

可视化前缀：htmlpreview.github.io/?

3D动画的数据格式问题：

obj和mtl配合制作的模型只能是静态的，不能有导出动画，只能配合动画库Tween和Animate，依托于GPU计算requestAnimationFrame

解决：

1.Json3DExporterfor3dsMax2017，安装这个插件

2.在模型中调好动画，并导出为.jd⽂件

3.采⽤Json3DLoaderforThreejs（）,加载动画