3D世界中的“眼睛”（1） ---照相機

姘擱『發布于2019-08-21 10:38 / 3372人閱讀

摘要：但是對于的世界，僅僅依靠自己的眼睛還是不夠，因為其中存在的面是無窮無盡的，所以我們需要一只特殊的眼睛照相機，來幫助我們瀏覽世界。

3D世界中的“眼睛”（1） ---照相機

相信很多人都看過微軟2015開發者大會，其中有一段講解window holographic讓我覺得特別驚訝，我一直以為虛擬投影暫時還是人們幻想中的一種技術，現在確實是展示在我面前，也讓我有一種想要弄懂其中奧秘的激情。從2D到3D的視覺轉換到底有什么不同呢？作為一名菜鳥級別的前端開發者，我決定從Three.js方面入手，去理解3D世界的構成。

相對于2D的網頁，我們可以僅僅依靠我們自己的眼睛來瀏覽頁面。但是對于3D的世界，僅僅依靠自己的眼睛還是不夠，因為其中存在的“面”是無窮無盡的，所以我們需要一只特殊的眼睛“照相機”，來幫助我們瀏覽3D世界。

在講解相機之前，我們需要給3D的世界來一個定位，在2D頁面中，我們一般會將頁面的左上角作為一個原點，這樣一來，整個頁面都可以通過X、Y來定位，同樣的3D也是這樣，下圖為3D世界的坐標定位。

以下內容會涉及到具體代碼的實現，如果有讀者只想了解相機的原理，那么可以直接跳到最后一段的總結上面。

正交投影照相機

正交投影相機的效果比較直觀，相當于三視圖中的主（正）視圖，由6個參數和相機定位決定相機的位置和可視區域，其中(right-left)代表相機的寬度，(top-bottom)代表相機的高度，near代表相機的最近點，far代表相機的最遠點。其代碼設置如下：

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

效果圖如下，其中灰色部分代表可視區域，可視區域代表你能看到的地方。

基本設置

設置相機的基本屬性:

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

在原點位置創建邊長為1的正方體，使用wireframe作為透視觀察。

var geometry = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    })
);
scene.add(geometry);

最后得到的效果如下，這里我們只看到一個矩形，是因為生成的正方體默認在于原點，相機初始化的位置在(0,0,5)，鏡頭默認對向-Z軸，這樣一來的話，相當于看到正方體的一個側面，也就是主視圖。

假如將相機的near屬性變為6，此時的正方體將超出相機的可視區域，效果如下

長寬比例的影響

這里相機的寬度和高度分別是4和3，假如將寬度設置為2，即

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

得到的效果圖如下：

可以看到水平方向被拉大

位置的影響

之前相機設置在(0,0,5)的位置，由于相機是默認面向-Z軸，可以看到正方體，假如將相機往右平移1個單位，得到效果如下：

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

可以看到物體向左平移了，其實這個也不難理解，就好像一個相對運動的原理一樣，你往右走，對于物體來講，實際是往左移動。

同樣的我們可以將相機默認的6個參數(-2, 2, 1.5, -1.5, 1, 10)改變為(-1, 3, 1.5, -1.5, 1, 10)，通過觀察，可以發現和上圖的效果是一樣的。也說明了left、right和top、bottom的數值只決定相機的寬度和高度，一般寬度和高度的比例和渲染區域的寬高比例是一致的，不然會出現壓縮或者拉伸的現象。

改變觀察角度

為了能觀察到整個立方體的結構，將相機的位置設為(4, -3, 5)，由于相機默認拍攝的方向是Z的負軸，此時是觀察不到立方體，我們可以設置相機，讓它指定原點進行拍攝

camera.position.set(4, -3, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));

效果如下：

需要注意的是lookAt接受的是THREE.Vector3的實例，不能直接設置camera.lookAt(0, 0, 0)，不然無法得到理想中的結果。

透視投影照相機

創建代碼如下：

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

fov，代表豎直方向的張角（角度制）。
aspect，代表水平長度和豎直長度的比值（一般是渲染區域的長和寬）。
near，代表拍攝的最近距離。
far，代表拍攝的最遠距離。

