在 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。

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