Question

我正在使用三个js动画，其中我的场景中有一个球体。当我将光标放在那个球体上时，我想让我的鼠标像手一样被改变。那我怎么能这样做呢？

我创建了一个像这样的球体。

sphere = new THREE.Mesh(
    new THREE.SphereBufferGeometry(0.8, 32, 32),
    new THREE.MeshPhongMaterial()
);
sphere.position.set(12.8, 0, 0);
sphere.name="Hello";

scene.add（球）;

Answer 1

为此，您可以使用THREE.Raycaster()和“mousemove”事件侦听器。

document.addEventListener("mousemove", onMouseMove, false);

var objects = [];
objects.push(sphere);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects;

function onMouseMove( event ) {
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    intersects = raycaster.intersectObjects( objects );
    if ( intersects.length > 0 ) {
        document.body.style.cursor = 'pointer'; // hand-like cursor
    } else {
        document.body.style.cursor = 'auto';
    };
};

jsfiddle示例

关于三js动画

1 个答案: