什么是照相機(jī)？
我們使用Three.js創(chuàng)建的場景是三維的放航，而通常情況下顯示屏是二維的盗飒，那么三維的場景如何顯示到二維的顯示屏上呢嚷量？照相機(jī)就是這樣一個抽象，它定義了三維空間到二維屏幕的投影方式逆趣，用“照相機(jī)”這樣一個類比蝶溶，可以使我們直觀地理解這一投影方式。
而針對投影方式的不同宣渗，照相機(jī)又分為THREE.PerspectiveCamera(透視投影照相機(jī)) 和 THREE.OrthographicCamera(正交投影照相機(jī))抖所。
常用兩種相機(jī)
- 1.OrthographicCamera 正交投影相機(jī)（平視相機(jī)）
- 2.PerspectiveCamera 透視相機(jī)（更像人眼）
舉個簡單的例子來說明正交投影（平視）與透視投影照相機(jī)的區(qū)別。
使用透視投影照相機(jī)獲得的結(jié)果是類似人眼在真實(shí)世界中看到的有“近大遠(yuǎn)小”的效果痕囱；
而使用正交投影照相機(jī)獲得的結(jié)果就像我們在數(shù)學(xué)幾何學(xué)課上老師教我們畫的效果田轧，對于在三維空間內(nèi)平行的線，投影到二維空間中也一定是平行的
那么鞍恢，你的程序需要正交投影還是透視投影的照相機(jī)呢?
一般說來傻粘，對于制圖、建模軟件通常使用正交投影帮掉，這樣不會因?yàn)橥队岸淖兾矬w比例弦悉；
而對于其他大多數(shù)應(yīng)用，通常使用透視投影蟆炊，因?yàn)檫@更接近人眼的觀察效果稽莉。當(dāng)然，照相機(jī)的選擇并沒有對錯之分涩搓，你可以更具應(yīng)用的特性污秆，選擇一個效果更佳的照相機(jī)。
詳細(xì)案例差別參考：https://threejs.org/examples/#webgl_camera
兩種相機(jī)的新建方式有所不同昧甘，透視相機(jī)用的而更多一些
/* 四個參數(shù)分別表示：多少度視角良拼，相機(jī)的寬高比，最近距離疾层，最遠(yuǎn)可視距離*/
new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);
常用的好用的相機(jī)控制器
OrbitControls.js将饺，效果就是可以通過鼠標(biāo)來控制相機(jī)視野
完整案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="vendor/three.min.js"></script>
<script type="text/javascript" src="vendor/jquery.min.js"></script>
<!-- 常用相機(jī)控制器贡避，依賴文件目錄 three.js\examples\js\controls -->
<script type="text/javascript" src="vendor/OrbitControls.js"></script>
</head>
<body >
<script>
/**
* 常用兩種相機(jī)
* 1.OrthographicCamera 正交投影相機(jī)（平視相機(jī)）
* 2.PerspectiveCamera 透視相機(jī)（人眼）
*/
$(function () {
var scene=new THREE.Scene();
var geomtry= new THREE.BoxGeometry(100,100,100); //新建盒子模型
var material=new THREE.MeshLambertMaterial({color:0xff0000}); //材質(zhì)mtl
var mesh=new THREE.Mesh(geomtry,material);
scene.add(mesh); //場景中添加模型
var light= new THREE.PointLight(0xffffff);
light.position.set(300,400,200);
scene.add(light); //場景中添加點(diǎn)光源
//加入環(huán)境光使環(huán)境亮一點(diǎn)
scene.add(new THREE.AmbientLight(0x333333));
var camera=new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,1000);
camera.position.set(200,200,200); //設(shè)置相機(jī)位置
// camera.lookAt(scene.position);
camera.lookAt(0,0,0);
var renderer=new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
render();
function render() {
// requestAnimationFrame(render);
// camera.position.x+=0.1;
// camera.position.y+=0.1;
// camera.position.z+=0.1;
renderer.render(scene,camera);
}
//相機(jī)控制器
var controls=new THREE.OrbitControls(camera);
controls.addEventListener('change',render);
});
</script>
</body>
</html>
完整代碼：github地址 歡迎star
