three.js正交投影照相机

照相机又分为正交投影照相机与透视投影照相机

举个简单的例子来说明正交投影与透视投影照相机的区别。使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果(如下图中的(a));

而使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果,对于在三维空间内平行的线,投影到二维空间中也一定是平行的(如下图中的(b))。

(a)透视投影,(b)正交投影

那么,你的程序需要正交投影还是透视投影的照相机呢?

一般说来,对于制图、建模软件通常使用正交投影,这样不会因为投影而改变物体比例;而对于其他大多数应用,通常使用透视投影,因为这更接近人眼的观察效果。当然,照相机的选择并没有对错之分,你可以更具应用的特性,选择一个效果更佳的照相机。

正交投影照相机(Orthographic Camera)设置起来较为直观,它的构造函数是:

THREE.OrthographicCamera(left, right, top, bottom, near, far)

这六个参数分别代表正交投影照相机拍摄到的空间的六个面的位置,这六个面围成一个长方体,我们称其为视景体(Frustum)。只有在视景体内部(下图中的灰色部分)的物体才可能显示在屏幕上,而视景体外的物体会在显示之前被裁减掉。

为了保持照相机的横竖比例,需要保证(right - left)(top - bottom)的比例与Canvas宽度与高度的比例一致。

nearfar都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后方的物体,因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略,一般near的值设置得较小,far的值设置得较大,具体值视场景中物体的位置等决定。

实例说明



下面,我们通过一个具体的例子来解释正交投影照相机的设置。

基本设置

设置照相机:

var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5);
scene.add(camera);

在原点处创建一个边长为1的正方体,为了和透视效果做对比,这里我们使用wireframe而不是实心的材质,以便看到正方体后方的边:

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
        new THREE.MeshBasicMaterial({
            color: 0xff0000,
            wireframe: true
        })
);
scene.add(cube);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="libs/three.js"></script>

        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById(‘mainCanvas‘)
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();

                // camera
                // canvas size is 400x300
                var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
                camera.position.set(0, 0, 5);
                //camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);

                // a cube in the scene
                var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
                        new THREE.MeshBasicMaterial({
                            color: 0xff0000,
                            wireframe: true
                        })
                );
                scene.add(cube);

                // render
                renderer.render(scene, camera);
            }
        </script>
    </head>

    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>
 

得到的效果是:

我们看到正交投影的结果是一个正方形,后面的边与前面完全重合了,这也就是正交投影与透视投影的区别所在。

长宽比例

这里,我们的Canvas宽度是400px,高度是300px,照相机水平方向距离4,垂直方向距离3,因此长宽比例保持不变。为了试验长宽比例变化时的效果,我们将照相机水平方向的距离减小为2

var camera = new THREE.OrthographicCamera(-1, 1, 1.5, -1.5, 1, 10);

得到的结果是水平方向被拉长了:

[+]查看原图

照相机位置

接下来,我们来看看照相机位置对渲染结果的影响。在之前的例子中,我们将照相机设置在(0, 0, 5)位置,而由于照相机默认是面向z轴负方向放置的,所以能看到在原点处的正方体。现在,如果我们将照相机向右移动1个单位:

var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(1, 0, 5);

得到的效果是物体看上去向左移动了:

[+]查看原图

仔细想一下的话,这也不难理解。就好比你人往右站了,看起来物体就相对往左移动了。

那么,正交投影照相机在设置时,是否需要保证leftright是相反数呢?如果不是,那么会产生什么效果呢?下面,我们将原本的参数(-2, 2, 1.5, -1.5, 1, 10)改为(-1, 3, 1.5, -1.5, 1, 10),即,将视景体设置得更靠右:

var camera = new THREE.OrthographicCamera(-1, 3, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5);

得到的结果是:

[+]查看原图

细心的读者已经发现,这与之前向右移动照相机得到的效果是等价的。

换个角度看世界

