Edmond Yip

Edmond Yip
在 VueJS 中建立 Three.js 場景

Threejs

在 VueJS 中建立 Three.js 場景

上回說明如何載入 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 有什麼作用

在 VueJS 中使用 WebGL

webGL

在 VueJS 中使用 WebGL

身為一個設計師,除了 SVG動態背景 及 中文 Web Fonts 外也沒有什麼視覺上的效果,令我的作品在設計上有所缺失! 以前都是用 Flash 來開發一些超炫目的網站,但現在都轉成用 Javascript 了,當然要踏入 WebGL 的領域,開發炫眼的 3D 網站了! Three.js 應該是最多人用也是最易用的 WebGL Javascript Library,在 Three.js 的官網有不少 examples 也有中文的文件,基本上依官網來做就可以完成不少效果。 不過 Three.js 對 ES6 及 Nodejs 的支援不是太理想,說明文件也不太足夠,引致當中要依靠很多額外的 plugins / library 才能完成在 Vue 中的工作。所以我寫這篇文章就是把我測試不同方法後,