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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Three.js世界中的三要素:场景、相机、渲染器
Three.js是一个基于WebGL的JavaScript库,它允许开发者在网页上创建和显示复杂的3D图形和动画,而无需用户安装任何额外的插件或软件。Three.js在Web开发中的地位非常重要,它通过提供简单直观的API,极大地降低了3D图形开发的门槛,使得开发者可以更专注于实现创意。Three.js广泛应用于游戏开发、虚拟现实、数据可视化、艺术创作等多个领域。
Front_Yue
2025/03/01
2750
Three.js世界中的三要素:场景、相机、渲染器
Three.js - 走进3D的奇妙世界
随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的出现让3D应用开发更简单,本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
宜信技术学院
2019/11/27
10.6K0
three.js 相机
图形学中的相机定义了三维空间到二维屏幕的投影方式,根据投影方式的不同,相机可分为 正交投影相机 与 透视投影相机。
用户2434869
2018/09/12
6.9K0
three.js 相机
Three.js教程(4):相机
相机这部分的内容并不是很多,Three.js主要支持两种相机,一种是PerspectiveCamera即透视投影摄像机,另一种是OrthographicCamera即正交投影摄像机。两种相机都是继承自Camera对象,Camera对象又是继承自Object3D。
kai666666
2020/10/17
2.4K0
通过漫天花雨来入门 Three.js
随着元宇宙概念的火爆,3D 渲染相关的技术频繁被提及,而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架, 是入门 3D 的不错的抓手,今天我们就来入门下 Three.js。
神说要有光zxg
2021/11/25
2.5K0
通过漫天花雨来入门 Three.js
基于 Threejs 的 web 3D 开发入门
小时光
2017/10/26
15.5K4
基于 Threejs 的 web 3D 开发入门
基于 three.js 的 3D 粒子动效实现
粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器、脚本来控制其整体或单个的运动,模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库,three.js提供了丰富的API帮助我们去实现3D动效,本文主要介绍如何使用three.js实现粒子过渡效果,以及基本的鼠标交互操作。(注:本文使用的关于three.js的API都是基于版本r98的。)
个推
2019/04/08
7.2K0
基于 three.js 的 3D 粒子动效实现
看完这篇,你也可以实现一个360度全景插件
本文从绘图基础开始讲起,详细介绍了如何使用 Three.js开发一个功能齐全的全景插件。
ConardLi
2019/05/23
9K0
Three.js深入浅出:2-创建三维场景和物体
以上demo总结来说,使用了 Three.js 库创建了一个简单的绿色立方体模型,并实现了旋转动画效果。 总结一下它的步骤:
用户6297767
2023/11/21
8330
Three.js深入浅出:2-创建三维场景和物体
Three.js的入门案例(上)
在Three.js的赋能下,WEB网页效果逐渐丰富起来,今天我们就来运用之前学习的Three.js基础知识,实现一个旋转的几何体-球体。
前端达人
2021/03/16
6.3K0
Three.js的入门案例(上)
第4章 三维空间的观察
在第一课里,我向您承诺过会对相机进行一些介绍,那么今天就是我履行诺言的时刻了。嘿,这一刻,有点激动,想到相机,大学时,一直想买一个单反,但是要1万多。工作后,当一个月的工资就能买一个单反时,内心充满了骄傲和自豪。所以,各位大大们,技术还是有用的,至少技术可以用来挣钱。
webvrmodel模型网
2023/01/11
9152
第4章 三维空间的观察
变换(Transform)(2)-坐标空间变换
在刚接触图形学,看games101课程时,观察变换与投影变换就给我了相当大的麻烦,同样的(l, r, t, b, n, f)参数,网上每个人给出来的矩阵形式有所不同,让我永远分不清。随着学习资源的丰富以及自己稍微有了些成长,这篇文章终于解决了这个困惑。
Zero Two
2024/08/24
2220
终端图像处理系列 - OpenGL ES 2.0 - 3D基础(矩阵投影)
Overview 移动设备的屏幕是二维平面,要想把一个三维场景渲染在手机二维屏幕上,需要利用OpenGL中的矩阵投射,将三维空间中的点映射到二维平面上。三维矩阵的相关知识是学习OpenGL最重要的课程之一。 线性代数 学习OpenGL三维投射知识之前,我们得事先了解下一些基础的线性代数知识,如向量运算,矩阵运算。 向量运算 向量: 指一个同时具有大小和方向的几何对象,因常常以箭头符号表示以区别于其它量而得名。 向量加减 向量的加(减)法定义是分量的相加(减),即将一个向量中的每一个分量加上(减去)另一个向量
天天P图攻城狮
2018/02/02
2.6K0
终端图像处理系列 - OpenGL ES 2.0 - 3D基础(矩阵投影)
​OpenGL 学习系列---投影矩阵
OpenGL 在观察空间转换到裁剪空间时,需要用到投影矩阵。而在着色器脚本中,也需要提供一个投影矩阵给对应的 u_ProjectionMatrix变量。
音视频开发进阶
2019/07/25
1.2K0
你的登录界面不够花里胡哨,3D 版本的来了
今天分享一篇用three.js 做的登录网站,里面还用到了粒子特效,一个字就是酷炫😎 前言: 该篇文章用到的主要技术:vue3、three.js 我们先看看成品效果: 登录gif 图 座机小图预览: login2.gif 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什么?「首先,要有一个立体的空间,其次是有光源,最重要的是要有一双眼睛」。下面我们就看看在three.js中如何创建一个3D世界吧! 创建一个场景 设置光源 创建相机,设置相机位置和相
程序员小猿
2021/11/23
1.1K0
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.6K0
打造H5里的“3D全景漫游”秘籍 - 腾讯ISUX
近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。 QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连
腾讯ISUX
2018/06/29
6.1K0
【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果
透视相机模拟的效果与人眼看到的景象最接近,在3D场景中也使用得最普遍,这种相机最大的特点就是近大远小,同样大小的物体离相机近的在画面上显得大,离相机远的物体在画面上显得小。 PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
一个会写诗的程序员
2020/01/15
4.6K0
【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果
坐标系与矩阵(6)模型视图投影矩阵
模型视图投影矩阵,也就是常说的MVP,有很多的书和资料,参考资料中会列出我推荐的相关资料,会详细介绍推导过程。之所以还要写这一篇,是因为它比较重要,也为了保证‘坐标系与矩阵’系列文章的完整性。所以本篇主要是我对这块的理解,具体的公式推导尽可能不提。
Peter Lu
2021/07/20
1.1K0
坐标系与矩阵(6)模型视图投影矩阵
视锥体——初等几何解析
视锥体是当前3D行业最重要的透视模型,想要理解视锥,首先要区分透视和正交的区别。
Jean
2021/03/16
2K0
视锥体——初等几何解析
相关推荐
Three.js世界中的三要素:场景、相机、渲染器
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验