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回调会覆盖第一个回复只需将代码添加到一个回调中即可。

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

使用补间和three.js无法实现多个动画

1 个答案: