使用顶点着色器修改网格的顶点不会更改其 BufferGeometry 属性，并会导致光线投射器不准确

Question

[在此处使用JSFiddle更新] 如果将鼠标悬停在平面外，光线投射器仍然认为它悬停在对象上，因为我们修改了顶点着色器中的 z 位置

对于我的项目，我有一个需要悬停效果的平面轮播(PlaneBufferGeometry和ShaderMaterial)。

但是，我有一个状态，通过在顶点着色器中对每个顶点的z坐标进行动画处理来缩小平面。在这种状态下，我的悬停效果使用 THREE。光线投射器被破坏，因为 BufferGeom 数组中的位置未更新，因此光线投射器仍使用与原始大小平面相同的 uv。

我已经尝试在顶点着色器运行后为每个平面p调用以下函数：

p.frustrumCulled = false;
p.geometry.verticesNeedUpdate = true;
p.geometry.normalsNeedUpdate = true;
p.geometry.computeBoundingBox();
p.geometry.computeBoundingSphere();
p.geometry.computeFaceNormals();
p.geometry.computeVertexNormals();
p.geometry.attributes.position.needsUpdate = true;

我也知道如果我只是使用THREE.Mesh内置的scale来缩放每个平面，uv 将被正确进行光线投射，但我不能这样做，因为我只能使用顶点着色器实现特定的动画。

Answer 1

光线投射发生在CPU上。如果要在 GPU 上替换顶点(通过顶点着色器)，光线投射无法正常工作，因为无法在交集测试中考虑转换后的顶点。

您现在有两个选择。在执行光线投射之前，您可以在 CPU 而不是 GPU 上应用转换。另一种选择是使用不同的方法，如GPU拾取，以检测与3D对象的交互。