一個用來展示三維模型的Vue組件，用最簡單的方式在網(wǎng)頁中展示三維模型，解決模型視角控制、鼠標事件等一系列問題。
項目地址：https://github.com/hujiulong/vue-3d-model
為什么做這個組件
我經(jīng)常聽到前端朋友們抱怨，在網(wǎng)頁上展示三維模型太麻煩了。但是這方面的需求又有很多，例如做房地產(chǎn)的需要展示戶型、賣汽車的需要展示汽車模型等。
在網(wǎng)頁上展示三維模型就只能用WebGL技術了（別跟我說Flash和其他非標準插件啦），但是WebGL編程和JS區(qū)別太大，最好的方式大概是使用在WebGL基礎上封裝的庫，例如three.js，但是three.js的學習成本也非常高，并且坑非常多。
所以我就開始做這個組件，目的只有一個：用最簡單的方式來解決三維模型展示的需求
解決了哪些問題
當一個新手試圖用three.js來展示一個模型（這一般是經(jīng)過了數(shù)天的學習以后），他通常不會一開始就得到自己想要的結(jié)果。要么模型是一片黑色，或者模型根本就看不到。這里實際上有三個問題：
- 建模軟件或軟件配置的區(qū)別，導致模型尺寸的單位不統(tǒng)一，需要手動調(diào)節(jié)參數(shù)放大或者縮小
- 模型可能偏移了中心點，導致可視范圍內(nèi)看不到模型
- 沒有給模型合適的光照
這些看似簡單的問題實際上并不容易解決。即使解決了這些問題，還有更大的BOSS等著你：
你可能需要通過鼠標來旋轉(zhuǎn)模型，或者通過滾輪來放大縮小。或者更進一步，你需要知道鼠標點擊時，是否點中了模型，點中的是哪個部分。
這些都是聽起來就很頭疼的問題，要解決他們你至少需要有一定的圖形學知識，或者對three.js的各種類了如指掌。
現(xiàn)在這些問題都被Vue-3D-Model解決了，如果你已經(jīng)會使用vue（不會的話可以花幾個小時學習一下），那么只需要短短幾行代碼就可以解決這些問題了:
<body>
<div id="app">
<model-obj src="static/model.obj"></model-obj>
</div>
<script src="vue.js"></script>
<script src="vue-3d-model.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
它會自動將模型以合適的大小顯示出來，如果模型偏離了中心點也會自動校正。并且直接就可以通過鼠標來旋轉(zhuǎn)和縮放了。這是一個在線的例子(墻內(nèi)可能加載比較慢)：DEMO
當然，你也可以通過給組件傳入?yún)?shù)來手動調(diào)節(jié)。更詳細的使用方式可以在github上看到。
接下來要做的事
目前組件只支持OBJ格式以及three.js的JSON格式，后面馬上就會支持dae、stl、fbx等格式的模型了。
文檔和示例我也會找時間繼續(xù)補充的，如果有問題或者其他需求，也可以來提issue。
github: https://github.com/hujiulong/vue-3d-model
點個星星吧
