我們來學一學threejs的相機。深度學習，瞭解！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>threejs之相機</title>
<script src="../js/three.js"></script>
</head>
<body>
<!-- 相機
相機定義了場景中哪部分是可以見的，相機有自己的位置（position）、朝向（lookAt）和可視域。我們建立的圖形一定要放在相機的可視域中才能看得見。可視域與相機的型別、相機的位置和朝向都有關。
-->
<!--
正交相機
正交相機拍攝的效果類似設計圖，重在表現物體的實際尺寸，沒有近小遠大的效果：
OrthographicCamera( left, right, top, bottom, near, far )
透視相機拍攝的效果類似人眼所見，即有近小遠大的效果：
PerspectiveCamera( fov, aspect, near, far )
-->
<canvas id="cc"></canvas>
<script type="text/javascript">
// 建立一個場景，它將儲存我們所有的元素，如物體、照相機和燈光。
var scene = new THREE.Scene();
// 建立一個攝像機，它定義了我們所處的位置.
var fov = 45,aspect = window.innerWidth / window.innerHeight,near = 0.1,far = 1000;
//fov引數指定視角，aspect指定檢視寬高比，後兩個引數指定近平面和遠平面。透視相機的視域是一個臺體：
var camera1 = new THREE.PerspectiveCamera(fov, aspect, near, far);//透視相機
var frustumSize = 400
var aspect = window.innerWidth / window.innerHeight;
camera2 = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, .1, 100 );
//這個六個引數即是指定視域的左右上下近遠六個範圍。正交相機的視域是立方體
camera2.position.set(30,0,25);
// 建立渲染並設定大小 指定渲染canvas物件
var renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#cc")
});
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
//建立一個xyz座標軸，方便初學者理解三維座標
var axes = new THREE.AxesHelper(20);
scene.add(axes);
//建立網格模型
var sphereGeometry = new THREE.CubeGeometry(10, 20, 20);//我們就建立個立方體。
var material = new THREE.MeshBasicMaterial ({color:Math.random()*0xffffff})//基礎材質
var cube = new THREE.Mesh(sphereGeometry,material)
scene.add(cube)
//設定相機位置
camera1.position.set(-30,40,30);
camera1.lookAt(scene.position);
// 執行一次渲染器，GPU渲染成影象，繪製到canvas裡面呈現
const draw = function(){
requestAnimationFrame(draw)//不斷繪製
renderer.render(scene, camera1);//透視相機渲染
//renderer.render(scene, camera2);//正交相機渲染
cube.rotation.y+=0.01//網格模型旋轉
}
draw()
</script>
</body>
</html>