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.

  • ¿Cómo se asegura de que exista el video Vimeo?
  • Twitter Bootstrap Tooltip selector de datos?
  • ¿Cómo usa Jquery el signo de dólar?
  • Contenido de iframe que no se carga en firefox
  • ¿Cuál es la diferencia entre JSON y AJAX con jQuery?
  • Precarga de files de video: reproducción HTML5
  • Obteniendo remitente en jQuery
  • Análisis XML JQuery Ajax Response con Namespace
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.