前言:让自己的模型摇起来!!!
第一种方式:物体不动,相机移动,实现物体动画;
1、搭建基本场景;
2、相机介绍
文章图片
这里工具提供两种相机类型,
透视相机(PerspectiveCamera)
正交相机(OrthographicCamera) 根据自己的实际应用情况选择对应的相机。
为工程添加一款相机
3、为相机添加js
文章图片
为工程添加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模型 第三弹(动画效果实现(一))](https://img.it610.com/image/info8/1ff3a34504934d7bbecc3fc2b3523620.jpg)
文章图片
工程搭建只有一个地面 、正方体、相机,这里相机的位置自己设计调整好之后预览一下。
【nunustudio|探索nunustudio 开发3D模型 第三弹(动画效果实现(一))】2、工程添加js,打开左侧工具栏找到js添加按钮,为地面、正方体添加js(我们这里需要实现地面和正方体旋转动画,所以这两个几何体添加到一个js中控制)
![nunustudio|探索nunustudio 开发3D模型 第三弹(动画效果实现(一))](https://img.it610.com/image/info8/29d109b3b255474f9e3311f00f914e77.jpg)
文章图片
添加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) 控制台查看,当前对象是否存在地面和正方体两个子对象;