camera

上篇大致了解了three.js ，并可以創(chuàng)建一個簡單的可動的立方體。下來我們著重了解下camera （照相機），照相機其實就是視角，就像你的眼睛。Three.js有兩種不同的相機模式:直角相機(OrthographicCamera)和透視相機(PerspectiveCamera),最好的方式去理解這兩個照相機的不同是－用你的眼睛去觀察它們。

透視相機

下圖是透視相機的投影

構(gòu)造函數(shù)

THREE.PerspectiveCamera(fov, aspect, near, far)

實例

var camera = new THREE.PerspectiveCamera(45, 400 / 300, 0.1, 1000);

透視相機參數(shù)解析

參數(shù)描述

Fov	視野-這是從相機這個位置可以看到的場景，正如我們?nèi)祟悗缀蹩梢钥吹?80堵角的視角范圍，當然有些鳥類可以看到360度，但是對于計算機我們通常可用的是60-90度之間的視野
Aspect	寬高比指的是我們渲染器輸出的區(qū)域的寬度與高度的比例，通常我們只使用整個屏幕的寬高度的這一比例，寬高比決定了不同的水平視野和垂直視野的效果就想你看到的上圖那樣，通常的值為 window.innerWidth / window.innerHeight
Near	這個屬性定義了渲染的場景距離相機最小的距離，這是一個非常小的值，比如0.1
Far	這個屬性定義了一個在相機這個位置可以看到的被渲染的場景的最遠的距離，如果這個值我們設(shè)置的太低，那么渲染的場景的一部分可能我們就不能看到，如果我們設(shè)置的太高，在某些情況下可能會影響渲染性能，通常的值在500-2000之間

直角相機

下圖是直角投影相機

構(gòu)造函數(shù)

THREE.OrthographicCamera(left, right, top, bottom, near, far)

實例

var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);

直角相機參數(shù)

參數(shù)描述

left	相機視錐左側(cè)面 －你看到左邊界呈現(xiàn)的什么，如果我們把這個值設(shè)置為－100，那么你不會看到在左邊看到任何東西
right	相機視錐右側(cè)-任何遠離右邊這一值的都不會渲染
top	相機視錐頂部-頂骨渲染位置
bottom	相機視錐底部-底部渲染位置
near	相機視錐近部-從這個點，基于相機，場景將開始渲染
far	相機視錐遠部分-到這個點，基于相機，場景將被渲染

如你所看到的 ，如果我們用直角相機，所有的元素的尺寸大小都是相同的，不管距離，這種相機類型將用于老的2D游戲（如下圖）

現(xiàn)在我們看看相機是如何工作的

為了達到更好的視覺效果，我們通常使用透視相機，她更像是真實世界，如果你想嘗試一個Demo，下面是相機切換的一個函數(shù)

this.switchCamera = function() { if (camera instanceof THREE.PerspectiveCamera) { camera = new THREE.OrthographicCamera( window.innerWidth / - 16, window.innerWidth / 16,window.innerHeight / 16, window.innerHeight / - 16, -200, 500 ); camera.position.x = 2; camera.position.y = 1; camera.position.z = 3; camera.lookAt(scene.position); this.perspective = "Orthographic"; } else { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 120; camera.position.y = 60; camera.position.z = 180; camera.lookAt(scene.position); this.perspective = "Perspective"; } };

當我們切換相機，我們通常需要把相機集中到確定的位置，由 lookAt 函數(shù)來完成

camera.lookAt(new THREE.Vector3(x,y,z));

翻譯與參考文章
https://www.script-tutorials.com/webgl-with-three-js-lesson-9/
http://www.ituring.com.cn/article/49446

總結(jié)

以上是生活随笔為你收集整理的网页3D效果库Three.js学习[二]-了解照相机的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。