2.1 相机
Three.js库里有两种不同的相机:正交投影相机和透视相机。
本例中的截图如下:
这是一个透视视图,也是最自然的视图。距离相视越远的方块,被渲染得越小。
如果使用右上方的按钮切换到正交投影相机,程序截图如下:
使用正交投影相机时,所有方块渲染出来的大小都一样;对象和相机之间的距离不会影响渲染结果。这种相机通常用在二维游戏中。
在三维游戏中,应尽量使用透视相机,因为它最贴近真实世界。切换相机的代码如下:
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 = 2; camera.position.y = 1; camera.position.z = 3; camera.lookAt(scene.position); this.perspective = "Orthographic"; } else { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 120; camera.position.y = 60; camera.position.z = 180; camera.lookAt(scene.position); this.perspective = "Perspective"; } };
在上面这个代码片段里你可以看到,我们创建THREE.PerscpectiveCamera的方法跟创建THREE.OrthographicCamera的方法有些不一样的地方.我们先来看一下THREE.PerspectiveCamera。它接受如下这些参数:
参数 |
描述 |
fov(视场) |
fov表示视场(field of view)。这是从相机位置能够看到的部分场景。例如,人类有差不多180度的视场,而一些鸟类差不多会有一个完整的、360度的视场。 由于普通的显示器不能完全显示我们看到的景象,所以一般会选择一块较小的区域。对大多数情况下会用60度到90度左右的视场。 推荐默认值:45 |
aspect(长宽比) |
这是渲染结果输出区的横向长度和纵向长度的比值。在我们的例子中,由于我们会使用整个窗口作为输出界面,所以会使用这个窗口的长宽比。这个长宽比决定了水平视场和垂直视场之间的比例关系。 推荐默认值:window.innerWidth/window.innerHeight |
near(近裁平面) |
从距离相机多近的地方开始渲染场景。通常情况下我们会为这个属性设置一个很小的值,从而可以渲染从相机位置可以看到的所有物体。 默认值:0.1。 |
far(远裁平面) |
相机可以从它所处的位置看多远。如果我们将这个值设得太低,那么场景中的一部分可能不会被渲染;如果设得太高,在某些情况下会影响渲染的效率。 默认值:1000。 |
下图展示了这些属性:
要配置正交投影相机,我们得使用其他一些属性。正投影不关心使用什么样的长宽比,或者以什么样的视角观察场景。所有对象渲染的尺寸都一样。下表是正交投影相机的属性:
参数 |
描述 |
left(左边界) |
可视范围的左平面。你可以将它当做是可渲染部分的左侧边界。如果我们把这个值设为-100,那么你就不会看到任何比这个左侧边界更远的对象 |
right(右边界) |
跟left属性一样,不过这次是界面的另外一侧。比这个右侧边界更远的对象不会被渲染 |
top(上边界) |
可被渲染空间的最上面 |
bottom(下边界) |
可被渲染空间的最下面 |
near(近裁平面) |
基于相机所在的位置,从这一点开始渲染场景 |
far(远裁平面) |
基于相机所在的位置,一直渲染到场景中的这一点 |
所有这些属性可以在下图中找到:
设定相机的观察目标
我们也可以使用下面的代码设定相机的观察目标:
camera.lookAt(new THREE.Vector3(x,y,z));
在这个例子中,相机的观察目标可以移动,它所指向的位置用一个红点标识了出来。你会看到场景正在从左向右移动。场景并不是真的在移动,而是相机的观察目标在移动(屏幕中央的那个红点),其效果就是场景在从左向右移动。你也可以在这个例子将相机换成正交投影相机。你会看到改变相机观察目标的效果跟使用透视相机时有所不同。
完整代码
<!DOCTYPE html> <html> <head> <title>示例02.01 - 相机</title> <script src="Scripts/jquery-2.1.3.min.js"></script> <script src="Scripts/Threejs/three.min.js"></script> <script src="Scripts/Threejs/stats.js"></script> <script src="../../../Scripts/Threejs/dat.gui.min.js"></script> <style> /* 将margin设置为0,overflow设置为hidden,可让浏览器显示全屏 */ body { margin: 0; overflow: hidden; } </style> </head> <body> <div id="Stats-output"> </div> <!-- 作为canvas容器的div --> <div id="WebGL-output"> </div> <script type="text/javascript"> // 页面加载完毕后,就可以运行Three.js了。 $(function () { var stats = initStats(); // // 创建渲染器,并设置视口大小和清除色 var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xEEEEEE, 1.0); renderer.setSize(window.innerWidth, window.innerHeight); // 将WebGL的输出canvas放置到div中 $("#WebGL-output").append(renderer.domElement); // 创建scene对象,用来容纳网格、相机、光源等对象 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 120; camera.position.y = 60; camera.position.z = 180; // 创建一个Plane作为地面 var planeGeometry = new THREE.PlaneBufferGeometry(180,180); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry,planeMaterial); // Plane默认在xy平面,需要将它旋转到xz平面 plane.rotation.x=-0.5*Math.PI; plane.position.x=0 plane.position.y=0 plane.position.z=0 // 将这个Plane添加到场景中 scene.add(plane); // 添加绿色盒子 var boxGeometry = new THREE.BoxGeometry(8,4,8); var boxMaterial = new THREE.MeshLambertMaterial({ color: 0x00ee22 }); for (var j = 0 ; j < (planeGeometry.parameters.height / 9) ; j++) { for (var i = 0 ; i < planeGeometry.parameters.width / 9 ; i++) { var box = new THREE.Mesh(boxGeometry, boxMaterial); box.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 9); box.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 9); box.position.y=2; scene.add(box); } } // 添加一个红色球作为相机的观察目标 var lookAtGeom = new THREE.SphereGeometry(2); var lookAtMesh = new THREE.Mesh(lookAtGeom, new THREE.MeshLambertMaterial({ color: 0xff0000 })); scene.add(lookAtMesh); // 添加平行光 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 ); directionalLight.position.set( -20, 40, 60 ); scene.add(directionalLight); // 添加环境光 var ambientLight = new THREE.AmbientLight(0x292929); scene.add(ambientLight); // 切换相机 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 = 2; camera.position.y = 1; camera.position.z = 3; camera.lookAt(scene.position); this.perspective = "Orthographic"; } else { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 120; camera.position.y = 60; camera.position.z = 180; camera.lookAt(scene.position); this.perspective = "Perspective"; } }; } var gui = new dat.GUI(); gui.add(controls, 'switchCamera'); gui.add(controls, 'perspective').listen(); render(); var step = 0; function render() { stats.update(); step += 0.02; // 移动相机的观察目标 if (camera instanceof THREE.PerspectiveCamera) { var x = 10 + (100 * (Math.sin(step))); camera.lookAt(new THREE.Vector3(x, 30, 0)); lookAtMesh.position.set(x, 10, 0); } else { var x = ((Math.cos(step))); camera.lookAt(new THREE.Vector3(x, 0, 0)); lookAtMesh.position.set(x, 10, 0); } 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'; $("#Stats-output").append( stats.domElement ); return stats; } }); </script> </body> </html>文件下载(已下载 1951 次)
发布时间:2015/7/31 下午10:18:14 阅读次数:5825