一個用來展示三維模型的Vue組件，用最簡單的方式在網(wǎng)頁中展示三維模型馋袜，解決模型視角控制、鼠標(biāo)事件等一系列問題舶斧。
項目地址：https://github.com/hujiulong/vue-3d-model
為什么做這個組件
我經(jīng)常聽到前端朋友們抱怨欣鳖，在網(wǎng)頁上展示三維模型太麻煩了。但是這方面的需求又有很多茴厉，例如做房地產(chǎn)的需要展示戶型泽台、賣汽車的需要展示汽車模型等什荣。
在網(wǎng)頁上展示三維模型就只能用WebGL技術(shù)了（別跟我說Flash和其他非標(biāo)準(zhǔn)插件啦），但是WebGL編程和JS區(qū)別太大怀酷，最好的方式大概是使用在WebGL基礎(chǔ)上封裝的庫稻爬，例如three.js，但是three.js的學(xué)習(xí)成本也非常高蜕依，并且坑非常多桅锄。
所以我就開始做這個組件，目的只有一個：用最簡單的方式來解決三維模型展示的需求
解決了哪些問題
當(dāng)一個新手試圖用three.js來展示一個模型（這一般是經(jīng)過了數(shù)天的學(xué)習(xí)以后）样眠，他通常不會一開始就得到自己想要的結(jié)果友瘤。要么模型是一片黑色，或者模型根本就看不到檐束。這里實際上有三個問題：
- 建模軟件或軟件配置的區(qū)別辫秧，導(dǎo)致模型尺寸的單位不統(tǒng)一，需要手動調(diào)節(jié)參數(shù)放大或者縮小
- 模型可能偏移了中心點被丧，導(dǎo)致可視范圍內(nèi)看不到模型
- 沒有給模型合適的光照
這些看似簡單的問題實際上并不容易解決盟戏。即使解決了這些問題，還有更大的BOSS等著你：
你可能需要通過鼠標(biāo)來旋轉(zhuǎn)模型甥桂，或者通過滾輪來放大縮小柿究。或者更進(jìn)一步格嘁，你需要知道鼠標(biāo)點擊時笛求，是否點中了模型廊移，點中的是哪個部分糕簿。
這些都是聽起來就很頭疼的問題，要解決他們你至少需要有一定的圖形學(xué)知識狡孔，或者對three.js的各種類了如指掌懂诗。
現(xiàn)在這些問題都被Vue-3D-Model解決了，如果你已經(jīng)會使用vue（不會的話可以花幾個小時學(xué)習(xí)一下）苗膝，那么只需要短短幾行代碼就可以解決這些問題了:
<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>
它會自動將模型以合適的大小顯示出來殃恒，如果模型偏離了中心點也會自動校正。并且直接就可以通過鼠標(biāo)來旋轉(zhuǎn)和縮放了辱揭。這是一個在線的例子(墻內(nèi)可能加載比較慢)：DEMO
當(dāng)然离唐，你也可以通過給組件傳入?yún)?shù)來手動調(diào)節(jié)。更詳細(xì)的使用方式可以在github上看到问窃。
接下來要做的事
目前組件只支持OBJ格式以及three.js的JSON格式亥鬓，后面馬上就會支持dae、stl域庇、fbx等格式的模型了嵌戈。
文檔和示例我也會找時間繼續(xù)補充的覆积，如果有問題或者其他需求，也可以來提issue熟呛。
github: https://github.com/hujiulong/vue-3d-model
點個星星吧
