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

Three.js: Get updated vertices with morph targets

本文关键字：获取 更新 顶点 目标 变形 js Three      更新时间：2024-01-31

我有一些变形目标在工作：

https://jsfiddle.net/3wtwzuh3/2/（使用滑块控件查看变形）

但是，我希望能够在变形后访问顶点的新位置。如果你在链接的例子中注意到，我显示的是立方体第一个顶点的y坐标，它没有更新！

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

有可能得到新职位吗？我试过设置各种各样的标志，但没有成功。

谢谢！

请注意，这个例子只是为了解决这个问题，它在我的实际项目中有点复杂（我需要顶点数据！）

变形是在GPU上更新的，而不是在CPU上。因此，如果你想知道新的顶点位置，你必须在CPU上进行与GPU相同的计算。

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

这里有一个简单的模式，您可以遵循。您必须针对您的整个应用程序进行调整，因为这种模式是硬连接的，以匹配您的简单小提琴。

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

小提琴：https://jsfiddle.net/3wtwzuh3/3/

three.js r.75

相关文章：