正交投影相機
特點：看見物體的遠近高低比例都是相同
就像maya中的三視圖。
看一下鄙人以前做的一個簡單模型傘。
- 側視圖
- 俯視圖
正交投影構造函數OrthographicCamera
OrthographicCamera( left, right, top, bottom, near, far );
| 參數 | 含義 |
|---|---|
| left | 左平面距離相機中心的垂直距離 |
| right | 右平面距離相機中心的垂直距離 |
| top | 頂平面距離相機中心的垂直距離 |
| bottom | 低平面距離相機中心的垂直位置 |
| near | 近平面距離相機中心的垂直位置 |
| far | 遠平面距離相機中心的垂直距離 |
maya的頂視圖相機，相機中心就是它的焦點位置。
透視相機
- 透視圖
![在這裏插入圖片描述]()
透視相機就像我們的人眼
![在這裏插入圖片描述]()
透視投影相機的構造函數PerspectiveCamera
PerspectiveCamera(fov,aspect,near,far);
| 參數 | 含義 |
|---|---|
| fov | 視角 |
| aspect | 縱橫比 |
| near | 近平面 |
| far | 原平面 |
maya的透視相機
THREE實戰
前期的工作重構代碼：
<script>
//場景的物體
var cube=null,mesh=null,scene=null;
function initObject() {
var geometry = new THREE.CubeGeometry(300,300,300,);//正方體
//白色反射所有光線，利於檢測燈光
var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );//白色
mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
}
//燈光
function initLight() {
light_direction=new THREE.DirectionalLight(0x0000FF,1);//方向光藍色
light_direction.position.set(10,20,6);
}
//函數入口
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
}
// 循環渲染
function animation()
{
renderer.render(scene, camera);
requestAnimationFrame(animation);//遞歸調用
}
</script>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
case1：正交投影相機的使用
相機中心視爲原點，left與bottom爲負值
//正交投影相機
function initCamera() {
var camera;
camera=new THREE.OrthographicCamera(-width/2,width/2,height/2,-height/2,1,1000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 700;
camera.up.x = 0;//相機朝向位置
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(new THREE.Vector3(0,0,0));
}
調整左側距離left=-width時
case2：透視相機的使用
//透視相機45視角，屏幕縱橫比，1-1000的距離區間
function initCamera() {
var camera;
camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
camera.position.x = 0;
camera.position.y = 0;
camera.up.x = 0;//相機朝向位置
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(new THREE.Vector3(0,0,0));
}
調整視角120度，視角0-180度之間看到的物體會越來越小
