根据标准化的相机位置，向上和方向旋转3D对象

Question

我在我们的网站上拥有显示3D模型的第三方工具。我必须构建一个cube来控制此3D查看器的相机。 像这样：

此多维数据集应根据查看者的相机旋转。 相机具有以下功能：

camera.getPosition()
camera.getDirection()
camera.getUp()

，返回的值如下：

camera.getPosition: {"x":-0.14815343916416168,"y":0.10964569449424744,"z":0.0968131348490715}
camera.getDirection: {"x":0.7116152048110962,"y":-0.5266535878181458,"z":-0.46501585841178894}
camera.getUp: {"x":0.38310256600379944,"y":0.8456945419311523,"z":-0.3715282082557678}

如何使用这些值计算立方体的旋转？ （如果可能）

Answer 1

我的解决方案最终是这样：

const pixel = new Buffer(
  "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
  "base64"
);

app.get('/*.gif', async (request, response) => {

  try {
    const { u } = request.query;
    const { name: id } = path.parse(request.path);

    if (!u) throw new Error("No user found");
    if (!id) throw new Error("No id found");

    response.setHeader( "Content-Type", "image/gif")
    response.setHeader( "Content-Length", pixel.length,)
    response.setHeader( "Cache-Control", "no-cache, no-store, must-revalidate")
    response.setHeader( "Content-Type", "image/gif")
    response.send(pixel);


  } catch (error) {
     response.status(400);
      return response.send(error);
  }
});

然后您可以旋转：

// http://www.fundza.com/vectors/normalize/index.html
const normalize = ({ x, y, z }) => {
  const length = Math.sqrt(x * x + y * y + z * z)
  return {
    x: x / length,
    y: y / length,
    z: z / length
  }
}

// https://mathjs.org/docs/reference/functions/cross.html
const cross = ({ x: a1, y: a2, z: a3 }, { x: b1, y: b2, z: b3 }) => ({
  x: a2 * b3 - a3 * b2,
  y: a3 * b1 - a1 * b3,
  z: a1 * b2 - a2 * b1
})

const calculateRotation = (direction, up) => {
  const right = normalize(cross(direction, up))

  const matrix = [[right.x, right.y, right.z], [direction.x, direction.y, direction.z], [up.x, up.y, up.z]]

  const angle = Math.acos((matrix[0][0] + matrix[1][1] + matrix[2][2] - 1) * 0.5)
  const axis = (() => {
    const k = Math.sqrt(
      Math.pow(matrix[2][1] - matrix[1][2], 2) +
      Math.pow(matrix[0][2] - matrix[2][0], 2) +
      Math.pow(matrix[1][0] - matrix[0][1], 2)
    )

    return {
      x: (matrix[2][1] - matrix[1][2]) / k,
      y: (matrix[0][2] - matrix[2][0]) / k,
      z: (matrix[1][0] - matrix[0][1]) / k
    }
  })()

  return { angle, axis }
}

我还必须旋转相机，在其他情况下可能是可选的：

cubeGroup.setRotationFromAxisAngle(rotation.axis, rotation.angle)