Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）

一、两种摄像机的区别与比较
Three.js 库提供了两种不同的摄像机：透视投影摄像机和正交投影摄像机。
透视投影摄像机：这种摄像机的效果更贴近真实世界。也就是物体离摄像机越远，它们就会被渲染得越小。
正交投影摄像机：对象相对于摄像机的距离对渲染的结果是没有影响的，也就是说物体不离摄像头多远，渲染出来的尺寸都是一样的。这中摄像机通常被用于二位游戏中。
1，效果图
（1）页面打开后默认使用的是“透视投影摄像机”。

（2）点击控制面板上的“切换摄象机”按钮，可以实现两种类型的摄象机相互切换。下面是“正交投影摄像机”效果图。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>hangge.com</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><!-- 用于显示统计图形 -->
<div id="Stats-output">
</div><!-- 作为Three.js渲染器输出元素 -->
<div id="WebGL-output">
</div><script type="text/javascript">//网页加载完毕后会被调用function init() {初始化统计对象var stats = initStats();//创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）var scene = new THREE.Scene();//创建一个摄像机对象（摄像机决定了能够在场景里看到什么）var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = 40;camera.position.y = 20;camera.position.z = 60;camera.lookAt(scene.position);//创建一个WebGL渲染器并设置其大小var renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0xEEEEEE));renderer.setSize(window.innerWidth, window.innerHeight);//创建一个平面var planeGeometry = new THREE.PlaneGeometry(50, 50);var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});var plane = new THREE.Mesh(planeGeometry, planeMaterial);//设置平面的旋转角度和位置plane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.position.y = 0;plane.position.z = 0;//将平面添加场景中scene.add(plane);//在平面上方添加一个个小方块var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);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);var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);cube.position.y = 2;scene.add(cube);}}//添加环境光var ambientLight = new THREE.AmbientLight(0x292929);scene.add(ambientLight);//添加平行光var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);directionalLight.position.set(-20, 40, 60);scene.add(directionalLight);//将渲染的结果输出到指定页面元素中document.getElementById("WebGL-output").appendChild(renderer.domElement);//dat.GUI对象使用的配置（存放有所有需要改变的属性的对象）var controls = new function () {//当前使用的摄像机类型this.perspective = "Perspective";//切换摄像机this.switchCamera = function () {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.x = 40;camera.position.y = 20;camera.position.z = 60;camera.lookAt(scene.position);this.perspective = "Orthographic";} else {//切换成透视投影摄像机camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = 40;camera.position.y = 20;camera.position.z = 60;camera.lookAt(scene.position);this.perspective = "Perspective";}};};//创建dat.GUI，传递并设置属性var gui = new dat.GUI();gui.add(controls, 'switchCamera').name("切换摄像机");gui.add(controls, 'perspective').listen();//渲染场景render();//渲染场景function render() {stats.update();//通过requestAnimationFrame方法在特定时间间隔重新渲染场景requestAnimationFrame(render);//渲染场景renderer.render(scene, camera);}//初始化统计对象function initStats() {var stats = new Stats();//设置统计模式stats.setMode(0); // 0: fps, 1: ms//统计信息显示在左上角stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';//将统计对象添加到对应的<div>元素中document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}//确保init方法在网页加载完毕后被调用window.onload = init
</script>
</body>
</html>

THREE.PerspectiveCamera 和 THREE.OrthographicCamera 这两种摄像机创建方法是不一样的，它们接收的参数分别如下：

1，透视投影摄像机（ThREE.PerspectiveCamera）
原文:Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）

