Question

我正在尝试将一个HTML div元素放在一个three.js对象上。大多数stackoverflow解决方案提供类似于此的模式：

// var camera = ...

function toScreenXY(pos, canvas) {
  var width = canvas.width, height = canvas.height;

  var p = new THREE.Vector3(pos.x, pos.y, pos.z);
  var vector = p.project(camera);

  vector.x = (vector.x + 1) / 2 * width;
  vector.y = -(vector.y - 1) / 2 * height;

  return vector;
}

我已尝试过很多关于这个想法的变体，所有人都同意给我这个结果：

console.log(routeStart.position); // target mesh
console.log(toScreenXY(routeStart.position));

// output:
// 
// mesh pos: T…E.Vector3 {x: -200, y: 200, z: -100}
// screen pos: T…E.Vector3 {x: -985.2267639636993, y: -1444.7267503738403, z: 0.9801980328559876}

此摄像机位置和此网格位置的实际屏幕坐标位于x: 470, y: 80附近 - 我通过对div位置进行硬编码来确定它们。 -985, -1444甚至不接近实际的屏幕坐标：）

如果它们遵循与我提供的代码段相同的逻辑，请不要提供现有解决方案的链接。如果有人可以解释为什么我会得到这些负面价值，我会特别感激，即使这种方法似乎适用于其他所有人。

以下是使用相同原理的几个示例： Three.js: converting 3d position to 2d screen position Converting World coordinates to Screen coordinates in Three.js using Projection

Answer 1

现在，我自己已经找到了问题！事实证明，在调用renderer.render()之前，您无法预测事物。它让你回到奇怪的负面坐标是非常令人困惑的。希望其他人会觉得这个答案很有用。

从世界到屏幕投射一个点。 SO解决方案提供了不良坐标

1 个答案: