如何解决了解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)
解决方法
先来一点背景...
- 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。