AngryRED

Easier & Better

Three.js坐标转换

24 Jul 2018 » js

有些情况下,我们可能需要获取Three中物体在屏幕上显示的大小。

为了得到这个值,我们需要先理解以下内容:

  • 首先,Three中的物体是三维的,可以在空间范围内任意旋转。
  • 其次,随着物体的旋转,屏幕上显示的区域只是通过Camera投影过去的那部分。
        var positionOfCamera = camera.position;
        var positionOfMesh = mesh.position;

        // Mesh的大小,BBox
        var sizeOfMesh = getSize(mesh);
        // 计算相机到mesh表面的距离,注意:Z轴垂直与mesh表面。
        var dist = positionOfCamera.z - positionOfMesh.z - sizeOfMesh.z / 2;

        // convert vertical fov to radians
        var vFOV = THREE.Math.degToRad(camera.fov);

        // 计算高度
        var height = 2 * Math.tan(vFOV / 2) * dist;
        // 在Three中实际高度与投影高度的一个比值
        var fractionHeight = sizeOfMesh.y / height;
        // 屏幕上的实际高度
        var heightPixels = window.innerHeight * fractionHeight;

        // 计算宽度
        var width = height * camera.aspect;
        var fractionWidth = sizeOfMesh.x / width;
        //屏幕上的宽度
        var widthPixels = window.innerWidth * fractionWidth;

        // Mesh的中心点,BBox
        var center = getCenter(mesh);
        //将3D坐标转换到屏幕坐标
        var centerOnScreen = toScreenPosition(center);

完整示例

参考资料

Related Posts