当前位置: 首页 > Web前端 > HTML

THREEJS将组件缩放到视野的方法

时间:2023-03-28 18:02:29 HTML

概述仅将一个物体缩放到整个屏幕是一个非常常见的应用场景,这与相机的视野有关,需要单独说明一个透视相机和正交相机。透视相机首先假设物体被相机的视野所覆盖。如下图,首先要知道物体所在的包围球体的半径r,然后才知道摄像机的角度,即camera.fov。从球体中心到相机的距离s。s=r/sin(fov)用代码表示就是constdir=newTHREE.Vector3(0,1,0);//方向constdist=Math.abs(sphere.radius/Math.sin(((fov/360)*Math.PI)/2));consttemp=newTHREE.Vector3();temp.addVectors(sphere.center,dir.multiplyScalar(dist));同样,除了位置和旋转之外,使用左上右下指定视野更容易理解。对于长方形屏幕的计算机,这种缩放会恰到好处(精度高,透视相机因为使用boundingsphere其实不是很准确)。constleft=-(boundingBox.max.x-boundingBox.min.x)/2;constright=(boundingBox.max.x-boundingBox.min.x)/2;consttop=(boundingBox.max.z-boundingBox.min.z)/2;constbottom=-(boundingBox.max.z-boundingBox.min.z)/2;constcamera=newTHREE.OrthographicCamera(左,右),顶部,底部,1,1000);相机.lookAt(newTHREE.Vector3(0,-100,0));用途:制作小地图