如何从一个网格过渡到另一个

how to make a transition from one mesh to another?

本文关键字:一个 网格 过渡到 另一个      更新时间:2023-09-26

我有mes1和mes2。每个都有挤压

mesh1 ->100 vertices
mesh2 ->200 vertices

在我的代码中,我做了以下操作:

mesh1.geometry.verticesNeedUpdate = true;
mesh1 = Mesh2;
mesh1.geometry.computeBoundingBox ();

,所以我设法更新了mes1(这在我的原始代码中有效),但我不希望您看到任何突然的变化。我想要一个动画,而网格1变成几何网格2。

我一直使用库tween.js。例如:

 new TWEEN.Tween (mesh1.scale) .to ({x: 1, and 1, z 1}, 1000) .start ();

但是我不知道在这种情况下如何做动画。通过过渡或动画,您可以实时看到mes2到mes1顶点的变化。我不想表现出任何突然的变化。

您可以使用morphTarget。你有一组相同长度的顶点,但位置不同。然后设置morphTargetInfluences以实现从一组顶点到另一组顶点的过渡。

这是来自Threejs Geometry文档

.morphTargets
Array of morph targets. Each morph target is a Javascript object:
{ name: "targetName", vertices: [ new THREE.Vector3(), ... ] } Morph vertices match number and order of primary vertices.

这是一个很好的例子。查看它的源代码,以便更好地理解。