ThingJS问答录 | 电脑制作3D动画详细过程 三维可视化

前端开发看过来，用javascript开发逻辑一样也能够3D绘制图像、开发3D动效，注意，模型本身是需要美工设计。thingjs有自己的模型库，Unity 3D的商城也上传不少免费的素材，重要的还是场景搭建和动效开发。

把你的画面变成一个故事，或者是客户端要求的3D数据可视化界面，才能产生商用价值。

ThingJS比three.js其他的3D框架，特点有三个：

1. 专注于物联网3D项目开发

2. 按照场景搭建-3D开发-数据对接-项目部署步骤简化开发

3. 不需要3D专业知识储备，只需要懂javascript开发

所以用thingjs制作物联网3D场景动效，步骤如下：

campusbuilder 3D场景搭建

thingjs 3D源码二次开发

加入小控件，就可以开发基本的3D动画，包括第一人称行走、自由飞行、倾斜摄影，虽然比不上游戏动画，用javascript调用3D源码，几行代码就能够实现了，超级简单，正是3D开发的特色。

// 模型地址

var modelUrl = 'https://www.thingjs.com/static/models/ani_gltf';

var person = app.create({type: 'Thing',url: modelUrl,position: [1.5, 0, 0],complete: function () {app.camera.fit(person);

var animationNames = person.animationNames;if (animationNames.length > 0) {// 播放动画person.playAnimation({ name: animationNames[0], loopType: 'repeat' });

var panel = createUI(animationNames);panel.radio.on('change', function (ev) {console.log('动画名 ' + ev);person.stopAnimation();person.playAnimation({ name: ev, loopType: 'repeat' });});}else {console.log('该模型无动画');}}});

更多的倾斜摄影、3D动效演示去官网-资源中心查看。