3

Dispongo de una animación 3D en la cual quiero detectar colisiones entre objetos, para ello he generado una pelota que haga contacto con los otros objetos, pero no se encuentra en la misma posición que el ratón.

Ejemplo funcional

Esta es la función conflictiva copiada de aquí pero no me ha funcionado.

// Follows the mouse event
function onMouseMove(event) {

    // Update the mouse variable
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

    // Make the sphere follow the mouse
    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
    vector.unproject(camera);
    var dir = vector.sub(camera.position).normalize();
    var distance = - camera.position.z / dir.z;
    var pos = camera.position.clone().add(dir.multiplyScalar(distance));
    sphereInter.position.copy(pos);

    // Make the sphere follow the mouse
    sphereInter.position.set(event.clientX, event.clientY, 0);
}

Como se puede ver la esfera no se desplaza a la misma posición del ratón

¿Cómo puedo solucionarlo?

1 respuesta 1

2

Hay que añadir el evento mousemove a renderer.domElement dentro de document y luego utilizar este código para calcular los componentes de mouse:

const rect = renderer.domElement.getBoundingClientRect();

mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.