Three.js中正交投影摄像机和透视投影摄像机

已于 2022-11-14 17:23:15 修改
阅读量1.1k 收藏 2
点赞数 1
分类专栏： three.js 文章标签： javascript 开发语言 ecmascript 前端 3d
于 2022-11-14 16:55:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Potatoyou/article/details/126171656
版权

正交投影摄像机和透视投影摄像机

区别

正交投影摄像机：

所有物体被渲染出来的尺寸是一样的，没有近大远小之分。因为对象相对于摄像机的距离对渲染的结果是没有影响的。常用于二维游戏中。

透视投影摄像机：

透视试图，近大远小。更贴近真实世界。

属性

正交投影摄像机Orthographic Camera：

正交投影摄像机

构造函数：

THREE.OrthographicCamera(left, right, top, bottom, near, far)
参数描述
left（左边界）可视范围的左平面，渲染部分的左边界。
right（右边界）可渲染区域的另一边界
top（上边界)可渲染区域的最上面
bottom（下边界)可渲染区域的最下面
near（近面距离)基于摄像机所处的位置，从这一点开始渲染
far（远面距离）基于摄像机所处的位置，渲染场景到这一点结束
zoom（变焦）放大和缩小场景（默认值为1，小于1—缩小，大于1—放大，负数场景会上下颠倒)

透视投影摄像机PerspectiveCamera：

透视投影摄像机

构造函数：

THREE.PerspectiveCamera(fov,aspect,near,far,zoom)
参数描述
fov视场。摄像机能够看到的那部分场景。一般计算机不能完全显示能够看到的景象，所以一般会选择较小的区域。推荐默认值：50
aspect（长宽比）渲染结果的横向尺寸和纵向尺寸的比值。推荐默认值：window.innerWidth/window.innerHeight
near（近面距离）定义从距离摄像机多近的距离开始渲染。推荐默认值：0.1
far（远面距离）定义了摄像机从它所处的位置能够看多远。推荐默认值：100
zoom（变焦）放大和缩小场景（默认值为1，小于1—缩小，大于1—放大，负数场景会上下颠倒）

实例

需求

在Three.js中改变摄像机，通过点击按钮SwitchCamera时，透视摄像机变成正交摄像机。

过程

  • 构建基本场景（scene，camera，renderer，plane，spotLight，ambientLight）
  • 添加立方体（平铺整个平面）
  • 添加初始化性能插件、dat.GUI简化实验流程
  • 添加用户交互插件
  • 窗口触发函数（页面响应式布局）

结果

Perspective Camera
Orthographic Camera

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name=viewport
		  content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
	<script type="text/javascript" src="libs/three/three.js"></script>
	<script type="text/javascript" src="libs/three/controls/TrackballControls.js"></script>
	<script type="text/javascript" src="libs/three/geometries/ConvexGeometry.js"></script>
	<script type="text/javascript" src="libs/three/geometries/QuickHull.js"></script>
	<script type="text/javascript" src="libs/three/geometries/ParametricGeometries.js"></script>
	<script type="text/javascript" src="libs/util/Stats.js"></script>
	<script type="text/javascript" src="libs/util/dat.gui.js"></script>
	<script type="text/javascript" src="libs/three/controls/OrbitControls.js"></script>
	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="04-01.js"></script>
	<link rel="stylesheet" href="css/default.css">
	<title>Title</title>
	<style>
		html, body {
			margin: 0;
			height: 100%;
		}
	</style>
	<script></script>
</head>
<body onload="draw()">
</body>
</html>

//初始化场景
var scene;
function initScene() {
    scene = new THREE.Scene();
}
//摄像机
var camera;
function initCamera() {
    //初始化摄像机为透视摄像机，设置fov(视场)、aspect（长宽比）、near（近面距离）、far（远面距离）
    camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
    //摄像机的位置
    camera.position.set(120,60,180);
    //摄像机所指向的位置
    camera.lookAt(scene.position);
}

//渲染器
var renderer;
function initRender(){
    //创建渲染器
    renderer = new THREE.WebGLRenderer();
    //颜色
    renderer.setClearColor(new THREE.Color(0x000000));
    //大小
    renderer.setSize(window.innerWidth,window.innerHeight);
    //将渲染的结果添加到HTML框架的body中
    document.body.appendChild(renderer.domElement);
}

