Three.js绘制三维动画_多媒体技术应用与实践_[共3页]

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

166
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body onload='threeStart();'>

<div id="canvas3d"></div>
</body>
</html>
执行以上程序，浏览器窗口中应该显示出了你所绘制
的立方体模型，如图6-6所示。

6.3.4 Three.js绘制三维动画
传统的JavaScript动画无非就是用setInterval函数来实现，这在较为简单或对流畅性要求不高时不会有什么问题，但现在随着对用户体验的关注度不断提高，对动画的复杂程度和流畅性都有了更高的要求，传统动画显得捉襟见肘了。

为解决此问题浏览器提供了一个统一帧管理、提供监听帧的API，即requestAnimationFrame函数。

此函数能够在一定时间间隔后调用指定函数，最大可以支持60fps，而且这个函数只有在所在浏览器页面正在被浏览的时候才会执行，因此更加节省资源。

在WebGL中利用requestAnimationFrame函数实现动画效果有多种方法。

下面介绍比较常用的两种方法。

1．追加物体的回转角度
以上节例子为基础，我们只需稍作改变即可。

主要是增加了loop()函数，并在主函数threeStart()中增加调用loop()函数。

loop()函数具体内容如下：
var t=0;
function loop() {
t++;
cube.rotation.set( t/100, t/100, t/100 );
renderer.clear();
renderer.render(scene, camera);
window.requestAnimationFrame(loop);
}
该函数首先定义一个自增量t，并应用在rotation.set()函数中使三维空间中的物体不断地改变姿势。

renderer.clear()函数用于清除画布，否则上一帧绘制的内容就会遗留下来。

renderer.render()函数对画布进行重新渲染。

window.requestAnimationFrame(loop)实现对自身的无限循环调用。

修改后
的源代码如下：
Three-move-position.html
<html>
<head>
<meta charset="UTF-8">
<title>lesson1-by-shawn.xie</title>

<script src="Three.js"></script>
<script type="text/javascript">
图6-6 用Three.js绘制的三维立方体。