我是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
{
}
}
我有一个鼠标相交的对象,但我不确定如何平移对象并在鼠标上恢复它,使其看起来很流畅。
已编辑
您需要将相交检查移出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;
}
这是一个代码笔。