JS Library 学习笔记：Three.js 初见面，在2D画面创造三维世界 (五)

渲染回圈建立动画效果

之前利用PixiJS建立动画时，运用PIXI.Ticker设定运算逻辑，定时变化渲染画面产生动画效果，在Three.js这边也可以调用浏览器的requestAnimationFrame方法，运用相同的渲染回圈(render loop)概念，达成定时变化渲染画面产生动画效果。

const myAnimate = () => {
    requestAnimationFrame( myAnimate );
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
}

//执行上方定义会重新渲染的myAnimate函式
myAnimate();

除了物体的位置变化外，3D这边还有摄影机视角可以进行操作，就像是电影运镜一样，让画面移动建立不同的动画效果；另外像是光源的位置调整，也会产生其他有趣的效果。

结语

Motion Graphic、动画就像是程序语言一样，多数复杂的技术方法可以解构成一个一个小元素，当我们从元素着手，搭配时间与速度变化，就能组合出很多华丽丰富的动态效果，而网页技术也是如此，是一个又一个的参数运算与设定，构成一整个完整的网页，呈现在使用者的萤幕中。

本系列重新阅读整理了CSS Animation、DOM事件为主的JavaScript，以及试用jQuery、GSAP、PixiJS、Three.js基础功能，每个所着重的技术不尽相同，同时也可以从中找到类似的概念；除了技术的熟悉外，如何发想主题、构思画面、安排动态，也会是网页专案的关键影响因素，因此，本系列一开始希望从过去制作过几个动画专案的经验去整理，与大家分享基础的制作流程，并解构基础动态元素，希望让大家在网页的动态设计时，能更有方向着手执行。

动起来吧！Web Motion 动态特效网页学习日记 在此告一段落，谢谢大家！