6

我正在 javascript/jquery 中构建某种拖放应用程序（基于 DOM，而不是画布）。

这个想法是能够在 3D 场景中拖动 div（在 3D 中旋转的 div）。

它适用于 2D 计划，问题是当我在 3D 中旋转场景时，对象位置不反映实际鼠标位置，而是以 3D 转换的坐标

图解示例： 例子

JSFIDDLE 上的示例

我希望对象相对于鼠标的绝对位置移动。

我这样计算鼠标位置：

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 ); 
}

早期的解决方案是根据初始位置计算鼠标位置与对象之间的差异，并在拖动过程中将其添加到对象位置。它正在工作，但动画真的很不稳定，而且一点也不流畅。

我确信有一种更简单的方法可以获取相对于 3D 计划的鼠标坐标，但目前无法找到真正的解决方案。

关于这个主题的大多数搜索结果都指向面向游戏的语言，或 canvas/webgl 问题。

有任何想法吗 ？

谢谢

4

1 回答 1

2

假设您的鼠标位置是屏幕的绝对位置，并且您想直接根据鼠标位置在 3D 平面上抓取和滑动对象：

您可以将 3D 目标平面表示为：

  • 3D 原点O
  • 两个 3D 向量U和V，表示 U 轴和 V 轴的方向

那么，一个给定的与平面坐标对应的 3D 点[u,v]为：

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

然后，您可以组合将这个特定 3D 点映射到屏幕的操作；这通常用 3D 变换矩阵ModelMatrix、ViewMatrix和ProjectionMatrix以及由 2D 屏幕原点origin_2d和 2D 缩放矢量确定的视口变换来描述scale_2d。为了以一种容易逆转的方式解决问题，通过向.w每个坐标添加 - 坐标，将所有内容提升为齐次坐标。这个额外的坐标作为一个比例因子——要返回笛卡尔坐标，您需要将齐次.x和.y值除以.w值：

P_hom = [u, v, 1] * [U.x, U.y, U.z, 0] = [u, v, 1] * TexMatrix
                    [V.x, V.y, V.z, 0]
                    [O.x, O.y, O.z, 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

请注意，这TexToScreenMatrix是一个 3x3 矩阵；你应该能够反转它：

UV_2d_hom = [screenpos.x, screenpos.y, 1] * (TexToScreenMatrix)^-1

-> [u, v] = [UV_2d_hom.x, UV_2d_hom.y] / UV_2d_hom.w

最后，您可以[u,v]直接使用坐标，也可以使用它们重新创建 3D 点P，如上所述。

于 2012-09-19T22:40:55.203 回答