Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >说下three.js 中的相机

说下three.js 中的相机

作者头像
程序你好
发布于 2021-07-23 06:36:25
发布于 2021-07-23 06:36:25
1.6K00
代码可运行
举报
文章被收录于专栏:程序你好程序你好
运行总次数:0
代码可运行

所有的3D编程中都有一个避免不了的话题就是相机,相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式。而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机。

PerspectiveCamera(透视相机)

这种投影模式是被设计用来模拟人类眼睛观察事物的方式。这是3d渲染中最经常使用的投影模式。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
  • fov: 可视角度
  • aspect: 为width/height,通常设置为canvas元素的高宽比。
  • near: 近端距离
  • far: 远端距离

另一种常用的相机就是正交相机,

OrthographicCamera(正交相机)

使用这种投影模式,无论物体离照相机的距离是多少,物体的大小始终保持不变。这在渲染2d场景、UI元素以及其他场景是很有用的。一般说来,对于制图、建模软件通常使用正交投影,这样不会因为投影而改变物体比例。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
  • left: 视锥左侧面
  • right: 视锥右侧面
  • top: 视锥上侧面
  • bottom: 视锥下侧面
  • near: 近端距离
  • far: 远端距离

除了这两种常用的相机,还有一类特殊的相机

CubeCamera(立方体相机或全景相机)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
CubeCamera( near : Number, far : Number, cubeResolution : Number )
  • near: 近端距离
  • far: 远端距离
  • cubeResolution: 立方体的长度

其实全景相机就是前后左右上下六个方向都加上一个透视相机。

StereoCamera(3D相机)

双相机,被用于需要3d立体效果,视差栅栏的场景

其实本质就是左右两个透视相机。

程序你好

