渲染迴圈建立動畫效果

之前利用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 動態特效網頁學習日記 在此告一段落，謝謝大家！