轉載 1024程式設計師節剛過，手癢想實現一個html的3d編輯器，看了three.js 同時還看了網上流傳已久的<<基於 HTML5 Canvas 的簡易 2D 3D 編輯器>>，都覺得太複雜，一個3d編輯器貌似沒有幾百行程式碼搞不定。其實還真不是，那就用上次推薦的http://www.thingjs.com開發平臺來試著做一下吧。 目標50行程式碼之內完成3d編輯器功能。 第一步，先來到thingjs平臺的線上開發環境。 三行程式碼載入了一個預設場景，那就在這個基礎上做吧。先把不需要的註釋刪了。 thingjs平臺因為封裝了底層細節所以能做到快速開發的目的。 第二步，場景載入完成後進入編輯模式

第三步，做一個編輯面板，簡單一點四個元素， 兩個模型，一個箭頭線和一個管線，像下面這樣 程式碼如下： 解釋，因為面板庫用到了圖示 lib/iconfont.js 所以需要先用Loader.sync先載入圖示。 toorlbar.addimage 為新增一個圖示按鍵。發現實現面板的程式碼比功能邏輯還多~。 最後一步實現按鍵的建立模型回撥 碼如下：總共43行，真的不到50行（拷貝程式碼到線上開發環境可直接看效果）： 截圖效果。 後記： 為什麼能短短50行就實現html canvas 3d編輯器的效果呢？ 因為強大的封裝。 做完了怎麼給老闆看呢？ 點上面的演示按鍵，會出現三種演示方式 1. 電腦，2. 手機，3.iframe（嵌入到自己的頁面）。還可以手機訪問_{，不知道手機訪問好不好操作}。 那編輯完之後怎麼退出編輯模式呢？ 如果用three.js實現類似的功能需要多少行程式碼呢？ 大概500行。 到底自己開發還是選擇庫開發？ 研究底層技術當然是選自己做，如果是做專案，那還是用平臺庫來做吧。