三.js |在 sphereGeometry 上应用置换贴图后，顶点到中心的距离不会改变答案

【问题标题】：Three.js | Vertex's distance from center doesn't change after applying displacement map on sphereGeometry三.js |在 sphereGeometry 上应用置换贴图后，顶点到中心的距离不会改变
【发布时间】：2018-04-30 00:05:50
【问题描述】：

在球体几何体（仅位于原点）上应用置换贴图后，我正在尝试计算置换顶点的距离（从原点到原点）。

随着置换贴图改变顶点的位置，这两种情况下的距离应该不同（在应用置换贴图之前和之后），但不知何故到球体中心的距离（这里是原点）不会改变。

对此有何看法？在此先感谢:)

【问题讨论】：

当你说置换贴图时，你指的是纹理，比如凹凸贴图？
@TheJim01 是的。置换纹理是一个图像，其中每个像素的值（白色是最高的）映射到网格的顶点并重新定位。

标签： three.js

【解决方案1】：

在置换贴图适合图形管线的情况下，这是不可能的。您基本上将所有数据“发送”到着色器中，这就是发生置换贴图的地方。这就是为什么它有效但也无法访问的原因。如果您需要更易于访问的东西，您需要事先编写一些在您的顶点上操作的 JS，但它的性能几乎不会那么高。您还可以通过创建动态置换贴图来混合这两种方法。这一切都取决于上下文，这在您的问题中并不清楚。为什么应用地图后需要计算顶点距离？在制作置换贴图时，直接设置顶点的位置，可以根据原始顶点和读取置换贴图计算出到原点的距离。

【讨论】：

我在球体的不同顶点放置了不同的几何图形，这些几何图形在应用置换贴图后会随着与球体实际表面（或原点）的距离而变化
如果没有例子，很难更具体地回答。考虑在您的问题中添加MCVE。

【解决方案2】：

您的置换贴图不会影响定义的几何图形。相反，它会在渲染时影响它，着色器使用贴图来调整顶点位置和片段着色。此信息不会共享回主程序。

我相信获得所需内容的最简单方法是手动计算。这意味着对于每个顶点，您将查看其 UV 坐标，从置换贴图图像中读取该坐标的值，然后执行置换值如何影响顶点的计算。您已经知道所有顶点距离原点都有一定的半径，所以这很简单：

totalDistance = radius + ( displacementRange * displacementFactor )

您还可以通过分割位移值将值拉近中心（例如，1 是全推，0.5 没有变化，0 是全拉）：

totalDistance = radius + ( displacementRange * displacementFactor * ((displacementFactor < 0.5)? -1 : 1))

【讨论】：