作為一個(gè)前端開發(fā)工程師，日常工作中貌似避免不了要跟 3D 打交道，智慧城市、工業(yè)數(shù)字孿生、展廳互動(dòng)展示，這些都離不開 3D 開發(fā)。

可問題是，3D 開發(fā)的門檻有點(diǎn)高，把不少開發(fā)者都給攔住了。

不過別擔(dān)心，今天給大家介紹一個(gè)超棒的開源項(xiàng)目 ——Three-Editor，一個(gè)基于 Three.js 的 3D 低代碼編輯器平臺(tái)，有了它，以后搞 3D 開發(fā)就輕松多了。

項(xiàng)目概述

Three-Editor 就是一個(gè)專門搞 3D 場景構(gòu)建的低代碼編輯器內(nèi)核，目的就是把 3D 應(yīng)用開發(fā)的門檻給降下來。

它搞了個(gè)可視化編輯界面，開發(fā)者和設(shè)計(jì)師用起來可方便了，能輕輕松松地創(chuàng)建、編輯和優(yōu)化 3D 場景，那些復(fù)雜的 3D 編程細(xì)節(jié)都不用管，搞數(shù)字孿生項(xiàng)目效率一下就上去了。

技術(shù)架構(gòu)

Three-Editor 的技術(shù)架構(gòu)那可不是吹的，特別厲害：

• 主要語言 ：JavaScript，占比高達(dá) 98.3%，絕對的核心地位。
• 前端框架 ：Vue3，現(xiàn)在最火的框架之一。
• 3D 引擎 ：Three.js 和 Cesium.js，這兩個(gè)組合在一起，3D 效果想不好都難。
• 動(dòng)畫庫 ：GSAP，搞動(dòng)畫的都知道，這個(gè)庫超級好用。
• 界面組件 ：dat.GUI，做界面交互的利器。
• 構(gòu)建工具 ：Vite，啟動(dòng)速度飛快，開發(fā)體驗(yàn)直接拉滿。

項(xiàng)目完全是按照現(xiàn)代前端開發(fā)的規(guī)矩來的，用的是 Node.js 環(huán)境（推薦 18+ 版本，現(xiàn)在已經(jīng)支持到 Node 20.9.0 了），裝依賴用的是 pnpm，又快又穩(wěn)。

功能與優(yōu)勢

• 高度自定義 ：想怎么改就怎么改，特別靈活，自己想要啥功能都能加上。
• 組件化架構(gòu) ：功能拆成一個(gè)個(gè)組件，用起來就像搭積木一樣，方便又快捷。
• 可視化編輯 ：所見即所得，界面咋顯示的，最后效果就是啥樣，省得老跑去看預(yù)覽。
• 案例超豐富 ：不管你是想做智慧城市還是工業(yè)設(shè)備建模，都能找到對應(yīng)的案例參考。
• 支持 3Dtiles ：大規(guī)模復(fù)雜場景輕松搞定，不用怕項(xiàng)目太大搞不定。
• 文檔很完善 ：遇到問題不用慌，文檔里基本都能找到答案。

項(xiàng)目使用場景

• 數(shù)字孿生系統(tǒng) ：工廠、建筑、城市的數(shù)字映射全都能搞，線上線下實(shí)時(shí)互動(dòng)，管理起來方便得很。
• 低代碼開發(fā)平臺(tái) ：不會(huì)寫代碼也沒關(guān)系，用這個(gè)平臺(tái)，非專業(yè)人員也能整出很棒的 3D 應(yīng)用。
• 工業(yè)組態(tài)編輯 ：工業(yè)監(jiān)控和數(shù)據(jù)可視化的需求，它都能滿足，工程師們能快速搞出靠譜的監(jiān)控界面。
• 交互式展示 ：展覽、教育、營銷這些地方，用它的視覺和交互效果，直接把人的眼睛給抓住。

項(xiàng)目案例相關(guān)

• Github 地址：https://github.com/z2586300277/three-editor
• 在線編輯器預(yù)覽：https://z2586300277.github.io/threejs-editor/#/editor
• 在線編案例展示：https://z2586300277.github.io/three-editor/dist/#/example
• 相關(guān)文檔：https://z2586300277.github.io/three-editor/docs/dist

結(jié)語

說實(shí)話，Vue3 + Three.js 這首款 3D 數(shù)字孿生編輯器一開源，3D 開發(fā)領(lǐng)域直接被改變了。

它讓開發(fā)變得更簡單、更高效，還激發(fā)了大家更多的創(chuàng)意。

不管你是專業(yè)開發(fā)的老手，還是剛?cè)胄械男率郑@工具都特別實(shí)用。真心希望大家都能去試試，給它點(diǎn)支持，一起把數(shù)字孿生技術(shù)往前推一把。