Three.js 在一段时间内变形三点对象

我有一个三点物体，我正试图变形成另一个形状。如果仅将对象的几何体设置为新几何体，则顶点将自动更新到其新位置：

object.geometry=新的3.SphereGeometry（）

但是，我希望顶点“移动”到它们的新位置，而不是简单地立即出现在那里。我考虑使用Tweenjs为每个顶点创建一个新的tween。这似乎是可行的，但当您有数千个顶点要操作时，它实际上是滞后的：

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;
    }
}

函数变形（）{
var newGeom=新三种。球墨法（2.5,64,64）；
var curGeom=box.mesh.geometry；
var target顶点=newGeom.vertices；
变量曲率=curGeom.vertices；
var less=targetVertices.length对于（var i=0；i您正在经历延迟，因为每秒更新数千个顶点的位置60次会对您的CPU造成很大负担。您需要做的是将所有这些计算推迟到GPU，因为您的图形卡是用来处理每帧的大量计算的

我建议您看看，因为它执行与您尝试实现的功能类似的功能，没有延迟（除了不改变每个点的大小，而是改变它们的位置）

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

选择并将
position
属性指定给您想要的任何位置作为起点
将新的自定义属性
customPosition
添加到BufferGeometry，该属性将包含所有结束位置
在中声明一个范围为0-1的
统一
，它将是一个“滑块”，用于控制动画的起始位置和结束位置
设置几何体属性和着色器制服后，可以转到标记为
id=“vertexshader”
的部分，然后可以使用
位置
和
自定义位置
属性（请记住将
属性vec3 customPosition；
添加到顶部，否则它将无法理解
customPosition
的含义！）

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

我强烈建议您阅读，以便更深入地了解着色器。
谢谢！这正是我想要的。