Objet Threejs Traduire et restaurer

Question

Je suis nouveau sur Three.js. J'ai chargé un fichier collada (.dae) ayant plusieurs objets. Maintenant, je veux traduire chaque objet sur son axe z en passant la souris et restaurer sa position lorsque la souris a quitté cet objet. J'utilise "Raycaster" à cette fin.

document.addEventListener('mousemove', onDocumentMouseMove, false); 

raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 
mouse = new THREE.Vector2(); 

et la fonction est

function onDocumentMouseMove (event) { 

    event.preventDefault(); 
    mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
    mouse.y = - (event.clientY/renderer.domElement.clientHeight) * 2 + 1; 

    raycaster.setFromCamera(mouse, camera); 

    // console.log(scene); 
    var intersect = raycaster.intersectObjects(scene.children[2].children); 
    // console.log(intersect); 
    if (intersect.length > 0) 
    { 

    } 
    else 
    { 

    } 

} 

Je l'objet où ma souris est intersecte mais je ne suis pas sûr de savoir comment traduire l'objet et le restaurer sur la souris de telle sorte qu'il semble lisse.

Answer 1

Edité

Vous devez déplacer votre chèque Intersection de votre onDocumentMouseMove et vérifier votre boucle. onDocumentMouseMove ne sera appelée que lorsque vos mouvements seront en mouvement, mais la vérification sera appelée à chaque image.

Votre boucle devrait ressembler contenir les éléments suivants:

raycaster.setFromCamera(mouse, camera); 
var intersect = raycaster.intersectObjects(scene.children); 

if (intersect.length > 0) { 
    intersect[0].object.translateZ(1); 
} else { 
    // For all of your objects: 
    cube.position.z = 0; 
} 

est ici un CodePen.