鐵人檔案
「這個按鈕點下去，換到這個頁面。」淡出淡入？下方上滑？淡出然後右方移入？
讓介面設計加分！頁面加上適當動態效果，加強使用者感受，也能運用時間差與效果呈現，彌補部分效能缺口帶來的不好體驗，運用一致性的視覺與動態效果，打造獨一無二的品牌風格。
-
嘗試創造網頁動態效果，從原生css、JavaScript開始，並使用Three.js、PixiJS等函式庫，從做中學的學習紀錄。
開始繪圖吧！ 有了基礎場景後，就可以開始畫圖了，首先使用new建構出PIXI.Graphics()圖像物件，接下來可以利用drawRect()、drawCirc...
來點互動效果吧! 除了繪圖外，PixiJS也能設定互動體驗，像是上一篇使用PIXI.Graphics()所建構出來的物件，就屬於可以設定互動效果的PixiJS定...
建立文字物件 使用new建構出PIXI.Text()文字物件，並將文字的內容做為第一個參數傳入，再將其放置進之前建構的場景中，即可建立基礎的文字物件。 //建立...
目前已接觸的DisplayObject包含了PIXI.Graphics()的圖像繪製、PIXI.Text()的文字建立，這些物件都能將互動屬性interacti...
上一篇有提到可以利用PIXI.Ticker將定期渲染的機制加進場景，建立基礎的小動畫，接下來就來試試看利用PixiJS做個小動畫吧！ 可以利用ticker.ad...
引入Z軸創造體積、呈現空間感外，光影也是 3D 重要元素，光的強弱、位置、角度、色彩等，會與物體的「材質」一同影響呈現的樣子；除了物體與光源變化外，也可以操作觀...
上一篇建立了基礎的場景後，接下來讓我們來建立物件後將物件放入場景中。Three.js提供了多種幾何圖形，可以直接建構相關物件做使用，而若希望運用更複雜的圖像，可...
在Three.js系列第一篇有提到，物件的材質與光源是3D的重要元素之一，Three.js也有相關的設定。 建立具有「材質」的立體圖型 Three.js提供多種...
在真實世界中，物體因為反射光進我們的眼中，而能被看見；因此，除了物體形狀外，材質與光之間的關係是3D模擬的重要元素。 加上光源，創造立體感 上一篇使用MeshS...
渲染迴圈建立動畫效果 之前利用PixiJS建立動畫時，運用PIXI.Ticker設定運算邏輯，定時變化渲染畫面產生動畫效果，在Three.js這邊也可以調用瀏覽...
