0
点赞
收藏
分享

微信扫一扫

Three.JS学习 5:了解相机

认识相机

相机对象 THREE.Camera

子类

  • THREE.OrthographicCamera
  • THREE.PerspectiveCamera

正射投影

又称平行投影,最大特点是无论物体距离相机多远,投影后的物体大小尺寸不变。通常用于建筑蓝图绘制和计算机辅助设计等方面。
构造函数:
OrthographicCamera(left,right,top,bottom,near,far)
Three.JS学习 5:了解相机_html
参数说明

  • 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 空间中的物体的所有投射光线会聚于观察者的眼睛这一点。透视投影生成图像,其中的物体的大小是基于该物体相对于观察者的距离。
这更适合我们一般的感觉。
Three.JS学习 5:了解相机_html_02

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

构造函数

PerspectiveCamera(fov,aspect,near,far)

Three.JS学习 5:了解相机_透视投影_03
参数说明

  • 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>

效果:
Three.JS学习 5:了解相机_透视投影_04

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

Three.JS学习 5:了解相机_构造函数_05


举报

相关推荐

0 条评论