1024程序員節(jié)剛過，手癢想實現(xiàn)一個html的3d編輯器，看了three.js 同時還看了網(wǎng)上流傳已久的<<基于 HTML5 Canvas 的簡易 2D 3D 編輯器>>，都覺得太復(fù)雜，一個3d編輯器貌似沒有幾百行代碼搞不定。其實還真不是，那就用上次推薦的http://www.thingjs.com開發(fā)平臺來試著做一下吧。

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

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

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

thingjs平臺因為封裝了底層細(xì)節(jié)所以能做到快速開發(fā)的目的。

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

第三步，做一個編輯面板，簡單一點四個元素， 兩個模型，一個箭頭線和一個管線，像下面這樣

代碼如下：

解釋，因為面板庫用到了圖標(biāo) lib/iconfont.js 所以需要先用Loader.sync先加載圖標(biāo)。

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

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

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

截屏效果。

后記：

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

因為強(qiáng)大的封裝。

做完了怎么給老板看呢？

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

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

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

大概500行。

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

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

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

作者：liuwei000000

轉(zhuǎn)載于:https://www.cnblogs.com/ThingJS3D/p/9945112.html

總結(jié)

以上是生活随笔為你收集整理的50代码HTML5 Canvas 3D 编辑器优雅搞定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。