Three.JS学习 5：了解相机

来源：互联网发布：Sql中not in的效率编辑：程序博客网时间：2024/04/30 05:37

本文学习内容来源：
http://www.hewebgl.com/article/getarticle/59

认识相机

相机对象 THREE.Camera

子类

THREE.OrthographicCamera
THREE.PerspectiveCamera

正射投影

又称平行投影，最大特点是无论物体距离相机多远，投影后的物体大小尺寸不变。通常用于建筑蓝图绘制和计算机辅助设计等方面。
构造函数：
OrthographicCamera(left,right,top,bottom,near,far)
这里写图片描述
参数说明

left：左平面距离相机中心点的垂直距离
right：右平面距离相机中心点的垂直距离
top：顶平面距离相机中心点的垂直距离
bottom：底平面距离相机中心点的垂直距离
near：近平面距离相机中心点的垂直距离
far：远平面距离相机中心点的垂直距离

相机中心点，又定义为相机的位置。通过这些参数，就能在三维空间中唯一的确定上图的一个长方体。这个长方体又称为：视景体

投影变换的目的就是定义一个视景体，使得视景体外多余的部分裁剪掉，最终图像只是视景体内的有关部分。
示例

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );scene.add( camera );

把浏览器容器的宽度、高度作为视景体的高度和宽度，相机正好在窗体的中心点上。

透视投影

其投影时，3D 空间中的物体的所有投射光线会聚于观察者的眼睛这一点。透视投影生成图像，其中的物体的大小是基于该物体相对于观察者的距离。
这更适合我们一般的感觉。
这里写图片描述

透视投影相机也是形成视景体，会进行裁剪

构造函数

PerspectiveCamera(fov,aspect,near,far)

这里写图片描述
参数说明

fov：透视的角度，表示的是照相机所看到的范围,0-180
aspect：是Znear平面的宽高比，值大，就相当于看宽屏电影
near：显示区域离相机最近的距离
far：离相机最远的距离

示例

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );scene.add( camera );

示例

正射投影

 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Three框架</title>        <script src="js/three.min.js"></script>        <style type="text/css">            div#canvas-frame {                border: none;                cursor: pointer;                width: 100%;                height: 600px;                background-color: #EEEEEE;            }        </style>        <script>            var renderer,width,height;            function initThree() {                width = document.getElementById('canvas-frame').clientWidth;                height = document.getElementById('canvas-frame').clientHeight;                renderer = new THREE.WebGLRenderer({                    antialias: true                });                renderer.setSize(width, height);                document.getElementById('canvas-frame').appendChild(renderer.domElement);                renderer.setClearColor(0xFFFFFF, 1.0);            }            var camera;            function initCamera() {               // camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);                camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 1000 );                camera.position.x = 0;                camera.position.y = 0;                camera.position.z = 600;                camera.up.x = 0;                camera.up.y = 1;                camera.up.z = 0;                camera.lookAt({                    x: 0,                    y: 0,                    z: 0                });            }            var scene;            function initScene() {                scene = new THREE.Scene();            }            var light;            function initLight() {                light = new THREE.AmbientLight(0xFF0000);                light.position.set(100, 100, 200);                scene.add(light);                light = new THREE.PointLight(0x00FF00);                light.position.set(0, 0, 300);                scene.add(light);            }            function initObject() {                var geometry = new THREE.CylinderGeometry(70, 100, 200);                var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });                var mesh = new THREE.Mesh(geometry, material);                mesh.position = new THREE.Vector3(0, 0, 0);                scene.add(mesh);            }            function threeStart() {                initThree();                initCamera();                initScene();                initLight();                initObject();                animation();            }            function animation() {                changeFov();                renderer.render(scene, camera);                requestAnimationFrame(animation);            }            function setCameraFov(fov) {                camera.fov = fov;                camera.updateProjectionMatrix();            }            function changeFov() {                var txtFov = document.getElementById("txtFov").value;                var val = parseFloat(txtFov);                setCameraFov(val);            }        </script>    </head>    <body onload="threeStart();">        <div id="canvas-frame"></div>        <div>            Fov:<input type="text" value="45" id="txtFov"/>(0到180的值)        </div>    </body></html>

效果：
这里写图片描述

再将摄像机改为透视投影：
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
可以看到视角的不同，图像会发生变化。视角越大，物体显得越小。

这里写图片描述

0 0