Traducir las coorderadas del mouse a un plan 3D

Estoy construyendo algún tipo de aplicación de drag and drop en javascript / jquery (basado en DOM, no en canvas).

La idea es poder arrastrar divs en una escena 3D (un div rotado en 3D).

Funciona en un plan 2D, el problema es cuando giro la escena en 3D, la position de los objects no refleja la position real del mouse, sino las coorderadas traducidas en 3D

Ejemplo ilustrado: ejemplo

EJEMPLO EN JSFIDDLE

Quiero que los objects se muevan en relación con la position absoluta del mouse.

Calculo la position del mouse así:

document.addEventListener(gestureMove, function (event) { if (mouseDown == true) { event.preventDefault(); moveX = (event.pageX - $('#scene').offset().left); moveY = (event.pageY - $('#scene').offset().top); } #scene { width: 1000px; height: 1000px; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX( 35deg ); } 

Una solución inicial fue calcular la diferencia entre la position del mouse y el object en function de la position inicial, y agregarla a la position del object durante el arrastre. Funcionó, pero la animation fue realmente entrecortada y nada suave.

Estoy seguro de que hay una manera más simple de get las coorderadas del mouse relativas al plan 3D, pero no fue posible encontrar una solución real en este punto.

La mayoría de los resultados de búsqueda en esta materia apuntan a lenguajes orientados a juegos o preguntas canvas / webgl.

Algunas ideas ?

Gracias

One Solution collect form web for “Traducir las coorderadas del mouse a un plan 3D”

Suponiendo que la position del mouse es una position de pantalla absoluta, y desea tomar y deslizar un object en un plano 3D basado directamente en la position del mouse:

Puede representar su plano objective 3D como:

  • un punto de origen 3D O
  • dos vectores 3D U y V , que representan la dirección de los ejes U y V

Entonces, un punto 3D dado que corresponde a las coorderadas planas [u,v] es:

 point3d P = O + u*U + v*V 

Luego, puede combinar las operaciones que asignan este punto 3D particular a la pantalla; esto generalmente se describe con matrices de transformación 3D ModelMatrix , ViewMatrix y ProjectionMatrix , y una transformación de window determinada por un punto de origen de pantalla 2D origin_2d y un vector de escala 2D scale_2d . Para resolver el problema de una manera fácilmente invertible, promueva todo a coorderadas homogéneas, agregando un .w -coordinate a cada uno de ellos. Esta coorderada adicional actúa como un factor de escala: para recuperar las coorderadas cartesianas, debe dividir los valores .x y .y homogéneos por el valor .w :

 P_hom = [u, v, 1] * [Ux, Uy, Uz, 0] = [u, v, 1] * TexMatrix [Vx, Vy, Vz, 0] [Ox, Oy, Oz, 1] P_clip_hom = P_hom * ModelMatrix * ViewMatrix * ProjectionMatrix = P_hom * ModelViewProjectionMatrix screenpos_hom = P_clip_hom * [scale_2d.x 0 0] = P_clip_hom * PortMatrix [ 0 scale_2d.y 0] [ 0 0 0] [origin_2d.x origin_2d.y 1] So, screenpos_hom = [u, v, 1] * TexMatrix * ModelViewProjectionMatrix * PortMatrix = [u, v, 1] * TexToScreenMatrix -> [screenpos.x, screenpos.y] = [screenpos_hom.x, screenpos_hom.y] / screenpos_hom.w 

Tenga en count que TexToScreenMatrix es una matriz de 3×3; deberías poder invertirlo:

 UV_2d_hom = [screenpos.x, screenpos.y, 1] * (TexToScreenMatrix)^-1 -> [u, v] = [UV_2d_hom.x, UV_2d_hom.y] / UV_2d_hom.w 

Finalmente, puede usar las coorderadas [u,v] directamente, o puede usarlas para recrear el punto 3D P como se describe arriba.

  • Habilitando CORS en .ajax POST
  • ¿Cómo agregar parameters a la request ajax en Select2?
  • Envolver lists en columnas
  • ¿Cómo escribir el evento onshow usando javascript / jquery?
  • Encontrar elemento con índice z especificado
  • Guardo todo en un file externo .js. Pero no todas las funciones se usan en todas las páginas. ¿Esto afecta la velocidad?
  • Mixpanel track_links no funciona con elementos agregados dinámicamente
  • Permita que window.open abra una window nueva y no emergente
  • Pase la matriz al lado del cliente para visualizar
  • ¿Detección simple de colisión Javascript?
  • ¿Cómo se encuentran los siguientes elementos coincidentes cuando el set de elementos no siempre está dentro del mismo elemento primario?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.