上回說明如何載入 Three.js,接下來就會建立一個簡單的場景,Three.js 建立 3D 場景的概念跟 3D
軟件中繪圖的概念相當接近,只是換成用程式來建立,如果有使用 3D 繪圖軟件的經驗會更好了解。在 Vue 中建立 Three.js 場景就先要了建 Vue
的流程。
我當是使用的 Vue 版本是 2.x,Three.js 版本是 R97。Vue
身為一個設計師,除了 SVG動態背景 [https://blog.256pages.com/svg-animation-background-vue/] 及 中文 Web Fonts
[https://blog.256pages.com/chinese-web-fonts/] 外也沒有什麼視覺上的效果,令我的作品在設計上有所缺失!
以前都是用 Flash 來開發一些超炫目的網站,但現在都轉成用 Javascript 了,當然要踏入 WebGL 的領域,開發炫眼的 3D 網站了!
Three.js
一直以來都被質疑為什麼不學學 React 而選擇了 Vue。不過 6月5日 Vue 在 Github 上的星星數終於超過了 React,雖然不排除 Vue
的星數內有很大量中國用家的水份,但是 Vue 確實是受到世界用家的關注,雖然晚了點出文來說,但不足一個月己經超前了 1000 多星了。
Vue Roadmap
原作者 Evan You [https://github.com/open-source/stories/yyx990803] 也在努力開發及改進
最新發現 vue-cli [https://cli.vuejs.org/] 進行大更新並開了個別專頁。3.0 新增的功能比想像中多,而且跟 2.x
有很大分別,更大程度訂製了 Vue 的開發流程。
首先必須重新安裝
$ npm install -g @vue/cli
安裝功能
vue-cli 最初及最基本的功能也得到強化,比以前更簡單快捷
使用 vue create project-name來建立新 project。
* 選擇
動態 SVG 背景
開始時第一個遇到的問題就是 Background。我構思中是使用 SVG 做背景。每次轉頁是 SVG 動態轉成另一個形狀。
我曾經試用 Snap.svg [http://snapsvg.io/] 及 SVG.js [http://svgjs.com/]
來做這效果,但由於都比較困難,所以最後選用一個比較舊的 Library SVG Morpheus
[https://github.com/alexk111/