Three.js：使用变形目标获取更新后的顶点

Question

Three.js：使用变形目标获取更新后的顶点

3

我已经成功实现了一些变形目标：

请使用滑块控件查看变形效果: https://jsfiddle.net/3wtwzuh3/2/ 但是，我希望能够在变形后访问顶点的新位置。如果您注意到链接的示例中，我正在显示立方体第一个顶点的y坐标，但它并没有更新！

// This Y vertex doesn't seem to update!
   elInfo.innerHTML = geometry.vertices[0].y;

能否获取新的位置信息？我已经尝试设置各种标志，但没有成功。

谢谢！

请注意这个示例只是为了提问而存在，在我的实际项目中会更加复杂（因为我需要顶点数据！）。

- AlexKempton

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WestLangley · Accepted Answer

Morphs是在GPU上更新的，而不是CPU。因此，如果您想要知道新的顶点位置，您必须在CPU上执行与GPU相同的计算。

方法Mesh.raycast()必须在CPU上进行计算以进行射线投射，因此您可以将该代码作为示例参考。

以下是一个简单的模式，您可以遵循。您需要根据您的完整应用程序调整此模式，因为此模式已经硬编码以匹配您的简单fiddle。

var morphTargets = mesh.geometry.morphTargets;
var morphInfluences = mesh.morphTargetInfluences;

var vA = new THREE.Vector3();
var tempA = new THREE.Vector3();

var fvA = geometry.vertices[ 0 ]; // the vertex to transform

for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {

    var influence = morphInfluences[ t ];

    if ( influence === 0 ) continue;

    var targets = morphTargets[ t ].vertices;

    vA.addScaledVector( tempA.subVectors( targets[ 0 ], fvA ), influence ); // targets index must match vertex index

}

vA.add( fvA ); // the transformed value

fiddle: https://jsfiddle.net/3wtwzuh3/3/

three.js 版本号为 r.75。