了解three.js中的定位系统答案

【问题标题】：understand positioning system in three.js了解three.js中的定位系统
【发布时间】：2020-08-14 22:08:00
【问题描述】：

我是 javascript 和 three.js 的新手，我正在尝试弄清楚如何在网页上获取 3d 位置。例如。我想在 (50,20,10) x,y,z 值处设置一个点光源。我怎么知道这个 x,y,z 值将出现在网页上的哪个位置？。我看过如下代码。

var light2 = new THREE.PointLight(0xffffff, 10)
    light2.position.set(500, 100, 0)
    scene.add(light2)

我已经用谷歌搜索了，但我没有得到足够的信息来正确地整理这些东西，有人可以帮我提供一个很好的解释或一些文章/教程链接吗？

【问题讨论】：

网页的范围是-1到1是什么意思？您不是在网页中放置灯光，而是将其放入将通过 WebGL 和画布呈现的 3D 世界。
@zero298 我在网上搜索了 3d 空间，它显示网页始终在 -1 到 1 的范围内。我真的不太了解，请您帮我了解一下网络中的 3d 空间吗？

标签： javascript html three.js

【解决方案1】：

先简单介绍一下背景...

3D 空间是无限的。
画布是进入该空间的视口。
页面上画布的大小与 3D 空间中的任何内容都没有直接关系。您可以将画布的大小加倍，它所做的只是使渲染的图像更大。

你的问题...

这并不是说您无法确定 3D 物体可能出现在画布上的哪个位置。您可以使用Vector3.project 将 3D 空间中的任何点投影到标准化设备坐标中。

var light2 = new THREE.PointLight(0xffffff, 10)
    light2.position.set(500, 100, 0)
    scene.add(light2)

// Where is it in NDC?
var ndc = new THREE.Vector3().copy( light2.position ).project( camera );

标准化设备坐标的范围从-1 到1，表示视口的标准化宽度和高度，(0,0) 位于渲染图像的中心。因此，您需要将它们从 NDC 转换为画布上的像素值。（另外，你可以忽略z 组件，因为屏幕没有深度。）

var canvasX = ( ndc.x + 1 ) * canvasWidth / 2;
var canvasY = ( ndc.y + 1 ) * canvasHeight / -2;

【讨论】：