基本設置

創建透視投影照相機代碼：

var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);
camera.position.set(0, 0, 5);
scene.add(camera);

創建邊長為1的正方體：

var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    })
);
scene.add(cube);

得到的效果：

豎直方向張角的比例

將原來相機豎直張角45改成60，得到的效果圖如下：

可以看到，得到的物體變小，原因是因為其張角變大，導致可視區域變大，相對于物體來說就變小。

位置影響

將相機所在的位置向右平移一位，代碼設置和效果圖如下，為了結果更加清晰，取消透視。

var camera = new THREE.PerspectiveCamera(45, 1000 / 1000, 1, 10);
camera.position.set(1, 0, 5);
scene.add(camera);

var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: false
    })
);

可以從結果上面看出，物體向左平移了，原理和正交相機一樣，不同的就是，物體旋轉了一定的角度，但是正交投影相機并沒有旋轉。原因是因為正交投影相機“觀察”物體的原理其實就是平行投影，而透視投影照相機的成像原理是透視投影。

總結

由于筆者文筆水平有限，可能有人看到這里還是不明白相機的作用，舉個簡單的例子，假如你面前有一個立方體，那么無論你怎么去旋轉這個立方體，你最多就只能看到3個面，而無法看到背面，這時候我們就需要一個特殊的“眼睛”，來幫助我們觀察立方體的背面，而相機就是用來做這種事情的。下面有一些筆者自己寫的demo演示，沒有什么特別酷炫的效果：)。

http://ol.weixin.qq.com/protect/users/shijiezou/three/spreads.html

http://ol.weixin.qq.com/protect/users/shijiezou/three/earth.html

http://ol.weixin.qq.com/protect/users/shijiezou/three/audio.html
(上傳音頻文件，基本功能實現了，但是還沒做優化)

相關資料：
官方文檔
中文資料

云服務器 GPU云服務器保護眼睛眼睛神秘的眼睛眼睛的顏色

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85918.html

帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素?？勺杂赊D載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

Panda 2019-08-29 11:03 評論0 收藏0
帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素?？勺杂赊D載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

archieyang 2019-08-01 15:32 評論0 收藏0
比人眼更精準，詳解云識客雙目活體檢測技術

摘要：雙活體，依然是前最可靠的防攻擊段之。詳解云識客活體檢測技術以下，我們分析一種多重人臉區域共享的深度學習算法。光流法輔助單目活體判斷最后，針對單目活體，云識客也采用光流法輔助活體判斷的校驗機制。以下這張照?，是真?實拍還是對著照?翻拍的？ showImg(https://segmentfault.com/img/bVbuoHD); 如果告訴你，這張照?，是對著照?翻拍的照?，你會不會驚...

whidy 2019-07-31 10:37 評論0 收藏0
CSS3 變換

摘要：概覽變換也叫轉換，主要包括以下幾種旋轉扭曲縮放和移動以及矩陣變形。變換沒有扭曲操作，有移動，旋轉，縮放。三，取消的變換，將變換應用到上并置于縮放前，改變縮放值，沒有任何變化。概覽 CSS3 變換也叫 2D/3D轉換，主要包括以下幾種：旋轉(rotate) 、扭曲 (skew) 、縮放(scale) 和移動(translate) 以及矩陣變形(matrix) 。transform ...

wayneli 2019-08-28 18:22 評論0 收藏0
css3 做一個類似于翻書特效的3D動畫

摘要：我們來看下做一個動畫需要哪些東西。說明各個屬性的作用代表物體距離瀏覽器是。下面我們做一個向下翻頁的數字，和一個向做翻頁的數字。我們來看下做一個css3 3D動畫需要哪些東西。前面我們已經使用transition和transform做了一些簡單的操作。設置3D場景做3D動畫，我們首先要設置3D場景。3D場景我們通常用perspective和perspective-origin兩個屬...

jiekechoo 2019-08-29 16:41 評論0 收藏0