在 VueJS 中使用 WebGL

身為一個設計師,除了 SVG動態背景中文 Web Fonts 外也沒有什麼視覺上的效果,令我的作品在設計上有所缺失!

以前都是用 Flash 來開發一些超炫目的網站,但現在都轉成用 Javascript 了,當然要踏入 WebGL 的領域,開發炫眼的 3D 網站了!

Three.js

應該是最多人用也是最易用的 WebGL Javascript Library,在 Three.js 的官網有不少 examples 也有中文的文件,基本上依官網來做就可以完成不少效果。

不過 Three.js 對 ES6 及 Nodejs 的支援不是太理想,說明文件也不太足夠,引致當中要依靠很多額外的 plugins / library 才能完成在 Vue 中的工作。所以我寫這篇文章就是把我測試不同方法後,最為理想的解決方法。

首先用 VueCli 3 建立一個基本的 Vue 網站,接下來我會建立兩個頁面,兩頁都有不同的 WebGL 效果在切換。

大家可能都會想,只是單純把 threejs 放到 vue 頁面罷了?但開發中途我才發現其實有很多隱藏的問題需要處理。

如何載入 Three.js?

首先看看有沒有人弄成 Vue Plugin,確實有 vue-threejs 這個項目。但我用這個source架不起來,不知是什麼問題... 官方的 example 也不是太清楚如何導入,如果有人用到不妨告訴我...

我們還是使用官方建議做法
$npm install three,千萬不要用錯 threejs,這個是舊版本,不要弄錯!

然後就是載入 Three.js,我使用了 Plugins 的方式載入,方便以後使用。

然後在任何 Vue 檔案中 <script> 的範圍都可以用 this.$THREE 即可使用 Three.js 的功能而不用每頁也 import。

但這不是很簡單嗎?的確只用基本功能這樣子就夠,但其實還有很多功能未被載入,到而要做用時再說解決方法。