ThreeJS H5 2D轮廓生成3D几何模型

ThreeJS H5编写的根据2D黑白图轮廓生成3D几何模型，注：本地预览请用火狐浏览器，谷歌浏览器需要localhost/127.0.0.1 服务器配置下运行才有效果。 ！index.html是最终总运行的入口 。该项目使用3rejs从楼层蓝图图像构建三维建筑楼层平面模型。

这是一个由AngularJS和AngularMaterial设计支持的单页应用程序。

基本上，任何地图（到目前为止我决定只识别黑色作为高度）都可以原型化。

再举一个例子，我拿着学院的校园地图做了一个模型：起点，只需下载整个项目并启动index.htm，剩下的将非常简单。

工作原理基本上，用户需要有一个黑色/Wite png图像准备，上传，并渲染三维模型。

注意，你必须准备好楼层平面图，剩下的部分由这个软件来处理。

我们在这里做的几个技巧：

1.将png转换为二进制代码

2.用BFS优化二维二进制阵列

3.利用3rejs的几何合并功能优化三维模型

4.渲染三维模型

5.允许控制三维模型

原文：A couple tricks we are doing here:

Convert png into binary code

Optimize the binary 2D array with BFS

Optimize the 3D models with ThreeJS’s Geometry merge function

Render 3D model

Allow control of the 3D model

注意：我们并没有制作精确的三维模型，只是通过立方体模型的像素进行模拟。输入的png图像越好，结果就越好。

好的png图像的定义是：清晰而厚实的黑色墙壁。

例子这是一个随机楼层平面图，可以在网上找到，并与三维建模工具，我们可以建立一个三维原型模型。