程序你好,代码改变世界。专注于分享.Net和Java开发心得、软件架构人工智能大数据物联网区块链技术、以及各种前端技术。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序你好 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
GAMES101作业1:旋转与投影
题目:给定三维下三个点 v0(2.0, 0.0, −2.0), v1(0.0, 2.0, −2.0), v2(−2.0, 0.0, −2.0),需要将这三个点的坐标变换为屏幕坐标并在屏幕上绘制出对应的线框三角形。
meteoric
2021/09/06
1.5K0
three.js中的重要基础概念
Three.js 是一个功能强大的 JavaScript 库,用于创建和展示基于 WebGL 的三维图形。在学习使用Three.js来构建3D世界之前,有一些基本概念是需要牢记的,否则,在你绘制3D世界时,思绪会是杂乱无章的:
fastmock
2025/04/26
880
​OpenGL 学习系列---投影矩阵
OpenGL 在观察空间转换到裁剪空间时,需要用到投影矩阵。而在着色器脚本中,也需要提供一个投影矩阵给对应的 u_ProjectionMatrix变量。
音视频开发进阶
2019/07/25
1.2K0
Three.js的入门案例(上)
在Three.js的赋能下,WEB网页效果逐渐丰富起来,今天我们就来运用之前学习的Three.js基础知识,实现一个旋转的几何体-球体。
前端达人
2021/03/16
6.2K0
Three.js的入门案例(上)
视锥体——初等几何解析
视锥体是当前3D行业最重要的透视模型,想要理解视锥,首先要区分透视和正交的区别。
Jean
2021/03/16
2K0
视锥体——初等几何解析
Three.js教程(4):相机
相机这部分的内容并不是很多,Three.js主要支持两种相机,一种是PerspectiveCamera即透视投影摄像机,另一种是OrthographicCamera即正交投影摄像机。两种相机都是继承自Camera对象,Camera对象又是继承自Object3D。
kai666666
2020/10/17
2.4K0
你的登录界面不够花里胡哨,3D 版本的来了
今天分享一篇用three.js 做的登录网站,里面还用到了粒子特效,一个字就是酷炫😎 前言: 该篇文章用到的主要技术:vue3、three.js 我们先看看成品效果: 登录gif 图 座机小图预览: login2.gif 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什么?「首先,要有一个立体的空间,其次是有光源,最重要的是要有一双眼睛」。下面我们就看看在three.js中如何创建一个3D世界吧! 创建一个场景 设置光源 创建相机,设置相机位置和相
程序员小猿
2021/11/23
1K0
基于 three.js 的 3D 粒子动效实现
粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器、脚本来控制其整体或单个的运动,模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库,three.js提供了丰富的API帮助我们去实现3D动效,本文主要介绍如何使用three.js实现粒子过渡效果,以及基本的鼠标交互操作。(注:本文使用的关于three.js的API都是基于版本r98的。)
个推
2019/04/08
7.1K0
基于 three.js 的 3D 粒子动效实现
Three.js - 走进3D的奇妙世界
随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的出现让3D应用开发更简单,本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
宜信技术学院
2019/11/27
10.4K0
Three.js世界中的三要素:场景、相机、渲染器
Three.js是一个基于WebGL的JavaScript库,它允许开发者在网页上创建和显示复杂的3D图形和动画,而无需用户安装任何额外的插件或软件。Three.js在Web开发中的地位非常重要,它通过提供简单直观的API,极大地降低了3D图形开发的门槛,使得开发者可以更专注于实现创意。Three.js广泛应用于游戏开发、虚拟现实、数据可视化、艺术创作等多个领域。
Front_Yue
2025/03/01
1940
Three.js世界中的三要素:场景、相机、渲染器
【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果
透视相机模拟的效果与人眼看到的景象最接近,在3D场景中也使用得最普遍,这种相机最大的特点就是近大远小,同样大小的物体离相机近的在画面上显得大,离相机远的物体在画面上显得小。 PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
一个会写诗的程序员
2020/01/15
4.6K0
【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果
第4章 三维空间的观察
在第一课里,我向您承诺过会对相机进行一些介绍,那么今天就是我履行诺言的时刻了。嘿,这一刻,有点激动,想到相机,大学时,一直想买一个单反,但是要1万多。工作后,当一个月的工资就能买一个单反时,内心充满了骄傲和自豪。所以,各位大大们,技术还是有用的,至少技术可以用来挣钱。
webvrmodel模型网
2023/01/11
9022
第4章 三维空间的观察
坐标系与矩阵(6)模型视图投影矩阵
模型视图投影矩阵,也就是常说的MVP,有很多的书和资料,参考资料中会列出我推荐的相关资料,会详细介绍推导过程。之所以还要写这一篇,是因为它比较重要,也为了保证‘坐标系与矩阵’系列文章的完整性。所以本篇主要是我对这块的理解,具体的公式推导尽可能不提。
Peter Lu
2021/07/20
1.1K0
坐标系与矩阵(6)模型视图投影矩阵
Three.js可视化企业实战WEBGL网-2024入门指南
Three.js 是一个功能强大的 JavaScript 库,用于在 Web 浏览器中创建和显示动画 3D 图形。它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块,包括场景、相机、几何体、材质、光源、渲染器和控制器等。
用户11130883
2024/05/31
2260
Computer Graphics note(2):视图变换&投影变换
Games101 lecture4-lecture5 考虑将三位物体转换二维图像需要的步骤,我们需要以下变换来达成目的, model transformation(模型(基础)变换–Object就位) view/camera transformation(视图变换–调整相机) projection transformation(投影变换–变换到[−1,1]3[-1,1]^3[−1,1]3,忽略深度信息zzz,变成[−1,1]2[-1,1]^2[−1,1]2) viewport transformation(视口变换–投影到屏幕空间) 如下图所示(Fundamentals of Computer Graphics (3rd Edition) 7.1 Viewing Transformations Figure 7.2):
Enterprise_
2020/08/02
5990
基于 Threejs 的 web 3D 开发入门
小时光
2017/10/26
15.5K4
基于 Threejs 的 web 3D 开发入门
提示
在THREEjs中,渲染一个3d世界的必要因素是场景(scene)、相机(camera)、渲染器(renderer)。渲染出一个3d世界后,可以往里面增加各种各样的物体、光源等,形成一个3d世界:
lhyt
2019/08/20
1.1K0
看完这篇,你也可以实现一个360度全景插件
本文从绘图基础开始讲起,详细介绍了如何使用 Three.js开发一个功能齐全的全景插件。
ConardLi
2019/05/23
9K0
3D 可视化入门:渲染管线原理与实践
玩 3D 游戏的时候,有没有想过这些 3D 物体是怎么渲染出来的?其中的动画是怎么做的?为什么会出现穿模、阴影不对、镜子照不出主角的情况?要想解答这些问题,就要了解实时渲染。其中最基础的,就是渲染管线。
Tecvan
2021/12/09
7K1
3D 可视化入门:渲染管线原理与实践
【笔记】《计算机图形学》(7)——观察
这系列的笔记来自著名的图形学虎书《Fundamentals of Computer Graphics》,这里我为了保证与最新的技术接轨看的是英文第五版,而没有选择第二版的中文翻译版本。不过在记笔记时多少也会参考一下中文版本
ZifengHuang
2020/08/10
2.2K0
【笔记】《计算机图形学》(7)——观察
相关推荐
GAMES101作业1:旋转与投影
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验