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

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 .

一旦您正确理解了这个示例的作用，我建议您按如下方式更改场景:

1. 接BufferGeometry并将 position 属性分配给您想要作为起点的任何位置。
2. 向 BufferGeometry 添加一个新的自定义属性 customPosition，它将包含所有结束位置。
3. 在 ShaderMaterial 中声明一个 uniform范围从 0 - 1，这将是一个“ slider ”，控制动画在开始和结束位置之间。

设置几何属性和着色器制服后，您可以转到标记为 id="vertexshader" 的部分，然后可以使用 position 和 customPosition属性(记得在最上面加上attribute vec3 customPosition;，不然它不明白customPosition是什么意思!)

就这样，您将在 GLSL 中编写自己的自定义顶点着色器! GLSL 是 WebGL 用来与您的 GPU 通信的语言。

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