参数描述推荐默认值
fov 表示视场。这是在摄像机中能够看到的那部分场景。
比如：人类有接近 180 度的视场，而有些鸟类有接近 360 度的视场。但由于计算机不能完全显示我们能够看到的景象，所以一般会选择一块较小的区域。对于游戏而言，视场大小通常为 60 度到 90 度。 50
aspect（长宽比）这是渲染结果的横向尺寸和纵向尺寸的比值。这个长宽比决定了横向视场和纵向视场的比例关系。
在上面的样例中，由于使用窗口作为输出界面，所以使用的是窗口的长宽比。 window.innerWidth / window.innerHeight
near（近面距离）该属性定义了从距离摄像机多近的距离开始渲染。
通常情况下这个值会设置得尽量小，从而能够渲染从摄像机位置可以看到的所有物体。 0.1
far（远面距离）该属性定义了摄像机从它所出的位置能够看多远。
如果这个值设置得较小，那么场景中有一部分不会被渲染。
如果设置的较大，那么就会影响渲染的性能。
1000
zoom（变焦）可以使用该属性放大或缩小场景。
如果这个值设置得小于 1，那么场景就会被缩小。
如果这个值设置得大于 1，那么场景就会被放大。
如果设置的值为负数，那么场景就会上下颠倒。
1000
2，正交投影摄像机（ThREE.OrthographicCamera）
由于正交投影摄像机渲染出的物体大小都是一样的，所以它并不关心使用什么长宽比，或者以什么样的视角了观察场景。
我们使用正交投影摄像机时，要定义的是一个需要被渲染的方块区域。
原文:Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）

参数描述
left（左边界）可视范围的左平面。我们可以将它看作是渲染部分的左边界。任何比这个左边界的物体都不会被渲染。
right（右边界）和 left 属性一样，只不过它定义的是可被渲染区域的另一个侧面。任何比这个右边界远的物体都不会被渲染。
top（上边界）可被渲染区域的最上面。
bottom（下边界）可被渲染区域的最下面。
near（近面距离）基于摄像机所在的位置，从这一点开始渲染场景。
far（远面距离）基于摄像机所在的位置，渲染场景到这一点为止。
zoom（变焦）可以使用该属性放大或缩小场景。
如果这个值设置得小于 1，那么场景就会被缩小。
如果这个值设置得大于 1，那么场景就会被放大。
如果设置的值为负数，那么场景就会上下颠倒。

三、将摄像机聚焦在指定点上
1，改变摄像机所指向的位置
通常来说，摄像机会指向场景的中心，用坐标表示就是 position(0,0,0)。但我们可以通过 lookAt() 方法改变摄像机所指向的位置：
1
camera.lookAt(new THREE.Vector3(x, y, z));

2，让摄像机追随某个物体
由于 THREE.Mesh 对象的位置都是 THREE.Vector3 对象，所以可以使用 lookAt() 方法使摄像机指向场景中特定的某个网格。
比如我们在 render 循环中执行如下代码，看到的效果就是摄像机随着物体的移动而移动。
1
camera.lookAt(mesh.position);

Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）相关推荐

nodejs 本地php服务器,node.js创建本地服务器详解
本文主要和大家分享node.js创建本地服务器详解,简易上手node.js后,我们就可以在自己电脑上创建本地服务器了.希望能帮助到大家. 一.先上代码.//请求Node.js自带的http模块. va ...
js打印三角形超详解
js打印三角形超详解 j控制星星的总行数,i控制每行星星的打印个数打印图形如下: (1) (2) //str=""用来存储星星// 理解步骤1:在一行输出6个星星如何操作,在循环 ...
computed用发_Vue.js中computed使用详解
这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下. JS属性: JavaScript有一个特性是Object.d ...
JS事件的三个阶段详解
JS事件的三个阶段详解一.JS事件的三个阶段二.冒泡阶段触发事件三.捕获阶段触发事件四.阻止冒泡行为五.阻止事件冒泡和默认行为一.JS事件的三个阶段事件处理机制的三个阶段:1.捕获 2. ...
js调试控制台使用详解图解
一实例图解四种不同的console输出函数,输出信息前显示不同的图标: $查看某个元素: console.dir()可以显示一个对象所有的属性和方法: 分组显示信息: 显示digitalData对 ...
Js中apply方法详解说明
Js apply 方法详解我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了, ...
JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习首先,必须搞清楚在JS里面,函数 ...
html js require函数,Require.js的基本用法详解
一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...
JS中函数式编程详解版(FunctionalProgramming,FP)
函数式编程详解函数式编程的认识函数式编程前置知识函数是一等公民(First-class Function) 高阶函数闭包函数式编程基础纯函数 lodash 模块柯里化函数组合函子函 ...

Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）

Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）相关推荐

最新文章

热门文章