zoukankan      html  css  js  c++  java
  • webgl之观察三维空间

      在之前的教程中,我们已经接触到了3d的基本应用,而这里,将会继续介绍两种不同的相机,即透视相机和正投影相机;还会学习设置相机的不同参数,这样就可以使场景以不同的角度显示出来。  

    一、正投影和透视投影概念

      在Three.js中,定义了两种相机,一种是THREE.OrthographicCamera正交相机,另外一种是THREE.PerspectiveCamera透视相机,两者都是继承自THREE.Camera。下面的图就是两种不同的相机:

      

      正投影和透视投影的一个重要区别透视投影有一个基本点,就是远处的物体比近处的物体小。在上面的图片中,我们也可以非常清楚地看出正投影从前之后的正方体大小都是相等的,而透视投影却不是这样,透视投影中靠前的正方体比较大,而靠后的正方体就比较小。 另外,比如我们在高中中学习的工程制图,将一个物体的正视图、左视图、俯视图画出,三者都是和原物呈相等的比例的,这就是一个正投影。

      但相比之下,正投影不如透视投影的表现真实,所以在THREE.js做3d效果时,我们常常使用的还是透视投影。

      

    二、正投影

      创建一个正投影相机,其构造函数如下所示:

    THREE.OrthographicCamera( left, right, top, bottom, near, far )

      即这里有6个期望的参数,我们通过下图来解释各个参数的含义:

      而介绍参数之前,我们可以认为相机的几何中心作为中心点,那么:

    • left参数:是左平面距离相机中心点的垂直距离
    • rigth参数:是右平面距离相机中心点的垂直距离。
    • top参数:是顶平面距离相机中心点的垂直距离。
    • bottom参数:是底平面距离相机中心点的垂直距离。
    • near参数:是近平面距离相机中心点的垂直距离。
    • far参数:是远平面距离相机中心点的垂直距离。

      如下:

    var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
    
    scene.add( camera );

      这样,我们将浏览器的宽度和高度作为了视景体额高度和宽度,相机刚好位于窗口的中心点上,这也是我们一般的设置方法,这样,就不需要设置position、up、lookAt等值了。

      

    三、透视投影相机

        创建一个透视投影相机,其构造函数如下所示:

    THREE.PerspectiveCamera(fov, aspect near, far)

      我们可以通过下面这张图来看其含义:

      

    • fov: 视角,即图中的theta角度,这个就是相机的打开的角度,如果用我们自己的眼睛类比,就是上下眼皮之间睁开的角度,比如在你面前有一个电脑,如果我们眼睛睁开的很小,如10%,那么这个电脑就会在你所有的视觉范围内,那么透视投影出来的物体就会非常大; 如果我们眼睛睁开的特别大,甚至达到了180度,那么相对于我们如此宽阔的视野,电脑的大小甚至可以忽略不计,所以透视投影出来的物体非常小;而我们正常眼睛睁开的角度大概是在45左右,这样,电脑的大小也就是正常的大小了。
    • aspect:纵横比,即宽度除以高度,这个值越大,说明宽度越大;这个值如果小于1,那么说明其高度较大,而宽度很窄。
    • near和far:这两个参数即相机中心距离近平面和远平面的距离。通过这两个值,就可以使得物体更加透视、立体了。

      如下所示,就是我们创建相机最为常用的:

    var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
    
    scene.add( camera );

      即fov视角为45,纵横比就是屏幕宽度除以高度,近平面距离相机中心的举例为1,而远平面举例相机中心的距离为1000。

      

      

    四、相机的posion、up、lookAt区别

      position我们认为是相机的中心点在三维坐标系中的位置, 而up可以看做一个空间矢量,即垂直于相机快门的矢量;而lookAt也是一个空间矢量,它是垂直于相机镜头的。所以,up矢量和lookAt矢量一定是互相垂直的,否则相机就变形了。

      

  • 相关阅读:
    使企点QQ来消息时不自动弹出窗口(以避免错过旧的消息和避免正在回复A时自动定位到B从而影响客服效率)
    8款开源聊天软件
    博客园设置皮肤(宽屏等)及选择文本编辑器
    Windows Server 2019 设置使用照片查看器查看图片
    使windows10重启后打开上次的文件夹和程序
    TinyMCE 5 富文本编辑器好
    wordpress 安装 Elementor PRO 插件(破解版)
    无法打印,提示“windows 打印后台处理程序 没有运行”的解决方案
    第一次将代码提交至git error: failed to push some refs to 'https://gitee.com/xxx/test.git'
    git本地和远程的关联问题
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/8892409.html
Copyright © 2011-2022 走看看