【ThreeJs】(2)照相机 | 正交投影照相机 | 透视投影照相机

简介: 【ThreeJs】(2)照相机 | 正交投影照相机 | 透视投影照相机


作者的课程,学习地址: https://www.lanqiao.cn/courses/3314


1、照相机:

使用Three.js创建的场景是三维的,但是通常情况下显示器是二维的,所以,三维场景如何显示在二维屏幕上呢?

照相机:定义了三维空间到二维屏幕的投影方式。

不同的投影方式,照相机又分为正交投影照相机与透视投影照相机。

1.1 正交投影与透视投影

  • 透视投影:使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果
  • 正交投影:使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果,对于在三维空间内平行的线,投影到二维空间中也一定是平行的
  • 一般说来,对于制图、建模软件通常使用正交投影,这样不会因为投影而改变物体比例;
  • 对于其他大多数应用,通常使用透视投影,因为这更接近人眼的观察效果;

1.2 正交投影照相机

构造函数:THREE.OrthographicCamera(left,right,top,bottom,near,far)

  • 6个参数分别代表正交投影照相机拍摄到的空间的6个面的位置,这两个面围成一个长方体,成为视景体,
  • 只有在视景体内部的物体才可能显示在屏幕上,而之外的物体会在显示前辈裁剪掉
    - 为了保证照相机的横竖比例,需要保证(right-left)与(top-bottom)的比例与Canvas宽度与高度的比例一致
  • near与far都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后面的物体,因此,这两个值应该均为正值
  • 为了保证场景中的物体不会因为太近或太远而被照相机忽略,一般near的值设置得较小,far值设置的较大,具体值应该视场景中物体的位置确定。

1.2.1 实例


相关文章
Threejs实现天空盒,全景场景,地面草地
Threejs实现天空盒,全景场景,地面草地
1278 0
Threejs实现天空盒,全景场景,地面草地
|
2月前
|
开发者
ThreeJs实现小球自由落体效果
这篇文章详细介绍了如何在Three.js中利用物理引擎Cannon.js实现小球自由落体效果,包括物理世界的创建、物体的添加及同步物理状态到三维场景中的具体实现。
55 3
ThreeJs实现小球自由落体效果
|
2月前
|
JavaScript
ThreeJs通过DragControls实现物体拖动
这篇文章详细讲解了如何在Three.js中使用DragControls实现3D物体的鼠标拖动功能。
116 1
ThreeJs通过DragControls实现物体拖动
|
2月前
ThreeJs给物体添加贴图
这篇文章详细说明了在Three.js中如何给3D物体添加贴图,并展示了实现局部贴图的技术和方法。
142 1
ThreeJs给物体添加贴图
|
2月前
|
人工智能 编解码 前端开发
深入了解 Three.js 中的材质与光照
Three.js 是一个强大的 JavaScript 库,用于在浏览器中创建和渲染 3D 场景。它的易用性和灵活性使得开发者能够轻松构建丰富的视觉体验。在 Three.js 中,材质与光照是影响物体外观和场景氛围的关键因素。本文将深入探讨 Three.js 中的材质类型、光源类型、光照模型,以及如何将它们结合以实现逼真的效果。
72 4
|
4月前
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
571 6
threejs做特效:实现物体的发光效果-EffectComposer详解!
|
4月前
|
图形学
小功能⭐️Unity中利用材质自发光实现物体闪烁效果
小功能⭐️Unity中利用材质自发光实现物体闪烁效果
|
7月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
59 2
|
计算机视觉 Python
OpenCV中绘制文字和运动的小球动画
要在OpenCV中绘制文字和运动的小球动画,可以使用以下方法: 1. 导入所需库:
145 8
|
JavaScript
html+css+js实现无缝隙跑马灯
html+css+js实现无缝隙跑马灯
181 0