Estoy buscando agregar un movimiento de modelo basado en la posición del mouse, así que estoy aprendiendo Raycaster. Lo único es que no tengo una excelente manera de visualizar a qué apunta el mouse. Suena tonto, pero estoy aprendiendo que Raycaster se puede compensar a través de CSS y luego se desata el infierno. Me gustaría tener un indicador de haz rojo para verificar que ThreeJS ve la posición de mi mouse como yo.

Mis esfuerzos: Lo mejor que he podido hacer es hacer que el evento mousedown pinte el indicador rojo (ver código): Progreso hasta ahora

El problema: no se actualiza automáticamente y no elimina los indicadores anteriores, por lo que hay muchas líneas rojas. Problema

¿Podrías ayudar a un novato? Estoy aprendiendo lentamente. :ligera_sonrisa:

 // Raycaster var Raycaster = new THREE.Raycaster(); var Mouse = new THREE.Vector2(); document.addEventListener( 'mousedown', function( event ) { Mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1; Mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1; Raycaster.setFromCamera( Mouse, camera ); var intersects = Raycaster.intersectObjects( scene.children ); if ( intersects.length > 0 ) { var arrow = new THREE.ArrowHelper( Raycaster.ray.direction, Raycaster.ray.origin, 8, 0xff0000 ); scene.add( arrow ); } }, false ); // Animation Loop function animate() { requestAnimationFrame(animate) controls.update() render() if (modelReady) mixer.update(clock.getDelta()) LEFT_Rotate.rotation.y += 0.01; RIGHT_Rotate.rotation.y += 0.01; }