概述

最近公司在做一個大型的webgl應用，總結如下:

1.建模軟體建模(3d Max revit)

2.自定義一套 語義化的模型格式，並編寫模型格式轉化外掛,把建模軟體的模型格式轉成自定義格式。

為什麼要自定義語義化的模型格式呢？

因為，現在瀏覽器的效能很尷尬說好不好，說差不差。得優化啊！
比如：模型裡帶了描述資料，指這單個模型的 長寬高 自定義資料等。這些資料往往是比較龐大的，而且每一個小模型都有，不可能隨著模型載入到 瀏覽器上去。那麼就得把模型資料，與幾何資料分離。模型資料放資料庫，幾何資料保留，並且做一定優化，比如只存 原幾何體的基礎資訊，通過變換得到 類似的幾何體
（很多場景下，有很多相同的 長方體，在模型格式中 可以 只存一個，其他的 copy出來）

3.瀏覽器效能有限，不能直接載入過大的模型檔案，（太大了一直loading使用者也受不了）就得 自己寫 切割模型 的小工具，把大的模型，切成一個一個的小模型，按需載入，或者分佈載入。

4.編寫展現層對webgl的互動操作 封裝，推薦庫 Three.js babylon.js cannon.js xeogl.js
各有強處這裡就不做說明了。

5.後端提供 api 點選某個模型，返回對應的模型資料。

綜上所述 webgl 的應用就是

1.webgl 展現層 封裝基礎 互動 操作等.

2.webgl 服務層
1).提供使用者上傳模型
2).自動轉換模型且模型資料與幾何資料分離
3).自動把大模型切割成小模型
4). 提供api

todoList

1.完成 webgl server
2.完善 webgl 展現層 各種互動操作

暫時就想到這些，下面自己寫的一個小的demo 慢慢完善。。。
https://github.com/shinseed/T…

使用

1.npm install || yarn install

2.npm run dev

3.超級瑪麗 模式操作 w、a、s、d 空格 (只做了向下的碰撞檢測)

SloceJson 使用

1.model 資料夾為原始模型檔案

2.output 切割完後的模型檔案

3.終端進入 該目錄 node sliceJson.js

文件目錄

1.src 原始碼

2.sliceJson 把大的模型檔案切割成小模型

3.static 靜態資源

4.config webpack 配置