Vue3 + Three.js 首款 3D 數(shù)字孿生編輯器!正式開(kāi)源!
作為一個(gè)前端開(kāi)發(fā)工程師,日常工作中貌似避免不了要跟 3D 打交道,智慧城市、工業(yè)數(shù)字孿生、展廳互動(dòng)展示,這些都離不開(kāi) 3D 開(kāi)發(fā)。
可問(wèn)題是,3D 開(kāi)發(fā)的門(mén)檻有點(diǎn)高,把不少開(kāi)發(fā)者都給攔住了。
不過(guò)別擔(dān)心,今天給大家介紹一個(gè)超棒的開(kāi)源項(xiàng)目 ——Three-Editor,一個(gè)基于 Three.js 的 3D 低代碼編輯器平臺(tái),有了它,以后搞 3D 開(kāi)發(fā)就輕松多了。
項(xiàng)目概述
Three-Editor 就是一個(gè)專(zhuān)門(mén)搞 3D 場(chǎng)景構(gòu)建的低代碼編輯器內(nèi)核,目的就是把 3D 應(yīng)用開(kāi)發(fā)的門(mén)檻給降下來(lái)。
它搞了個(gè)可視化編輯界面,開(kāi)發(fā)者和設(shè)計(jì)師用起來(lái)可方便了,能輕輕松松地創(chuàng)建、編輯和優(yōu)化 3D 場(chǎng)景,那些復(fù)雜的 3D 編程細(xì)節(jié)都不用管,搞數(shù)字孿生項(xiàng)目效率一下就上去了。
技術(shù)架構(gòu)
Three-Editor 的技術(shù)架構(gòu)那可不是吹的,特別厲害:
- 主要語(yǔ)言 :JavaScript,占比高達(dá) 98.3%,絕對(duì)的核心地位。
- 前端框架 :Vue3,現(xiàn)在最火的框架之一。
- 3D 引擎 :Three.js 和 Cesium.js,這兩個(gè)組合在一起,3D 效果想不好都難。
- 動(dòng)畫(huà)庫(kù) :GSAP,搞動(dòng)畫(huà)的都知道,這個(gè)庫(kù)超級(jí)好用。
- 界面組件 :dat.GUI,做界面交互的利器。
- 構(gòu)建工具 :Vite,啟動(dòng)速度飛快,開(kāi)發(fā)體驗(yàn)直接拉滿。
項(xiàng)目完全是按照現(xiàn)代前端開(kāi)發(fā)的規(guī)矩來(lái)的,用的是 Node.js 環(huán)境(推薦 18+ 版本,現(xiàn)在已經(jīng)支持到 Node 20.9.0 了),裝依賴(lài)用的是 pnpm,又快又穩(wěn)。
功能與優(yōu)勢(shì)
- 高度自定義 :想怎么改就怎么改,特別靈活,自己想要啥功能都能加上。
- 組件化架構(gòu) :功能拆成一個(gè)個(gè)組件,用起來(lái)就像搭積木一樣,方便又快捷。
- 可視化編輯 :所見(jiàn)即所得,界面咋顯示的,最后效果就是啥樣,省得老跑去看預(yù)覽。
- 案例超豐富 :不管你是想做智慧城市還是工業(yè)設(shè)備建模,都能找到對(duì)應(yīng)的案例參考。
- 支持 3Dtiles :大規(guī)模復(fù)雜場(chǎng)景輕松搞定,不用怕項(xiàng)目太大搞不定。
- 文檔很完善 :遇到問(wèn)題不用慌,文檔里基本都能找到答案。
項(xiàng)目使用場(chǎng)景
- 數(shù)字孿生系統(tǒng) :工廠、建筑、城市的數(shù)字映射全都能搞,線上線下實(shí)時(shí)互動(dòng),管理起來(lái)方便得很。
- 低代碼開(kāi)發(fā)平臺(tái) :不會(huì)寫(xiě)代碼也沒(méi)關(guān)系,用這個(gè)平臺(tái),非專(zhuān)業(yè)人員也能整出很棒的 3D 應(yīng)用。
- 工業(yè)組態(tài)編輯 :工業(yè)監(jiān)控和數(shù)據(jù)可視化的需求,它都能滿足,工程師們能快速搞出靠譜的監(jiān)控界面。
- 交互式展示 :展覽、教育、營(yíng)銷(xiāo)這些地方,用它的視覺(jué)和交互效果,直接把人的眼睛給抓住。
項(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é)語(yǔ)
說(shuō)實(shí)話,Vue3 + Three.js 這首款 3D 數(shù)字孿生編輯器一開(kāi)源,3D 開(kāi)發(fā)領(lǐng)域直接被改變了。
它讓開(kāi)發(fā)變得更簡(jiǎn)單、更高效,還激發(fā)了大家更多的創(chuàng)意。
不管你是專(zhuān)業(yè)開(kāi)發(fā)的老手,還是剛?cè)胄械男率?,這工具都特別實(shí)用。真心希望大家都能去試試,給它點(diǎn)支持,一起把數(shù)字孿生技術(shù)往前推一把。