在 VueJS 中建立 Three.js 場景

Edmond Yip -

上回說明如何載入 Three.js，接下來就會建立一個簡單的場景，Three.js 建立 3D 場景的概念跟 3D 軟件中繪圖的概念相當接近，只是換成用程式來建立，如果有使用 3D 繪圖軟件的經驗會更好了解。在 Vue 中建立 Three.js 場景就先要了建 Vue 的流程。

我當是使用的 Vue 版本是 2.x，Three.js 版本是 R97。Vue 的設定不多說，大家必需先學會 Vue。

首先在 mounted() 中載入 this.init()，在init() 中會預先定義一些共用的數據，以便在不同的 methods 中共用。

簡單說明一下我會建立以下 methods 有什麼作用

  • init() 定義共用數據及運行 runTime()
  • runTime() 建立主要流程，我個人喜歡分開成不同 methods 比較易處理
  • createScene() 建立場景，我把 Scene, Camera, Renderer 都放這兒
  • createLights() 建立燈光
  • createObject() 建立物件，Geometry 及 Material 都在這處理
  • windowResize() 網站的話就必需處理 responsive 的問題
  • renderScene() 就是會重覆 render 時，處理動畫格的位置

整段 Code

出來的效果就跟我在 Lab 中展視的一樣，大家可以去看看。

當中各部份還可以作更深入的設定，詳細可以到 Three.js 官網的文件看看。