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

【问题标题】：Morphing a THREE.Points object over a period of time在一段时间内变形 THREE.Points 对象
【发布时间】：2017-08-02 18:15:12
【问题描述】：

我有一个 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 不支持它们。

【问题讨论】：

标签： three.js

【解决方案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 属性（记得在顶部添加attribute vec3 customPosition;，否则它不会理解customPosition 是什么意思！）。

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

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

【讨论】：

谢谢！这正是我想要的。