探索nunustudio 开发3D模型 第三弹：动画效果实现（一）

前言：让自己的模型摇起来！！！

第一种方式：物体不动，相机移动，实现物体动画；

1、搭建基本场景；

2、相机介绍

这里工具提供两种相机类型，

透视相机（PerspectiveCamera）

正交相机（OrthographicCamera）

根据自己的实际应用情况选择对应的相机。

为工程添加一款相机

3、为相机添加js

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

4、双击script进行编辑

var c;
function initialize()
{
	//TODO <INITIALIZATION CODE>
	c=new THREE.CameraHelper(this.children[0]);
	console.log(c);
	
}

function update(delta)
{
	//TODO <UPDATE CODE>
	c.update();

	this.rotation.y +=0.005;
}

例子代码参考。api参考three.js http://www.webgl3d.cn/threejs/docs/#api/zh/helpers/CameraHelper

5、js编辑完成之后，点击开发工具上【run】按钮，就可以预览动画效果了

 

第二种方式：物体移动，相机不动，实现物体动画：

1、搭建基本场景。

看一下基本的工程结构，如图：

工程搭建只有一个地面 、正方体、相机，这里相机的位置自己设计调整好之后预览一下。

2、工程添加js，打开左侧工具栏找到js添加按钮，为地面、正方体添加js（我们这里需要实现地面和正方体旋转动画，所以这两个几何体添加到一个js中控制）

添加script之后在右侧目录可以看到js标签，然后将地面、正方体几何体拖放在script标签下，由这个js控制这两个几何体。

3、双击script，编辑js，最后点击【run】按钮预览效果

function initialize()
{
	//TODO <INITIALIZATION CODE>
	console.log(this);
}

function update(delta)
{
	//TODO <UPDATE CODE>
	this.rotation.y +=0.01;
}

事例代码参考。

console.log(this) 控制台查看，当前对象是否存在地面和正方体两个子对象；