时间戳

首页 > 解决方案 > 了解three.js中的定位系统

javascript - 了解three.js中的定位系统

问题描述

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

标签： javascripthtmlthree.js

解决方案

先说一点背景...

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

对于你的问题...

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

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;

推荐阅读