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 콜백이 첫 번째를 재정의하기 때문입니다.
코드를 하나의 콜백에 추가하기 만하면됩니다.

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