Vue3 + Three.js 首款 3D 數(shù)字孿生編輯器!正式開源!
作為一個(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ù)往前推一把。































