為什么做這個組件
我經常聽到前端朋友們抱怨，在網頁上展示三維模型太麻煩了。但是這方面的需求又有很多，例如做房地產的需要展示戶型、賣汽車的需要展示汽車模型等。
在網頁上展示三維模型就只能用WebGL技術了（別跟我說Flash和其他非標准插件啦），但是WebGL編程和JS區別太大，最好的方式大概是使用在WebGL基礎上封裝的庫，例如three.js，但是three.js的學習成本也非常高，並且坑非常多。
所以我就開始做這個組件，目的只有一個：用最簡單的方式來解決三維模型展示的需求
解決了哪些問題
當一個新手試圖用three.js來展示一個模型（這一般是經過了數天的學習以后），他通常不會一開始就得到自己想要的結果。要么模型是一片黑色，或者模型根本就看不到。這里實際上有三個問題：
- 建模軟件或軟件配置的區別，導致模型尺寸的單位不統一，需要手動調節參數放大或者縮小
- 模型可能偏移了中心點，導致可視范圍內看不到模型
- 沒有給模型合適的光照
這些看似簡單的問題實際上並不容易解決。即使解決了這些問題，還有更大的BOSS等着你：
你可能需要通過鼠標來旋轉模型，或者通過滾輪來放大縮小。或者更進一步，你需要知道鼠標點擊時，是否點中了模型，點中的是哪個部分。
這些都是聽起來就很頭疼的問題，要解決他們你至少需要有一定的圖形學知識，或者對three.js的各種類了如指掌。
現在這些問題都被Vue-3D-Model解決了，如果你已經會使用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> 
它會自動將模型以合適的大小顯示出來，如果模型偏離了中心點也會自動校正。並且直接就可以通過鼠標來旋轉和縮放了。這是一個在線的例子(牆內可能加載比較慢)：DEMO
當然，你也可以通過給組件傳入參數來手動調節。更詳細的使用方式可以在github上看到。
接下來要做的事
目前組件只支持OBJ格式以及three.js的JSON格式，后面馬上就會支持dae、stl、fbx等格式的模型了。
文檔和示例我也會找時間繼續補充的，如果有問題或者其他需求，也可以來提issue。
作者：hujiulong
鏈接： https://www.jianshu.com/p/c093ff00ea1b
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。