1. 程式人生 > >THREE.js-照相機(Camera)

THREE.js-照相機(Camera)

既然是通過相機來渲染場景,那麼沒有相機,我們也就什麼看不到了。THREE.js中提供了Camera類對相機這個角色進行抽象。相機將三維的場景投影到二維的螢幕,根據投影的方式不同,THREE.js中提供了幾種不同型別的相機。
戳這裡檢視正交投影和透視投影的投影效果

正交投影與透視投影

正交投影
透視投影

我們先從上面的兩種圖來理解正交投影與透視投影,我覺得我們可以把正交投影理解為到面的投影,投影線垂直於投影面進行投影,因此物體投影之後的比例是保持不變的。而對於透視
投影我們可以理解為到點的投影,所有的投影線最後都將匯聚於一點,透視投影的特點就是近大遠小。

學習Camera之前我們先了解一下THREE.js中使用的座標系。THREE.js使用的是右手座標系,想象一下右手握空心拳,手指完全的方向就是從x軸到y軸的方向,而z軸則垂直於手指彎曲的方向從
拳頭中心穿過。

正交投影相機OrthographicCamera

建構函式

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

在上面正交投影的圖中,我們想象一樣,相機所在的地方有個平面,而相機所在的地點預設是平面的中心點。
那麼:left就是視錐左側面,right就是視錐右側面,top就是視錐上側面,而bottom就是視錐下側面。
near是到距離相機較近的那一面的距離,far是離距離相機較遠的那一面的距離,這六個投影面圍成的區域就是相機投影的可見區域。
三維空間內,只有在這個區域內的物體才會被相機看到。

例項說明

camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5);

var cubeGeometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({
    color : 0xff0000,
    wireframe : true
})

var cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);
renderer.render(scene, camera);

首先我們例項化一個相機正交相機物件,相機的預設座標是原點,和立方體重疊無法看到立方體,這裡我們設定一下相機的座標(x,y,z)=(0,0,5)。
正交投影
採用正交投影的時候,我們發現立方體的前端完全被後端遮蓋了,這就是正交投影和透視投影的區別,如果使用透視投影,那麼根據近大遠小的原則,靠近攝像機的一端的投影面積小於遠離相機一端的投影面積。

長寬比例

但是這裡有一個很奇怪的問題,命名建立的是一個長度為1的正方體,為啥投影是長方體?這裡canvas面板的長寬比是2:1,但是相機的(right-left)/(top-bottom)比例是4:3,因此
垂直方向上面被壓縮了,所以顯示的是一個長方體。

將(right-left)/(top-bottom)的比例同樣調整為2:1

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

正交投影

相機位置

相機預設的座標位置是(0,0,0),上面的例子中我們把相機的座標設定為(0,0,5),即z軸上面。現在我們來移動相機的位置看看投影出來的立方是什麼樣子的。

camera.position.set(1, 0, 5)

在x軸方向把相機右移1個單位

發現相對於畫面中心,立方體往左移動了一個單位,很容易理解這裡的主體是相機,相機右移,那麼立方體相對於相機不就是左移了麼?

camera.position.set(2, -2, 5);

把相機挪動到立方體的下方?這個時候鏡頭裡面一片漆黑,看不到立方體了。因為鏡頭預設的方向是朝著z軸的負方向,我們讓它朝著原點即可。

camera.lookAt(new THREE.Vector3(0,0,0));

透視投影相機(PerspectiveCamera)

建構函式

PerspectiveCamera(fov, aspect, near, far)
- fov 可視角度
- aspect 為width/height,通常設定為canvas元素的高寬比。
- near近端距離
- far遠端距離
只有離相機的距離大於near值,小於far值,且在相機的可視角度之內,才能被相機投影到。

例項說明

renderer = new THREE.WebGLRenderer();
renderer.setSize(400,300);
document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, 4/3, 1, 10000);

camera.position.set(0,0,5);
var mess = new THREE.Mesh(new THREE.CubeGeometry(1,1,1), new THREE.MeshBasicMaterial({
    color : 0xff0000,
    wireframe : true
}));

scene.add(mess);
renderer.render(mess, camera);

透視投影相機

改變視角大小

camera = new THREE.PerspectiveCamera(60, 4/3, 1, 10000);


我們把視角由45度變為60度,發現立方體變小了,很容易理解,視角變大之後,可以看到的範圍變大了,但是立方體本身的大小沒有變,那麼相對於整個投影來說,立方體就變小了,不信你把眼睛睜大最大試試( ̄▽ ̄)”。

相關推薦

THREE.js-照相機Camera

既然是通過相機來渲染場景,那麼沒有相機,我們也就什麼看不到了。THREE.js中提供了Camera類對相機這個角色進行抽象。相機將三維的場景投影到二維的螢幕,根據投影的方式不同,THREE.js中提供了幾種不同型別的相機。 戳這裡檢視正交投影和透視投影的投影效

如何使用ES6開發Three.js專案

如何使用ES6開發Three.js專案(二) 之前寫過一篇文章如何使用ES6開發Three.js專案(一),這次再完善一下,並把程式碼放在GitHub上了。 three.js-es6-webpack 基於ES6開發的three.js演示專案 專案目錄: pub

three.js學習3:匯入threejs