//平面
var plane;
//平面Geometry
var planeGeometry = new THREE.PlaneGeometry(180,180);
function initPlane(){
    //平面的材质
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff,
    });
    plane = new THREE.Mesh(planeGeometry, planeMaterial);
    //旋转平面水平放置
    plane.rotation.x = -0.5*Math.PI;
    //设置平面位置
    plane.position.set(0,0,0);
    //将平面添加至场景
    scene.add(plane);
}

//光源
var light;
function initLight(){
    //场景添加一个环境光
    scene.add(new THREE.AmbientLight(0x292929));
    //添加平行光
    light = new THREE.DirectionalLight(0xffffff,0.7);
    light.position.set(-20,40,60);
    scene.add(light);
}

//方块
var cube;
function initCube(){
    //方块大小
    var cubeGeometry = new THREE.BoxGeometry(4,4,4);
    //两个for循环添加立方体平铺整个平面
    for(var j=0;j<(planeGeometry.parameters.height/5);j++){
        for(var i=0;i<planeGeometry.parameters.width/5;i++){
            var rnd = Math.random()*0.75+0.25;
            var cubeMaterial = new THREE.MeshLambertMaterial();
            cubeMaterial.color = new THREE.Color(rnd,0,0);
            cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            //立方体的位置
            cube.position.set(
                -((planeGeometry.parameters.width)/2)+2+(i*5),
                2,
                -((planeGeometry.parameters.height)/2)+2+(j*5));
            //添加至场景中
            scene.add(cube);
        }
    }
}
//初始化性能插件
var stats;
function initStats(){
    stats = new Stats();
    document.body.appendChild(stats.domElement);
}
//使用dat.GUI简化实验流程
var trackballControls;
var controls;
function initControls(){
    controls = new function(){
        this.perspective = "Perspective";
        this.switchCamera = function (){
            //if语句判断当前相机类型
            if(camera instanceof THREE.PerspectiveCamera){
                camera = new THREE.OrthographicCamera(window.innerWidth/-16, window.innerWidth/16, window.innerHeight/16, window.innerHeight/-16, -200,500);
                camera.position.set(120,60,180);
                camera.lookAt(scene.position);
                //摄像机控制函数
                initInteraction();
                this.perspective = "Orthographic";
            }
            else{
                camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
                camera.position.set(120,60,180);
                camera.lookAt(scene.position);
                initInteraction();
                this.perspective = "Perspective";
            }
        };
    };
    var gui = new dat.GUI();
    gui.add(controls,'switchCamera');
    gui.add(controls,'perspective').listen();
    //gui窗口的位置设置
    //gui.domElement.style.position = 'absolute';
    //gui.domElement.style.right = '300px';
    //gui.domElement.style.top = 0;
}
//摄像机控制函数
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var interaction;
function initInteraction() {
    //轨道控制器
    interaction = new THREE.OrbitControls( camera, renderer.domElement );
    //是否可以缩放
    interaction.enableZoom = true;
    //是否自动旋转
    interaction.autoRotate = true;
    //是否开启右键拖拽
    interaction.enablePan = true;
}

//窗口触发函数
function onWindowResize(){
    //更新相机的长宽比aspect属性
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    //对于渲染器，需要改变它的尺寸大小
    renderer.setSize(window.innerWidth,window.innerHeight);
}

function render(){
    //告诉摄像机使用指定的摄像机渲染场景
    renderer.render(scene,camera);
}
function animate(){
    //更新控制器
    render();
    //更新性能插件
    stats.update();
    requestAnimationFrame(animate);
}
function draw(){
    initScene();
    initCamera();
    initRender();
    initPlane();
    initLight();
    initCube();
    initControls();
    initInteraction();
    initStats();

    animate();
    window.onresize = onWindowResize;
}

总结

正交投影摄像机和透视投影摄像机的切换，首先用instanceof判断目前摄像机是否是透视摄像机
如果是透视投影摄像机，则用 camera = new THREE.OrthographicCamera（left, right, top, bottom, near, far）
设置为正交投影摄像机，反之亦然
后续可以继续设置摄像机的位置，对准场景中心。

