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

前言:让自己的模型摇起来!!!

第一种方式:物体不动,相机移动,实现物体动画;

1、搭建基本场景;

2、相机介绍

探索nunustudio 开发3D模型 第三弹:动画效果实现(一)_第1张图片

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

透视相机(PerspectiveCamera)

正交相机(OrthographicCamera)

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

为工程添加一款相机

3、为相机添加js

探索nunustudio 开发3D模型 第三弹:动画效果实现(一)_第2张图片

为工程添加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 开发3D模型 第三弹:动画效果实现(一)_第3张图片

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

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

探索nunustudio 开发3D模型 第三弹:动画效果实现(一)_第4张图片

添加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) 控制台查看,当前对象是否存在地面和正方体两个子对象;

 

 

 

 

你可能感兴趣的:(nunustudio,3D)