Tengo una malla de tres js que quiero mover de lado a lado cuando muevo el mouse después de hacer clic en ella.
En la función mousemove aquí está mi código.
El problema con el que me encuentro es que si primero me muevo hacia la derecha y luego cambio de dirección, no comienza a moverse hacia la izquierda hasta que me acerco a mi posición x original donde hice clic con el mouse por primera vez.
let originx; onDocumentClick(evt) { originx = evt.pageX; document.addEventListener('mousemove', onMouseMove); } onMouseMove(evt) { let _newX = myMesh.position.x + (originx - evt.pageX); myMesh.position.set(_newX, myMesh.position.y, myMesh.position.z); }No está del todo claro el efecto que está tratando de lograr, así que voy a intentarlo en la oscuridad ... Si actualiza su respuesta con una descripción más precisa, hágamelo saber y actualizaré esta respuesta.
Creo que el mayor problema con su lógica es que está basando todo en MouseEvent.pageX . El sistema de coordenadas de esta propiedad comienza en 0 en el borde izquierdo y tiene un valor positivo en el borde derecho. Como tal, cuando mueve el mouse a cualquier lugar a la derecha de su punto de clic original, siempre tendrá un MouseEvent.pageX que es más grande que el MouseEvent.pageX del punto original, independientemente de la dirección en la que mueva el mouse. . Del mismo modo, pageX solo será más pequeño que el valor de pageX del punto de clic original mientras el cursor esté a la izquierda de ese punto de clic.
Creo que la propiedad que realmente estás buscando es MouseEvent.movementX . Esta propiedad describe solo el cambio de posición desde el último MouseEvent . También tiene en cuenta la dirección, por lo que un movimiento hacia la derecha producirá un valor positivo y un movimiento hacia la izquierda producirá un valor negativo.
Intente reemplazar pageX con movementX y vea si eso lo acerca más a lo que desea.