2017-07-29 95 views
0

我正试图在从OBJ(或STL)加载的3D模型上渲染平面动态创建的热图。通过矢量3点数据在3D模型上创建热图

我目前正在用Three.js加载和渲染一个OBJ。我有vector3点,我目前正在绘制为简单的红色立方体(下图)。这些数据点都被放射到我的OBJ网格上,并躺在地面上。 vector3点从外部数据源加载,并且将根据正在查看/收集的数据而改变。

points

我想我的Vector3点数据呈现到我的OBJ的表面上的热图。下面是一些例子说明的视觉效果我想实现的类型:

example1

example2

example3

example5

我觉得顶点着色实现的方法这个,但我的问题是,我的OBJ模型没有足够的曲面细分来做到这一点。正如你可以看到许多红点落在每个脸上。我正在努力寻找一种方法来绘制我的对象的网格,其颜色恰好在我的红点数据所在的位置。我假设我需要将我的随机vector3点转换为网格,但无法找到这样做的方法。

我看过生成纹理的可能性,但1)我没有一个UV地图为我的OBJs,并没有看到一种方式来编程生成它们,2)我有点失去了我如何会将vector3点数据与UV点相关联。我看过使用着色器,但是我的vector3点数据对于使用着色器来说似乎太大(可能会有数十万个点)。我也觉得这不是每帧渲染热图的正确方法,而只是在加载时渲染一次。

我已经研究了点云和行进立方体算法的等值面,但是我不认为这是正确的方向,因为只有我的数据有点像点云,而且我不确定如何会沿着我的OBJ网格的表面保持光滑。

虽然我宁愿将所有内容都保存在JavaScript中供浏览器查看,但我愿意使用REST进行任何语言/程序的服务器端处理,只要它可以在没有人为干预的情况下自动执行并推回到浏览器进行渲染。

任何建议或指导表示赞赏。

+1

向我们显示您的代码。 –

回答

2

我只是猜测,但它似乎首先你需要有UV坐标,每个三角形映射到纹理。我不建议用手工做这个建模包。大多数建模软件包都有自动和均匀地将每个三角形映射到纹理的方法。 For example in Blender

接下来通过计算哪些三角形受到每个点(光线投射)的影响,查找纹理坐标,将该点投影到纹理空间中,然后将颜色放入纹理的该部分中。我只是猜测你不需要做精确的点,但可能需要考虑相邻的三角形,因为碰到三角形边缘附近的一些热量信息需要流入相邻的三角形,但相邻的三角形可能会完全使用纹理的不同部分。