本篇主要介紹Three.js照相機中的透視投影照相機。
上一篇：正交投影照相機
5.透視投影照相機構造函數
透視投影照相機（Perspective Camera）的構造函數是：
THREE.PerspectiveCamera(fov, aspect, near, far)
- fov 可視角度
- aspect 實際窗口的縱橫比
- near 近處的裁面的距離
- far 遠處的裁面的距離
只有離相機的距離大於near值，小於far值，且在相機的可視角度之內，才能被相機投影到。
讓我們通過幾張透視照相機投影的圖詳細了解這些參數。
透視圖中，灰色的部分是視景體，是可能被渲染的物體所在的區域。
fov是視景體豎直方向上的張角（是角度制而非弧度制），如側視圖所示。
aspect等於width / height，是照相機水平方向和豎直方向長度的比值，通常設為Canvas的橫縱比例。
near和far分別是照相機到視景體最近、最遠的距離，均為正值，且far應大於near。
6.透視投影照相機實例
源碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.js測試三</title> </head> <body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas> <script type="text/javascript" src="js/three.min.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); // 場景 var scene = new THREE.Scene(); // 透視投影照相機 var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10); camera.position.set(0, 0, 5); scene.add(camera); // 邊長為一的正方體 var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }) ); scene.add(cube); // 渲染 renderer.render(scene, camera); } </script> </body> </html>
其中，設置透視投影照相機，這里canvas長400px，寬300px，所以aspect設為400 / 300：
var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10); camera.position.set(0, 0, 5); scene.add(camera);
對比正交投影，透視投影可以看到全部的12條邊，而且有近大遠小的效果。
7.豎直張角
將視角fov由45改為60，得到這樣的效果：
再改成600：
將照相機的豎直張角設置得更大時，視景體變大了，因而正方體相對於整個視景體的大小就變小了，看起來正方形就顯得變小了。 正方體的實際大小並未改變。
注意，改變fov並不會引起畫面橫豎比例的變化，而改變aspect則會改變橫豎比例。
next：立方體、平面、球體。
整理自張雯莉《Three.js入門指南》
其他參考：Three.js-照相機