Three.js의 {x, y} 위치에서 {newx, newy}까지 객체를 이동하는 방법

Question

X와 y는 객체의 좌표입니다. Z는 항상 0입니다. Three.js를 사용하여이 객체를 새 위치로 이동하려면 (다른 위치에서 표시되지 않는 가시적 인 이동 애니메이션으로) 어떻게 움직일 수 있습니까?

편집 : 객체 (메쉬)의 코드 예제

var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), new THREE.MeshBasicMaterial({img: THREE.ImageUtils.loadTexture('img.png')})) 
scene.add(mesh) 

편집 2 : 나는 mesh.position.x =이 newX 및 mesh.position.y = newy에 있지만 새로운 위치로 내 메쉬 점프를 할 수 있습니다 JQuery animate()처럼 매끄럽게 보이기를 원합니다.

Answer 1

모든 종류의 객체에 애니메이션을 적용하는 핵심은 크기가 작은이며, 높이가 이고 새로 고침 빈도가 일 때 움직이는 것입니다.

이것은 장면을 여러 번 렌더링하지만 프레임 당 조금씩 원하는 방향으로 오브젝트를 움직이는 것을 의미합니다.

var direction = new THREE.Vector3(0.3, 0.5, 0); // amount to move per frame 

function animate() { 
    object.position.add(direction); // add to position 

    renderer.render(camera, scene); // render new frame 

    requestAnimationFrame(animate); // keep looping 
} 

requestAnimationFrame(animate);