美文网首页前端学习记录
Three.js与计算机图形学(三)

Three.js与计算机图形学(三)

作者: 无言以越 | 来源:发表于2019-07-18 09:04 被阅读0次

Three.js中的3d场景(scene)为无限大的,我们当然不可能去获取无限大的信息,在Three.js中封装了一个相机(Camera)的概念,它作为场景的观察者,获取有限的指定参数范围内的信息。

相机分为两种:

    1. [endif]正投影相机(THREE.OrthographicCamera)

    2. [endif]透视相机(THREE.PerspectiveCamera)

上图是正投影相机的取景范围,相机只会取立方体场景以内的信息,以外的不会抓取的,正投影的相机的特点是视线都是平行的,同样绝对大小的物体不会因为距离的远近而投影的大小不一,常用于工程建模。

上图是透视相机的取景范围,同样相机只会抓取立方体以内场景的信息,透视相机的特点的所有的视线都会相较于相机所在的位置,所以它会有远小近大的特点,类似真实世界的投影成像。

不管是正投影相机还是透视相近都继承于相机类,所以相机类中包含着一些两者公有的属性,想要获取一块需求的场景并通过一定的投影规则成像在浏览器上就必须有如下信息:

    1. [endif]相机的位置(position),首先相机的位置决定观察者所处于的位置。

    2. [endif]相机的视点(lookAt),相机的位置确定后,视点就决定了相机观察的方向,position与lookAt的连线的矢量是视线的正方面。

    3. [endif]实例化相机时的参数,参数决定近平面远平面夹角之类的信息,至此就可以在场景Scene中通过相机的位置(position),视点(lookAt)和实例化参数确定一块空间,并获取信息。

    4. [endif]相机的上方向(up),空间是没有上下左右,甚至东南西北的概念的,当我们获取了一块空间时,需要去定义空间的哪个方向为上才能成功的投影在浏览器上。

相关文章

  • Three.js与计算机图形学(三)

    Three.js中的3d场景(scene)为无限大的,我们当然不可能去获取无限大的信息,在Three.js中封装了...

  • 《计算机图形学》.pdf

    【下载地址】 《计算机图形学》与大多数传统的计算机图形学教材不同,它仅简要介绍交互式计算机图形学方面的基本知识,主...

  • Three.js与计算机图形学

    其实最开始接触3d我是惶恐,觉得3d这么高大上的东西,一点思路都没有,但计算机之所以是们一门伟大的产品就在于可以站...

  • 计算机图形学基础重点

    计算机图形学基础重点 计算机图形学的定义:  计算机图形学(CG)是研究怎样利用计算机来显示、生成和处理图形的原理...

  • OpenGL:三维数学基础坐标系、向量、矩阵

    一、计算机图形学 计算机图形学(Computer Graphics)是一种使用数学算法将二维或三维图形转化为计算机...

  • Three.js与计算机图形学(二)

    Three.js较人性化的为我们封装了易于理解的3d对象(相机,场景,光源等等),这有助于我们初窥3d的计算机世界...

  • 计算机图形学

    计算机图形学

    介绍 计算机图形学(Computer Graphics,...

  • 计算机图形学——001概论

    001.概论 内容:计算机图形学的概念、发展历程和应用 001.1 计算机图形学的研究内容 什么是计算机图形学(C...

  • webgl 1.开始

    是先学习计算机图形学还是先学习 OpenGL ?我建议先熟悉 OpenGL, 大体了解图形学编程。计算机图形学偏底...

  • CG006读《什么是计算机图形学》

    一 什么是计算机图形学 计算机图形学(computer Graphics) 是研究计算机世界中图形的学问。 二 计...

网友评论

    本文标题:Three.js与计算机图形学(三)

    本文链接:https://www.haomeiwen.com/subject/ngcklctx.html