THREE.JS:获取物体相对于相机和物体在屏幕上的位置
问题描述:
我是3D编程的新手,我开始从WebGL和Three.JS一起探索3D世界。THREE.JS:获取物体相对于相机和物体在屏幕上的位置
我想预先确定物体的大小,同时改变camera.position.z和物体的“Z”位置。
例如: 我有一个立方体网格大小为100x100x100。
cube = new THREE.Mesh(
new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),
new THREE.MeshFaceMaterial()
);
并用的1.8311874
camera = new THREE.PerspectiveCamera(45, aspect_ratio, 1, 30000);
我想知道尺寸纵横比凸轮(2D宽度&高度)在屏幕上该立方体对象的情况下,
camera.position.z = 750;
cube.position.z = 500;
有什么方法可以找到它/预先确定它吗?
答
使用Three.js - Width of view中说明的公式,可以计算距相机给定距离的可见高度。
var vFOV = camera.fov * Math.PI/180; // convert vertical fov to radians
var height = 2 * Math.tan(vFOV/2) * dist; // visible height
在你的情况下,摄像机的FOV为45度,所以
vFOV = PI/4.
(注:在three.js所场的相机视FOV是垂直一个,而不是水平!一个)
从相机到立方体的正面(重要)之间的距离为750 - 500 - 50 = 200。因此,你的情况可见高度是
height = 2 * tan(PI/8) * 200 = 165.69.
由于立方体的正面是100×100,通过立方体代表的可见高度的比例是
fraction = 100/165.69 = 0.60.
所以,如果你知道像素的画布高度,则高度像素中的立方体是该值的0.60倍。
我提供的链接显示了如何计算可见宽度,因此如果需要,您可以以类似的方式进行计算。
感谢WestLangley,它的工作..非常感谢。 – 2013-03-11 06:14:07