Question

我有一个THREE.Points对象，我正在尝试变形为另一种形状。如果我只是将对象的几何设置为新几何，顶点将自动更新到新位置：

object.geometry = new THREE.SphereGeometry（）;

但是，我希望顶点“移动”到新的位置而不是简单地立即出现在那里。我考虑过使用Tweenjs为每个顶点创建一个新的补间。这似乎有效，但是当你有数千个顶点需要操作时，它真的很滞后：

function morph(){
    var newGeom = new THREE.SphereGeometry(2.5, 64, 64);
    var curGeom = box.mesh.geometry;

    var targetVertices = newGeom.vertices;
    var curVertices = curGeom.vertices;
    var less = targetVertices.length < curVertices.length ?targetVertices : curVertices;

    var tween;
    var cur, target;
    for (var i=0; i<curVertices.length; i++){
        cur = curVertices[i];
        target = targetVertices[i];

        tween = new TWEEN.Tween(cur).to(target, 1000);
        tween.start();
        box.mesh.geometry.verticesNeedUpdate = true;
    }
}

有没有人有更好的解决方案？我也尝试过使用变形目标，但我不认为THREE.Points支持它们。

Answer 1

你遇到了延迟，因为每秒60次更新数千个顶点的位置对你的CPU来说非常沉重。您需要做的是将所有这些计算推迟到GPU，因为您的图形卡制作以处理每帧的大量计算。

我建议你看看this example，因为它执行的功能类似于你想要实现的功能，没有延迟（除了改变每个点的大小，你将改变他们的位置）。 Here is the source code you should read carefully

一旦您对此示例的作用有了正确的理解，我建议您按如下方式更改场景：

选择BufferGeometry并将position属性分配到您想要的任何位置作为起点。
向BufferGeometry添加一个新的自定义属性customPosition，它将具有所有结束位置。
在ShaderMaterial中声明uniform范围为0 - 1，这将是一个“滑块”，用于控制起始位置和结束位置之间的动画。

设置几何属性和着色器制服后，您可以转到标有id="vertexshader"的部分，然后您可以使用position和customPosition属性（请记住添加{ {1}}到顶部，否则它将无法理解attribute vec3 customPosition;的含义！）。

就像那样，你将在GLSL中编写自己的自定义顶点着色器！ GLSL是WebGL用于与GPU通信的语言。

我强烈建议您阅读http://thebookofshaders.com/以更深入地了解着色器。

在一段时间内变形THREE.Points对象

1 个答案: