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

时间:2016-04-06 20:28:33

标签: javascript three.js vertices

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

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

但是,我希望能够在变形后访问顶点的新位置。如果您在链接示例中注意到,我正在显示多维数据集的第一个顶点的y坐标,并且它没有更新!

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

是否有可能获得新职位?我试过设置各种各样的旗帜并没有运气。

谢谢!

请注意这个例子只是出于问题的目的,它在我的实际项目中更复杂一些(我需要顶点数据!)。

1 个答案:

答案 0 :(得分:4)

变形在GPU上更新,而不是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