Three.js相机对象(正投影OrthographicCamera、透视投影PerspectiveCamera)

最新推荐文章于 2024-01-19 15:51:08 发布
最新推荐文章于 2024-01-19 15:51:08 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 小游戏开发 文章标签： three.js 透视投影 3D游戏 正投影 小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44588191/article/details/102784987
版权

Three.js相机对象(正投影OrthographicCamera、透视投影PerspectiveCamera)

Three.js相机对象(正投影OrthographicCamera、透视投影PerspectiveCamera)，针对不同应用的三维场景需要使用不同的投影方式，比如机械、工业设计领域常常采用正投影(平行投影), 游戏场景往往采用透视投影(中心投影)。为了完成三维场景不同的投影方式，three.js封装WebGL API和相关算法，提供了正投影OrthographicCamera、透视投影PerspectiveCamera等相机对象。

1、正投影和透视投影简单解释

下面对正投影相机和透视投影相机的投影算法进行简单介绍，对于初学者你有一个印象就可以，如果想深入了解，可以学习图形学或者阅读threejs官方源码src目录下文件OrthographicCamera.js和PerspectiveCamera.js

生活中的物体都是三维的，但是人的眼睛只能看到正面，不能看到被遮挡的背面，三维几何体在人眼睛中的效果就像一张相机拍摄的二维照片，你看到的是一个2D的投影图。 空间几何体转化为一个二维图的过程就是投影，不同的投影方式意味着投影尺寸不同的算法。

在这里插入图片描述
生活中的物体都是三维的，但是人的眼睛只能看到正面，不能看到被遮挡的背面，三维几何体在人眼睛中的效果就像一张相机拍摄的二维照片，你看到的是一个2D的投影图。 空间几何体转化为一个二维图的过程就是投影，不同的投影方式意味着不同的