请往我的生活里加满快乐
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js的摄像机
读心悦
05-05 197
一般情况下，显示屏是二维的，如何把三维的场景显示到屏幕上呢？摄像机就是这样的一个抽象，它定义了三维空间到二维屏幕上的投影方式。根据投影方法的不同，摄像机又分为正交投影照相机和透视投影摄像机。正交投影：透视投影：对于制图、建模软件通常使用的是正交投影，它不会因为投影而改变物体的比例；其他的场景，大多数使用的是透视投影，这样更接近人眼的观察效果。
THREE.JS之照像机（Camera）
novenn
09-16 1358
THREE.JS之摄像机（Camera）
Three.js - 透视相机（PerspectiveCamera）（三）
小小的前端
04-25 1万+
简介 在three.js中，摄像机的作用就是不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景，就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机（PerspectiveCamera） 它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。 透视相机(PerspectiveCamera) 根据视锥的范围给渲染器提供需要渲染的场景范围。 实例化new THREE.PerspectiveCamera() 接受4个参数来确认视锥的范围。只要在视锥范围内
Three.js第三章——透视投影相机
00后的程序员
12-21 1466
生活中用相机拍照，你相机位置不同，拍照结果也不同，threejs中虚拟相机同样如此。比如有一间房子，你拿着相机站在房间里面，看到的是房间内部，站在房子外面看到的是房子外面效果。想象为一个房间，然后根据相机位置和长方体位置尺寸对比，判断两者相对位置。你可以发现设置相机坐标(200, 200, 200)，位于长方体外面一处位置。，具体说相机镜头对准哪个物体或说哪个坐标。，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。你用相机拍照你需要控制相机的。
three.js OrthographicCamera（正交相机附带demo） - 03
刘毅鹏的博客
11-25 3705
文章目录一、什么是正交投影相机1.属性介绍2.代码示例二、demo三、demo效果（`所有物体大小不以物体距离摄像机远近来改变`） 一、什么是正交投影相机 正交摄像机与透视投影摄像机最大的区别就是物体的大小不随物体距离影响，透视投影相机请看我上篇文章 three.js PerspectiveCamera（透视投影相机） - 02，然而正交投影摄像机无论物体距离摄像机多远，你所看到的物体大小都是1比1还原。 1.属性介绍 属性 描述 left 摄像机视锥体左侧面 right 摄像机视锥
Three.js学习-相机Camera的基本操作(了解向)
qq_41835314的博客
07-01 4752
介绍了相机的两种透视方式，以及相机的基本属性设置，还有简单介绍了轨道控制器的使用。
Three.js学习之正交投影照相机
10-21
在Three.js中，正交投影照相机是一种重要的概念，它不同于常见的透视投影照相机，具有独特的特点和用途。本文将详细介绍正交投影照相机及其在Three.js中的使用方法。 正交投影照相机（OrthographicCamera）是图形学...
three.js正投影相机OrthographicCamera使用DEMO
05-19
在三维图形渲染领域，three.js 是一款非常流行的 JavaScript 库，它使得在浏览器中创建复杂的3D场景变得简单。在three.js中，相机是观察3D世界的关键元素，`OrthographicCamera` 就是其中的一种，它实现了正投影（也...
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换代码
05-02
参考博文：Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换 https://blog.csdn.net/u014361280/article/details/124544320?spm=1001.2014.3001.5501 一、简单介绍 Three js 开发的一些...
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; //创建...
threejs (二) 相机
cwjxyp的博客
11-07 715
创建相机辅助线创建一个透视相机观察正交相机上面的可以配置设置对象的属性：可以是number和boolean类型和方法类型，点击gui插件方法名称时，会执行改方法。
【愚公系列】2023年08月 Three.js专题-相机
热门推荐
时光隧道
08-09 1万+
相机是一种用来记录图像或视频的设备。现代相机通常由镜头、图像传感器、取景器、快门和图像处理器等部件组成。相机可以拍摄各种类型的照片，包括家庭照片、肖像照片、风景照片、动物照片和艺术照片等。现在，许多相机还具有额外的功能，例如视频录制、自动对焦和无线连接等。随着技术的发展，相机变得更加便携和高质量，已成为记录和分享生活的重要工具。
Three.js光照阴影实时计算
u014291990的博客
11-12 1154
Three.js光照阴影实时计算 在方向光的作用下，物体会形成阴影投影效果。 平行光投影计算代码 Three.js物体投影模拟计算主要设置三部分，一个是设置产生投影的模型对象，一个是设置接收投影效果的模型，最后一个是光源对象本身的设置，光源如何产生投影。 var geometry = new THREE.BoxGeometry(40, 100, 40); var material = new TH...
Three.js正投影相机OrthographicCamera和透视投影相机PerspectiveCamera
u014291990的博客
12-02 3913
正投影相机OrthographicCamera和透视投影相机PerspectiveCamera 本文是Three.js电子书的9.1节 相机基类Camera正投影相机 透视投影相机立方相机OrthographicCamera PerspectiveCamera CubeCamera视图矩阵.matrixWorldInverse投影矩阵.projectionMatrix属性 针对不同应用的...
three.js透视投影相机PerspectiveCamera
xyphf的博客
05-19 1233
这里我们演示three.js透视相机的使用 <!-- https://threejs.org/docs/index.html#api/zh/cameras/PerspectiveCamera --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透视投影相机PerspectiveCamera</title>
three.js中正交和透视投影相机的应用
Bruce_wjh的博客
12-01 4180
学习交流欢迎加群：789723098，博主会将一些demo整理共享 一个场景之所以会呈现在我们眼前是因为我们具有眼睛，眼睛提供了视觉。换句话说，如果three.js场景中没有这双眼睛，就像电影没有摄像机一样，场景就无法呈现在我们面前？这双眼睛就是相机，可见相机是Three.js场景中不可或缺的一个组件。Three.js库提供了两种不同的相机：正交投影相机和透视投影相机，接下来分别讲解这两种相机以...
Libgdx之正交相机 OrthographicCamera
代码世界
08-09 7122
本翻译自Libgdx Wiki 本文主要介绍OrthographicCamera相机类和用法。OrthographicCamera是正交相机，用在2D游戏开发中，无论游戏物体放在游戏世界中的那个位置，用正交相机看到的物体都不会被缩放。 描述 正交相机的操作非常简单，就像我们在现实世界中操作相机一样，文章中主要介绍： 相机的移动和旋转 相机的放到和缩小 改变相机的视窗大小 在窗口（wi
3、three.js相机的说明
sxj的专栏
11-30 4877
1、CombinedCamera是一个通用的摄像机，设置相机的视角、焦距，并切换视角和视图，可以通过此对象来管理正交投影和透视相机，此对象包含了正交投影相机和透视相机。 其构造函数为：CombinedCamera(width,height,fov,near,far,orthoNera,orthoFar) 其中：width表示相机的宽度，height表示相机的高度，fov表示相机视角的角度，ne
threejs相机和渲染器
目尽地平线
02-14 6138
渲染器 渲染器其实代表的是canvas标签。 渲染器的类型 WebGLRender 使用WebGL来渲染图形，速度较快，但是有些机器不支持WebGL。 CanvasRender 使用canvas2d来渲染图形，在较老的版本上，主要是用来渲染2D图形。现在这个渲染器在新版本中已弃用。 创建渲染器 创建渲染器代码如下： renderer = new THREE.W
three.js摄像机远近设置
08-03
在Three.js中，摄像机的远近设置是通过构造函数的参数来实现的。透视摄像机的远近设置由两个参数决定：near（近面距离）和far（远面距离）。near参数定义了从摄像机位置开始渲染的距离，而far参数定义了摄像机能够看到的最远距离。通常情况下，我们会将近面距离设置为一个较小的值（如0.1），将远面距离设置为一个较大的值（如1000），以确保能够看到场景中的所有物体。例如，使用透视摄像机的构造函数可以这样设置：new THREE.PerspectiveCamera(fov, aspect, 0.1, 1000)。其中，fov表示视场，aspect表示渲染结果的横向尺寸和纵向尺寸的比值。而正交摄像机的远近设置则是通过修改camera.left、camera.right、camera.top和camera.bottom来实现的。例如，使用正交摄像机的构造函数可以这样设置：new THREE.OrthographicCamera(left, right, top, bottom, near, far)。其中，left、right、top和bottom定义了摄像机的可见范围。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值