透視投影相機(jī)PerspectiveCamera
透視投影相機(jī)比較常用，也肥腸容易理解。比如電影院的投影儀，當(dāng)我們把手靠近時(shí)，就會(huì)在幕布上投下巨大的影子，而遠(yuǎn)離時(shí)則影子變小。
camera.png
PerspectiveCamera( fov, aspect, near, far )
param.png
參數(shù)基本上都是固定的，我們實(shí)際關(guān)心的是相機(jī)的擺放位置和朝向。
相機(jī)位置（position）
相機(jī)的位置如果不設(shè)定，默認(rèn)是在原點(diǎn)(0,0,0)的位置。而物體如果不指定位置，默認(rèn)也是創(chuàng)建在原點(diǎn)的。這樣的話，相機(jī)就在物體的肚子里面了，這樣是看不到物體的。
相機(jī)角度（lookAt）
相機(jī)放好了，然后就得保證鏡頭的朝向。如果你把鏡頭朝向物體的反方向，這樣是拍攝不到物體的。
我們一般設(shè)定相機(jī)是朝向原點(diǎn)位置，這樣可以保證看到物體。
pos.png
下面是一個(gè)相機(jī)由近及遠(yuǎn)的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<title>Document</title>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
var scene = new THREE.Scene();
console.log(scene);
//幾何體
var geometry = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個(gè)立方體幾何對(duì)象Geometry
//材質(zhì)
var material = new THREE.MeshBasicMaterial({
color: 0x00ffff
});
//合成對(duì)象
var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對(duì)象Mesh
scene.add(mesh); //網(wǎng)格模型添加到場(chǎng)景中
//創(chuàng)建相機(jī)對(duì)象
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 100, 600);
/**
* 創(chuàng)建渲染器函數(shù)
*/
var renderer = new THREE.WebGLRenderer();//畫布
renderer.setSize(1000, 500);//設(shè)置渲染區(qū)域尺寸
renderer.setClearColor(0xb9d3ff, 1); //設(shè)置背景顏色
//將渲染好的canvas追加到dom
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
render();
function render() {
let count = 0;
let time = setInterval(() => {
console.log(count);
if (count < 200) {
camera.position.set(count, count, count); //慢慢移動(dòng)鏡頭
} else {
clearInterval(time);
}
camera.lookAt(new THREE.Vector3(0,0,0)); //設(shè)置相機(jī)朝向(指向原點(diǎn)位置)
renderer.render(scene, camera);//渲染必須有場(chǎng)景和相機(jī)兩個(gè)對(duì)象
count+=10;
}, 1000);
}
</script>
camera.gif
通過(guò)圖示看到，一開(kāi)始是看不到物體的，因?yàn)橄鄼C(jī)在物體肚子里面，然后慢慢移動(dòng)鏡頭跳出物體才看到物體。
