javascript - Three.js 中的体素化 — 来自纹理的粒子 Material

Question

我有一个图像，我正在使用 TextureLoader#load() 将图像映射到 PlaneGeometry — 只要我的相机，它就能很好地渲染没有“沿着”平面看，在这种情况下，它(当然)是零宽度，并且从 View 中消失。

我正在尝试弄清楚如何赋予图像一些深度，所以我目前的想法是:

• 生成一个 ParticleSystem，其中 (x, y) 处的粒子与图像中 (x, y) 处的(灰度)像素共享其颜色——有效地，使每个像素成为面向相机的广告牌
• “立方体化”图像中的每个像素，使其在 z 方向上占据一些空间。因此，(x, y) 处的像素变成 (x, y, z) 处的立方体，在所有三个维度上都有一定的大小。

两者都允许我“沿着”图像的边缘看一些东西，而平面是不可见的。

我的第一个问题是，这可能吗？第二个问题，这种体素化技术的名称是什么？ Three.js 本身支持它吗？

非常乐意提供更多信息或一些基本代码(如果有帮助的话)。

Answer 1

这绝对是可能的。

立方体的想法应该在每一个像样的 3D 引擎中都是可行的。这只是克隆/实例化立方体的问题，然后相应地定位它们并为其着色。

不确定该技术是否有名称。

也不确定 Threejs 中的粒子系统，但我想这也是一个选择。

我真正的答案是:使用高度图

他们确实做你想做的事。高度图是灰度纹理，对于它映射到的几何体的每个顶点，它将根据灰度偏移顶点位置的 y 分量(白色 = 无偏移，黑色 = 完全偏移) http://danni-three.blogspot.de/2013/09/threejs-heightmaps.html