1024程序員節(jié)剛過(guò)，手癢想實(shí)現(xiàn)一個(gè)html的3d編輯器，看了three.js 同時(shí)還看了網(wǎng)上流傳已久的<<基于 HTML5 Canvas 的簡(jiǎn)易 2D 3D 編輯器>>，都覺(jué)得太復(fù)雜，一個(gè)3d編輯器貌似沒(méi)有幾百行代碼搞不定。其實(shí)還真不是，這里與大家分享如何用UINO優(yōu)锘科技的數(shù)字孿生可視化開(kāi)發(fā)平臺(tái)-ThingJS來(lái)實(shí)現(xiàn)開(kāi)發(fā)。

目標(biāo)50行代碼之內(nèi)完成3d編輯器功能。

第一步，先來(lái)到thingjs平臺(tái)的在線開(kāi)發(fā)環(huán)境。

三行代碼加載了一個(gè)默認(rèn)場(chǎng)景，那就在這個(gè)基礎(chǔ)上做吧。先把不需要的注釋刪了。

thingjs平臺(tái)因?yàn)榉庋b了底層細(xì)節(jié)所以能做到快速開(kāi)發(fā)的目的。

第二步，場(chǎng)景加載完成后進(jìn)入編輯模式

第三步，做一個(gè)編輯面板，簡(jiǎn)單一點(diǎn)四個(gè)元素， 兩個(gè)模型，一個(gè)箭頭線和一個(gè)管線，像下面這樣

代碼如下：

解釋?zhuān)驗(yàn)槊姘鍘?kù)用到了圖標(biāo) lib/iconfont.js 所以需要先用Loader.sync先加載圖標(biāo)。

toorlbar.addimage 為添加一個(gè)圖標(biāo)按鍵。發(fā)現(xiàn)實(shí)現(xiàn)面板的代碼比功能邏輯還多~。

最后一步實(shí)現(xiàn)按鍵的創(chuàng)建模型回調(diào)

碼如下：總共43行，真的不到50行（拷貝代碼到在線開(kāi)發(fā)環(huán)境可直接看效果）：

截屏效果。

后記：

為什么能短短50行就實(shí)現(xiàn)html canvas 3d編輯器的效果呢？

因?yàn)閺?qiáng)大的封裝。

做完了怎么給老板看呢？

點(diǎn)上面的演示按鍵，會(huì)出現(xiàn)三種演示方式 1. 電腦，2. 手機(jī)，3.iframe（嵌入到自己的頁(yè)面）。還可以手機(jī)訪問(wèn)~，不知道手機(jī)訪問(wèn)好不好操作~。

那編輯完之后怎么退出編輯模式呢？

如果用three.js實(shí)現(xiàn)類(lèi)似的功能需要多少行代碼呢？

大概500行。

到底自己開(kāi)發(fā)還是選擇庫(kù)開(kāi)發(fā)？

研究底層技術(shù)當(dāng)然是選自己做，如果是做項(xiàng)目，那還是用平臺(tái)庫(kù)來(lái)做吧。

---------------------

作者：liuwei000000