到现在为止,我们使用照相机都是沿z轴负方向观察的,因此看到的都是一个正方形。现在,我们想尝试一下仰望这个正方体。我们已经学会设置照相机的位置,不妨将其设置在(4, -3, 5)处:

camera.position.set(4, -3, 5);

但是现在照相机沿z轴负方向观察的,因此观察不到正方体,只看到一片黑。我们可以通过lookAt函数指定它看着原点方向:

camera.lookAt(new THREE.Vector3(0, 0, 0));

这样我们就能过仰望正方体啦:

[+]查看原图

不过一定要注意,lookAt函数接受的是一个THREE.Vector3的实例,因此千万别写成camera.lookAt(0, 0, 0),否则非但不能得到理想的效果,而且不会报错,使你很难找到问题所在。

时间: 2024-08-12 23:27:00

three.js正交投影照相机的相关文章

系列博文-Three.js入门指南(张雯莉)-照相机

照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式.而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机.我们需要为自己的程序选择合适的照相机. 2.2 正交投影vs透视投影 举个简单的例子来说明正交投影与透视投影照相机的区别.使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果(如下图中的(a)):而使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果,对于在三维空间内平

three.js材质

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" src="libs/three.js"></script>

three.js 相关概念

1.什么是three.js? Three.js 是一个 3D JavaScript 库.Three.js 封装了底层的图形接口,使得程序员能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三维场景的渲染. 2.渲染器(renderer) 渲染器(Renderer):渲染器是3D引擎的核心部分,它完成将3D物体绘制到屏幕上的任务.渲染器分为硬件渲染器和软件渲染器组成. a).软件渲染器通常基于底层图形API(应用程序接口)构建,采用适合硬件架构的光栅化方法进行渲染.图形API负责与硬件的

打造H5里的“3D全景漫游”秘籍

近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连接QQ物联摄像头为用户提供2016年天体大事件的直播,大家可以通过手Q实时观看到世界各地最佳观测点的日食,流星等天体现象.承载整个“星球计划”活动的运营页面,经多方讨论,我们决定尝试3D全景漫游模式的H5运营页进行推广,今天就不详述活动的具体内容,先和大家聊一聊这H5里“3D全景漫游”的制作方法.

《Three.js 入门指南》2.3.1- 照相机 - 正交投影demo

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compat

深入理解Three.js中正交摄像机OrthographicCamera

前言 在深入理解Three.js中透视投影照相机PerspectiveCamera那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答,那篇文章中也说了会单独讲解Three.js中另一种常用的摄像机正交摄像机OrthographicCamera,这篇文章将会详细的讲解正交摄像机的工作原理和其对应参数的用法,当然,为了能够让读者更加直观的理解正交摄像机,我会制作一个与正交摄像机相关的demo来直观的让读者感受正交摄像机的魅力. 原理说明 深入理解Three.js中透视投影照相机Persp

Three.js学习总结(一)

基本结构 这两天开始学习Three.js,首先为其顺了一个基本的结构(首先需要引用three.js): 1.创建WebGL画布(与canvas画布是联系在一起的).(即渲染): 2.创建场景: 3.创建照相机并添加至场景: 4.创建灯光并添加至场景(可选,当物体材质为需要光时,则必须添加): 5.创建物体及其材质,两者合在一起创建网络并添加至场景: 6.渲染. 1.创建WebGL画布(与canvas画布是联系在一起的).(即渲染) 有两种方式,一种是已经有canvas画布,另一种是未创建canv

Three.js基础探寻四——立方体、平面与球体

前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments) width:x方向上的长度 height:y方向上的长度 depth:z方向上的长度 w

phonegap的照相机 API

一. Camera Api 简单介绍 Camera 选择使用摄像头拍照,或从设备相册中获取一张照片.图片以 base64 编码的 字符串或图片 URI 形式返回. 方法: 1. camera.getPicture 拍照获取相册图片 navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] ); cameraSuccess:提供图像数据的 onSuccess 回调函数. cameraError:提供错误信息