iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 30

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 動態特效網頁學習日記 在此告一段落,謝謝大家!


上一篇
JS Library 學習筆記:Three.js 初見面,在2D畫面創造三維世界 (四)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

尚未有邦友留言

立即登入留言