【WebGL】3. 相机

相机的种类:WebGL中的相机有两种:正投影相机和透视相机

1. 正投影相机OrthographicCamera:类似于工程图纸中的视角,忽略远近距离,远近的物体比例不变,多用于科学研究,工程图纸的应用

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

left:左平面距离相机中心点的垂直距离。从图中可以看出,左平面是屏幕里面的那个平面。

right:右平面距离相机中心点的垂直距离。从图中可以看出,右平面是屏幕稍微外面一点的那个平面。

top:顶平面距离相机中心点的垂直距离。上图中的顶平面,是长方体头朝天的平面。

bottom:底平面距离相机中心点的垂直距离。底平面是头朝地的平面。

near:近平面距离相机中心点的垂直距离。近平面是左边竖着的那个平面。

far:远平面距离相机中心点的垂直距离。远平面是右边竖着的那个平面。

一般常见设置:

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

scene.add( camera );

2. 透视相机PerspectiveCamera:类似于真实世界中的相机,近的物体比例大,越远的物体比例越小

PerspectiveCamera( fov, aspect, near, far )

1、视角fov:眼睛睁开的角度,即,视角的 大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候,往往物体很小,因为他在你的整个可视区域中的比例变小了。

2、近平面near:表示你近处的裁面的距离。补充一下,也可以认为是眼睛距离近处的距离,假设为10米远,请不要设置为负值,Three.js就傻了,不知道怎么算了,

3、远平面far:表示你远处的裁面,

4、纵横比aspect:实际窗口的纵横比,即宽度除以高度。这个值越大,说明你宽度越大,那么你可能看的是宽银幕电影了,如果这个值小于1,那看到的就是竖起来的宽屏

场景设置:

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

?scene.add( camera );

时间: 2024-08-07 21:18:18

【WebGL】3. 相机的相关文章

WebGL简易教程(五):图形变换(模型、视图、投影变换)

目录 1. 概述 2. 详论 1) 模型变换 (1) 平移变换 (2) 缩放变换 (3) 旋转变换 (4) 组合变换 2) 视图变换 (1) 原理 (2) 推导 3) 投影变换 (1) 透视投影 (2) 正射投影 3. 综合运用 4. 参考 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值的坐标都是采用的默认0值,而一般的三维场景都是很复杂的三维坐标.为了在

WebGL/Three.js深度学习课程详解

课程介绍:适用于对WebGL.Three.js等3D技术感兴趣,却不知道如何入门的同学, 课程带领大家深入理解WebGL的原理. 课程目录:├─01-基础部分│      01-WebGL与three.js的基础.与opengl的关系.mp4│      02-编写第一个three.js程序.mp4│      03-three.js程序框架,绘制一条直线.mp4│      04-三维世界的组成(点.线).mp4│      05-坐标系的秘密(世界坐标.本地坐标).mp4│      06-

初学WebGL引擎-BabylonJS:第3篇-方向纹理与相机

[playground]-rotatuib abd scaling(方向) 源码 var createScene = function () { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI, Math.PI / 8, 150, BABYLON.Vector3.Zero(), scene); camera.attachControl(ca

webGL相机控制器

需要引入相机控制插件OrbitControls 1 <script type="text/javascript" src="framework/jquery.1.11.1.min.js"></script> 2 <script src="framework/three.js"></script> 3 <script src="framework/OrbitControls.js&qu

【WebGL入门3】相机参数及光照模型

透视相机:PerspectiveCamera( fov, aspect, near, far ) 1.视角fov:这个最难理解,我的理解是,眼睛睁开的角度,即,视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候,往往物体很小,因为他在你的整个可视区域中的比例变小了. 2.近平面near:这个呢,表示你近处的裁面的距离.补充一下,也可以认为是眼睛距离近处的距离,假设为10米远,请不要设置为负值,Three.js就傻了,不知道

如何在WebGL全景图上做标记

WebGL可以用来做3D效果的全景图呈现,例如故宫的全景图.但有时候我们不仅仅只是呈现全景图,还需要增加互动.故宫里边可以又分了很多区域,例如外朝中路.外朝西路.外朝东路等等.我们需要在3D图上做一些标记表示某个小的区域.当点击这个标记时,界面切换到对应标记区域的全景图.下图是实现此功能的一个小DEMO: 如何实现这样的功能?通过本篇的介绍,我们可以了解到以上交互过程的代码实现方式.这里我先提出几个问题 1).如何获取3D全景图某个地址的3D坐标? 2).如何将获取的地址的3D坐标转换为屏幕上的

【WebGL】2.基础概念

引入Three.js <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> </body> </html> 三大要素:场

图解 WebGL &amp; Three.js 工作原理

1.WebGL背后的工作原理是什么? 2.以Three.js为例,讲述框架在背后扮演什么样的角色? 我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题: 1.很多东西还是做不出来,甚至没有任何思路: 2.碰到bug无法解决,甚至没有方向: 3.性能出现问题,完全不知道如何去优化. 这个时候,我们需要了解更多. 1.什么是矩阵? 简单说来,矩阵用于坐标变换,如下图: 2.那它具体是怎么变换的呢,如下图: 3.举个实

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用.水务燃气 SCADA 监控应用及智能楼宇等应用场景. HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎,但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术,只需要掌握基本的 3D 坐标系和相机  Camera 的概念,剩下需要掌