概述

近来公司在做一个大型的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 设置