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

从零开始学习3D可视化的相机投影方法

时间:2023-04-05 23:31:17 HTML5

我们看到的3D图像其实是三维空间中的物体,经过各种复杂的计算,从世界坐标系投影到屏幕坐标系,并显示在视口中.更简单的说,相当于用手机拍了一张照片,展示在橱窗里。生活中的物体都是三维的,但人的眼睛只能看到前面,看不到被挡住的后面。三维几何在人眼中的效果就像是相机拍摄的二维照片。您看到的是二维投影图。将空间几何转化为二维图像的过程就是投影,不同的投影方式意味着不同的投影尺寸算法。相机主要有两种投影方式,一种是正投影,一种是透视投影。下面简单介绍一下正射投影相机和透视投影。对于初学者,可以有个印象。所谓正交投影,物体相对于相机的距离对渲染结果没有影响,也就是说无论物体距离相机多远,渲染出来的尺寸都是一样的。这种类型的相机通常用于2D游戏。所以正交投影也叫平行投影。正射投影可以将场景中的所有物体通过平行光线投影到视平面上。在正交投影中,无论物体离眼睛多远,它都保持与原始物体相同的大小。所谓透视投影,这种相机的效果更接近真实世界。也就是说,物体离相机越远,它们将被渲染得越小。在ThingJS中,可以通过app.camera.porjectionType设置相机投影类型,参考脚本如下://perspectiveprojectionapp.camera.projectionType=THING.CameraProjectionType.Perspective;//正射投影app.camera.projectionType=THING.CameraProjectionType.Orthographic;如果您正在观察数字孪生可视化场景的外观,则相机位于场景之外。如果是室内漫游预览,将摄像头放在数字孪生可视化的房间3D模型内部。————————————————————数字孪生可视化:https://www.thingjs.com/