1.在HTML中匯入: 2.用js中匯入: (1)當你的檔案中內建的有一些匯入工具像Webpack或Browserify,你可以用 var THREE = require("three"); var scene = THREE.Scene(); (2)使用ES6的語法形式(如果

three.js學習2:Scene

scene是場景,裡面能放置物件(Objects)、燈光(Lights)、攝像機(Cameras)等。 1.建立場景: Scene() 2.場景的屬性: 》》》fog(霧): 。。。建立fog: 。。。。。。(1).fog(color:int, near:float, far:float)

three.js學習1

1.three.js是: three.js是用JavaScript編寫的WebGL第三方庫。官網(www.threejs.org) 2.three.js功能: three.js 是一款執行在瀏覽器中的 3D 引擎,你可以用它建立各種三維場景,包括了攝影機、光影、材質等各種物件。 3.thre

three.js學習4:相機

相機的型別 1.CubeCamera(立方體相機) 建立6個攝像機,將他們所拍攝的場景渲染到WebGLRenderTargetCube上。 (1)建構函式: CubeCamera(near:number, far:number, cubeResolution:n

three.js學習5:Renderer

Renderer渲染器的工作是用來將物體繪製到螢幕上。 1.WebGLRenderer (1)建構函式: WebGLRenderer(parameters:object) –parameters–(可選引數)定義渲染器的行為。 –canvas–提供一個渲染器繪製

學習Three.js——場景Scene

建構函式 var scene = new THREE.Scene() 方法 add(object):向場景中新增物件 remove(object):向場景中刪除物件 getObjectByName(name,recursive):根據name查詢指定的物件,recursive為false時,

THREE.js-幾何體Geometry

這裡將Geometry理解為幾何體不知道是否合適。前面的例子中我們用到過BoxGeometry來建立一個立方體。除了BoxGeometry之外Three.js還提供了很多拆箱即用的幾何體,例如:圓形(CircleGeometry)、柱體(CylinderGeom

three.js 幾何體

上一篇簡單的介紹了幾何體的構造體引數,這一篇郭先生就更加詳細的說一說(十分簡單的幾何體我就不說了)。 1. ShapeGeometry形狀幾何體 形狀幾何體方便我們從一個或多個路徑形狀中建立一個單面多邊形幾何體,和canvas一樣都是二維圖形。下面我們只做一顆心形。 var shape = new THR

three.js 幾何體

上一篇介紹了幾何體的構造體引數,這篇郭先生就接著上一篇說。 1. ExtrudeGeometry擠壓幾何體 擠壓幾何體允許我們從一條形狀路徑中,擠壓出一個Geometry。ExtrudeGeometry有兩個引數,第一個引數是一個圖形,第二個引數是它的配置 var shape = new THREE.Sh

js動畫速度

fun esc move keywords nload desc func cache scale <!DOCTYPE html><html><head><meta charset="utf-8" /><meta htt

方便大家學習的Node.js教程:理解Node.js

圖形 -1 iter pri attribute set run 相對 mage 理解Node.js 為了理解Node.js是如何工作的,首先你需要理解一些使得Javascript適用於服務器端開發的關鍵特性。Javascript是一門簡單而又靈活的語言,這種靈

js 技巧

rds length msxml ica byte ebo oca recordset next //下載文件 function DownURL(strRemoteURL,strLocalURL) { try { var xmlHTTP=new ActiveXObjec

js 技巧 廣告JS代碼效果大全 【3】

lpad log gid cond absolute dex offset ima disable 3.[允許關閉] 與前面兩個代碼不同的是,廣告圖下方增加了一個圖片按紐,允許訪客點擊關閉廣告圖片,下面文本框中就是實現效果所需代碼: var delta=0.015;

JS筆記:隱式轉換

-1 筆記 總結 img 轉換 隱式轉換 基礎 blog com 最近剛開始復習JS的基礎知識,看到隱式轉換這一塊,發現它的規則很多,紅寶書上列出的框框又有些冗雜,所以這裏我借一個式子總結一下其中的規律以及一些有趣的現象。 JS筆記(二):隱式轉換

JS基礎運算符

訪問 數據 js基礎 必須 減法 delete 異或 函數 按位與 一.比較運算符   1.== : 判斷兩邊值是否相等   2.>= : 判斷左邊的值是否大於或等於右邊的值   3.<= : 判斷左邊邊的值是否小於或等於右邊的值   4.> : 判斷

JS基礎語句

pre 對比 初始化 語句 for 如果 logs 如何 tin 一.判斷語句(PS:一般情況下判斷條件最終應該是一個布爾值。)   1.if語句     1)基本格式 if(判斷條件){ 如果判斷條件成立則執行的語句 }else{ 如果判斷條件不成立則執

JS學習

round 進入 跳過 color ole back ++ 代碼 define JS中的循環結構 【循環結構的執行步驟】 1、聲明循環變量; 2、判斷循環條件; 3、執行循環體操作; 4、更新循環變量; 然後,循環執行2~4,知道條件不成立

JS基礎自定義函數

調用函數 pre 基礎 clas 自定義 語句 ... 全局 blog 作用:是為了讓重復使用的語句,方便進行調用。 定義格式: function 自定義函數名 (參數1, 參數2,...) { 執行的語句 } 函數的封裝:把語句放到函數中去的過程。 參數:通過