最低0.47元/天 解锁文章
芒种的农民
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
three.js正投影相机OrthographicCamera使用DEMO
05-19
正投影相机（OrthographicCamera）与我们常见的透视投影相机（PerspectiveCamera）不同。透视投影模拟了人眼对远近物体大小差异的感知，而正投影则保持物体在各个方向上的尺寸不变，无论它们离相机多远或近，这在...
three.js从入门到精通系列教程004 - three.js透视相机（PerspectiveCamera）滚动浏览全景大图
最新发布
01-19
three.js从入门到精通系列教程004 - three.js透视相机（PerspectiveCamera）滚动浏览全景大图 //定义相机、场景、渲染器 var myCamera, myScene, myRenderer; var lon = 0, lat = 0, phi = 0, theta = 0; //创建...
three.js OrthographicCamera（正交相机附带demo） - 03
刘毅鹏的博客
11-25 3694
文章目录一、什么是正交投影相机1.属性介绍2.代码示例二、demo三、demo效果（`所有物体大小不以物体距离摄像机远近来改变`） 一、什么是正交投影相机 正交摄像机与透视投影摄像机最大的区别就是物体的大小不随物体距离影响，透视投影相机请看我上篇文章 three.js PerspectiveCamera（透视投影相机） - 02，然而正交投影摄像机无论物体距离摄像机多远，你所看到的物体大小都是1比1还原。 1.属性介绍 属性 描述 left 摄像机视锥体左侧面 right 摄像机视锥
Three.js第三章——透视投影相机
00后的程序员
12-21 1428
生活中用相机拍照，你相机位置不同，拍照结果也不同，threejs中虚拟相机同样如此。比如有一间房子，你拿着相机站在房间里面，看到的是房间内部，站在房子外面看到的是房子外面效果。想象为一个房间，然后根据相机位置和长方体位置尺寸对比，判断两者相对位置。你可以发现设置相机坐标(200, 200, 200)，位于长方体外面一处位置。，具体说相机镜头对准哪个物体或说哪个坐标。，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。你用相机拍照你需要控制相机的。
three.js创建相机，正投影相机-OrthographicCamera和透视相机-PerspectiveCamera参数详解(vue中使用three.js06)
点燃火柴的博客
09-02 4311
相机介绍与相机示例一、相机介绍1.正投影相机-OrthographicCamera2.透视相机-PerspectiveCamera二、相机参数演示示例1.示例效果2.示例代码 一、相机介绍 Three.js 库中提供了两种不同的相机，正投影相机和透视相机 1.正投影相机-OrthographicCamera 通过正投影相机渲染出来的物体的尺寸都一样，不会因为观察距离的远近而出现近大远小的情况 创建正投影相机的方式 var camera = new THREE.OrthographicCamera( left
threejs (二) 相机
cwjxyp的博客
11-07 708
创建相机辅助线创建一个透视相机观察正交相机上面的可以配置设置对象的属性：可以是number和boolean类型和方法类型，点击gui插件方法名称时，会执行改方法。
three.js从入门到精通系列教程002 - three.js透视相机（PerspectiveCamera）
01-19
透视相机（PerspectiveCamera） 它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。呈现的效果，类似眼睛看东西，近大远小 根据视锥的范围给渲染器提供需要渲染的场景范围。 实例化new ...
threeJs透视相机PerspectiveCamera DEMO
05-19
在Three.js这个流行的JavaScript库中，`PerspectiveCamera`是实现真实感渲染的主要工具，为场景提供透视效果，就像我们日常生活中的视觉体验一样。这篇详细解释将深入探讨`three.js`中的`PerspectiveCamera`及其在...
正投影和透视投影相机对比demo.zip
11-28
在WebGL和ThreeJS中，我们可以使用`THREE.OrthographicCamera`来创建正投影相机，而`THREE.PerspectiveCamera`用于创建透视投影相机。以下是一些关键参数： - **正投影相机**： - `left`: 左边视口边界。 - `...
43：Three.js - 中
weixin_57017198的博客
07-21 1218
相机，类似于眼睛，用于在3D舞台中，放置在不同的位置，实现通过不同的角度观察物体。查看 Three.js 的文档，可以看到 Camera 是一个抽象类，一般不直接使用，其他类型的 Camera 实现了这个抽象类。有以下的几种相机此处以透视相机（）和正交相机（）作为主要重点。
three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera
深南大道
01-19 752
【代码】three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera。
Threejs 学习之旅(三)
Florenza的博客
03-19 1244
PerspectiveCamera 透视相机 例: const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height,1,1000); 构造函数 PerspectiveCamera( fov :Number, aspect :Number, near :Number, far :Number) fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 ...
three.js正投影相机OrthographicCamera
xyphf的博客
05-19 431
<!-- https://threejs.org/docs/index.html#api/zh/cameras/OrthographicCamera --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正投影相机OrthographicCamera</title> <style> body...
Three.js正投影相机OrthographicCamera和透视投影相机PerspectiveCamera
u014291990的博客
12-02 3910
正投影相机OrthographicCamera和透视投影相机PerspectiveCamera 本文是Three.js电子书的9.1节 相机基类Camera正投影相机 透视投影相机立方相机OrthographicCamera PerspectiveCamera CubeCamera视图矩阵.matrixWorldInverse投影矩阵.projectionMatrix属性 针对不同应用的...
Three.js中正交投影摄像机和透视投影摄像机
Potatoyou的博客
11-14 1118
《Three.js开发指南基于WebGL和HTML5在网页上渲染3D图形和动画》 Three.js提供两种摄像机，正交投影摄像机和透视投影摄像机
Three.js（九）—— 相机对象
summer_du的博客
01-28 537
文章目录9、相机对象（投影方式）9.1 正投影和透视投影相机正投影和透视投影简单解释正投影相机对象 OrthographicCamera透视投影相机 PerspectiveCamera相机位置 .posiiotn 和 .lookAt (相机拍摄目标位置)相机位置放置9.2 窗口变化自适应渲染视图矩阵 .matrixWorldInverse 和投影矩阵 .projectionMatrix正投影相机 OrthographicCamera 自适应渲染透视投影相机 PerspectiveCamera 自适应渲染 9
threejs -实时场景缩影
凌风子夜
08-14 3602
在左上角显示一个视图，相当于整个场景的缩影，渲染一次场景，再渲染一次设置视图就行。 1.新建两个透视相机； //主相机 camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000); camera.position.set(0,100,200); camera....
Three.js onsize方法 （含对相机的处理）
这是个问题
07-12 209
function onResize(){ //更新相机参数 if（this.camera.type == 'PerspectiveCamera'){ this.camera.aspect = container.width/container.height; } else if（this.camera.type == 'OrthographicCamera'){ this.camera.left = .container.clientLeft; this.camera..right =
three.js相机的位置和朝向
06-13
three.js 相机的位置和朝向可以通过设置相机的位置和目标点来实现。相机的位置可以通过 `camera.position.set(x, y, z)` 来设置，其中 `x`、`y`、`z` 分别代表相机在三个坐标轴上的位置。相机的朝向可以通过 `camera.lookAt(target)` 方法来设置，其中 `target` 是一个表示相机要对准的目标点的 Vector3 对象。 示例代码： ```javascript const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 设置相机位置 camera.position.set(0, 0, 10); // 设置相机朝向 const target = new THREE.Vector3(0, 0, 0); camera.lookAt(target); ``` 上述代码将创建一个透视相机，将其位置设置为 (0, 0, 10)，然后将其朝向设置为原点 (0, 0, 0)。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值