Threejsオブジェクト翻訳と復元

Question

私はThree.jsを初めて使用しています。私は複数のオブジェクトを持つcollada（.dae）ファイルを読み込んでいます。 これでマウスの上にあるときに各オブジェクトをz軸上で平行移動させ、マウスがそのオブジェクトを離れるときにその位置を復元したいと思います。

私はこの目的のために "Raycaster"を使用しています。

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

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

と機能が

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 
    { 

    } 

} 

である私は私のマウスが交差しているオブジェクトを持っているが、私は、オブジェクトを翻訳し、それが滑らかに見えるように、アウトマウスでそれを復元するかどうかはわかりません。

Answer 1

あなたのonDocumentMouseMoveのあなたの交差チェックを移動し、あなたのループを確認する必要があり

編集。 onDocumentMouseMoveは、移動が移動したときにのみ呼び出されますが、チェックはすべてのフレームで呼び出されます。

あなたのループには、次のものが含まれているはずです。

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

はここCodePenです。