tween 和 three.js 不能制作多个动画

Question

我尝试使用 three.js 和 tween.js 为一个圆制作动画，但现在我无法为一个以上的圆制作动画，只有最近添加的圆才具有动画效果。我在这里的代码中遗漏了什么？请告诉我如何一个接一个地称呼这些圈子。

var circle = createMesh(new THREE.CircleGeometry(6, 30, 1.9 * Math.PI, 1.9 * Math.PI));
        // used the function here
        scene.add(circle);

var circle1 = createMesh(new THREE.CircleGeometry(2, 10, 1.9 * Math.PI, 1.9 * Math.PI));

        scene.add(circle1);


var position = { x : 0, y: 0 };
        var target = { x : -10, y: 0 };
        var tween = new TWEEN.Tween(position).to(target, 3000);

tween.start();
            render();
            tween.easing(TWEEN.Easing.Elastic.InOut)
tween.onUpdate(function(){
    circle.position.x = position.x;
    circle.position.y = position.y;
});
tween.onUpdate(function(){
    circle1.position.x = position.x;
    circle1.position.y = position.y;
});

function render(time) {
            stats.update();
            circle.rotation.z = step += 0.008;


              requestAnimationFrame(render);


            TWEEN.update(time);
            webGLRenderer.clear();
            webGLRenderer.render(scene, camera);


        }

Answer 1

因为第二个 tween.onUpdate 回调 os 覆盖了第一个。
只需将代码添加到一个回调。

tween.start();
render();
tween.easing(TWEEN.Easing.Elastic.InOut)
tween.onUpdate(function(){
    circle.position.x = position.x;
    circle.position.y = position.y;
    circle1.position.x = position.x;
    circle1.position.y = position.y;
});

tween 和 three.js 不能制作多个动画

more than one animation is not possible with tween and three.js

three.js

tween.js