THREE.js：将一个世界坐标单位转换为屏幕像素

Question

例如，我有一个单位立方体。如果没有缩放比例，我想获得一个由多少个屏幕像素表示的坐标单位。

当我放大时，那么这个坐标单位是由多少个屏幕像素表示的？

Answer 1

我不确定我是否理解您的问题，但是要获得两个三个向量之间的任何距离，您可以这样做：

const distanceAB = new THREE.Vector3(1,1,1).sub( new THREE.Vector3(2,2,2) ).length()

您的单位立方体将具有（-1，-1，-1）和（1，1，1）之类的顶点（或实际上为0.5）。无论哪种方式，您都需要获取这些值（使用THREE.Geometry比使用BufferGeometry更容易）。

然后您投影这些顶点

const vertexA = new THREE.Vector3() // set this from cube
const vertexB = new THREE.Vector3() 

const screenSpaceVector = new THREE.Vector3().subVectors(vertexA.project(myCamera),vertexB.project(myCamera))

现在的结果是一个叫做NDC的东西，它是一个从-1到1的立方体。要对其进行归一化：

screenSpaceVector.multiplyScalar(0.5).add(new THREE.Vector3(0.5,0.5,0.5))

最后找出这是多少像素

screenSpaceVector.x *= renderer.getSize().width
screenSpaceVector.y *= renderer.getSize().height
screenSpaceVector.z = 0

const pixelLength = screenSpaceVector.length()

我认为应该解决这个问题