nunustudio|探索nunustudio 开发3D模型 第三弹(动画效果实现(一))

前言:让自己的模型摇起来!!!
第一种方式:物体不动,相机移动,实现物体动画;
1、搭建基本场景;
2、相机介绍
nunustudio|探索nunustudio 开发3D模型 第三弹(动画效果实现(一))
文章图片

这里工具提供两种相机类型,
透视相机(PerspectiveCamera) 正交相机(OrthographicCamera) 根据自己的实际应用情况选择对应的相机。
为工程添加一款相机
3、为相机添加js
nunustudio|探索nunustudio 开发3D模型 第三弹(动画效果实现(一))
文章图片

为工程添加js,并且将相机拖到js标签下,双击script标签,进行编辑。
4、双击script进行编辑

var c; function initialize() { //TODO c=new THREE.CameraHelper(this.children[0]); console.log(c); }function update(delta) { //TODO c.update(); this.rotation.y +=0.005; }

例子代码参考。api参考three.js http://www.webgl3d.cn/threejs/docs/#api/zh/helpers/CameraHelper
5、js编辑完成之后,点击开发工具上【run】按钮,就可以预览动画效果了

第二种方式:物体移动,相机不动,实现物体动画:
1、搭建基本场景。
看一下基本的工程结构,如图:
nunustudio|探索nunustudio 开发3D模型 第三弹(动画效果实现(一))
文章图片

工程搭建只有一个地面 、正方体、相机,这里相机的位置自己设计调整好之后预览一下。
【nunustudio|探索nunustudio 开发3D模型 第三弹(动画效果实现(一))】2、工程添加js,打开左侧工具栏找到js添加按钮,为地面、正方体添加js(我们这里需要实现地面和正方体旋转动画,所以这两个几何体添加到一个js中控制)
nunustudio|探索nunustudio 开发3D模型 第三弹(动画效果实现(一))
文章图片

添加script之后在右侧目录可以看到js标签,然后将地面、正方体几何体拖放在script标签下,由这个js控制这两个几何体。
3、双击script,编辑js,最后点击【run】按钮预览效果
function initialize() { //TODO console.log(this); }function update(delta) { //TODO this.rotation.y +=0.01; }

事例代码参考。
console.log(this) 控制台查看,当前对象是否存在地面和正方体两个子对象;




    推荐阅读