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。

Threejs对象翻译和恢复

1 个答案: