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

【问题标题】：Three.js: Get updated vertices with morph targetsThree.js：使用变形目标获取更新的顶点
【发布时间】：2016-04-06 20:28:32
【问题描述】：

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

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

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

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

是否有可能获得新职位？我试过设置各种标志，但都没有运气。

谢谢！

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

【问题讨论】：

标签： javascript three.js vertices

【解决方案1】：

变形在 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

【讨论】：

正是我需要知道的。非常感谢，这工作得很好！
@AlexKempton 这适用于顶点。可以说我在其中一个面上有一个网格。如何计算变形时移动网格的距离？你可以在这里看到它jsfiddle.net/rt9ye5fq/12。即使在变形时，我也希望红框始终出现在我的脸上