成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

姘擱『 / 3377人閱讀

摘要：但是對(duì)于的世界，僅僅依靠自己的眼睛還是不夠，因?yàn)槠渲写嬖诘拿媸菬o(wú)窮無(wú)盡的，所以我們需要一只特殊的眼睛照相機(jī)，來(lái)幫助我們?yōu)g覽世界。

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

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

相對(duì)于2D的網(wǎng)頁(yè)，我們可以僅僅依靠我們自己的眼睛來(lái)瀏覽頁(yè)面。但是對(duì)于3D的世界，僅僅依靠自己的眼睛還是不夠，因?yàn)槠渲写嬖诘摹懊妗笔菬o(wú)窮無(wú)盡的，所以我們需要一只特殊的眼睛“照相機(jī)”，來(lái)幫助我們?yōu)g覽3D世界。

在講解相機(jī)之前，我們需要給3D的世界來(lái)一個(gè)定位，在2D頁(yè)面中，我們一般會(huì)將頁(yè)面的左上角作為一個(gè)原點(diǎn)，這樣一來(lái)，整個(gè)頁(yè)面都可以通過(guò)X、Y來(lái)定位，同樣的3D也是這樣，下圖為3D世界的坐標(biāo)定位。

以下內(nèi)容會(huì)涉及到具體代碼的實(shí)現(xiàn)，如果有讀者只想了解相機(jī)的原理，那么可以直接跳到最后一段的總結(jié)上面。
正交投影照相機(jī)

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

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

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

基本設(shè)置

設(shè)置相機(jī)的基本屬性:

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

在原點(diǎn)位置創(chuàng)建邊長(zhǎng)為1的正方體，使用wireframe作為透視觀察。

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

最后得到的效果如下，這里我們只看到一個(gè)矩形，是因?yàn)樯傻恼襟w默認(rèn)在于原點(diǎn)，相機(jī)初始化的位置在(0,0,5)，鏡頭默認(rèn)對(duì)向-Z軸，這樣一來(lái)的話，相當(dāng)于看到正方體的一個(gè)側(cè)面，也就是主視圖。

假如將相機(jī)的near屬性變?yōu)?，此時(shí)的正方體將超出相機(jī)的可視區(qū)域，效果如下

長(zhǎng)寬比例的影響

這里相機(jī)的寬度和高度分別是4和3，假如將寬度設(shè)置為2，即

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

得到的效果圖如下：

可以看到水平方向被拉大

位置的影響

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

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


可以看到物體向左平移了，其實(shí)這個(gè)也不難理解，就好像一個(gè)相對(duì)運(yùn)動(dòng)的原理一樣，你往右走，對(duì)于物體來(lái)講，實(shí)際是往左移動(dòng)。

同樣的我們可以將相機(jī)默認(rèn)的6個(gè)參數(shù)(-2, 2, 1.5, -1.5, 1, 10)改變?yōu)?strong>(-1, 3, 1.5, -1.5, 1, 10)，通過(guò)觀察，可以發(fā)現(xiàn)和上圖的效果是一樣的。也說(shuō)明了left、right和top、bottom的數(shù)值只決定相機(jī)的寬度和高度，一般寬度和高度的比例和渲染區(qū)域的寬高比例是一致的，不然會(huì)出現(xiàn)壓縮或者拉伸的現(xiàn)象。

改變觀察角度

為了能觀察到整個(gè)立方體的結(jié)構(gòu)，將相機(jī)的位置設(shè)為(4, -3, 5)，由于相機(jī)默認(rèn)拍攝的方向是Z的負(fù)軸，此時(shí)是觀察不到立方體，我們可以設(shè)置相機(jī)，讓它指定原點(diǎn)進(jìn)行拍攝

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

效果如下：

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

透視投影照相機(jī)

創(chuàng)建代碼如下：

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

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

基本設(shè)置

創(chuàng)建透視投影照相機(jī)代碼：

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

創(chuàng)建邊長(zhǎng)為1的正方體：

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

得到的效果：

豎直方向張角的比例

將原來(lái)相機(jī)豎直張角45改成60，得到的效果圖如下：

可以看到，得到的物體變小，原因是因?yàn)槠鋸埥亲兇?，?dǎo)致可視區(qū)域變大，相對(duì)于物體來(lái)說(shuō)就變小。

位置影響

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

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
    })
);


可以從結(jié)果上面看出，物體向左平移了，原理和正交相機(jī)一樣，不同的就是，物體旋轉(zhuǎn)了一定的角度，但是正交投影相機(jī)并沒(méi)有旋轉(zhuǎn)。原因是因?yàn)檎煌队跋鄼C(jī)“觀察”物體的原理其實(shí)就是平行投影，而透視投影照相機(jī)的成像原理是透視投影。

總結(jié)

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


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
(上傳音頻文件，基本功能實(shí)現(xiàn)了，但是還沒(méi)做優(yōu)化)

相關(guān)資料：
官方文檔
中文資料

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85918.html

相關(guān)文章

  • 帶你玩轉(zhuǎn)css3的3D！

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

    Panda 評(píng)論0 收藏0

  • 帶你玩轉(zhuǎn)css3的3D！

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

    archieyang 評(píng)論0 收藏0

  • 比人眼更精準(zhǔn)，詳解云識(shí)客雙目活體檢測(cè)技術(shù)

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

    whidy 評(píng)論0 收藏0

  • CSS3 變換

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

    wayneli 評(píng)論0 收藏0

  • css3 做一個(gè)類似于翻書(shū)特效的3D動(dòng)畫(huà)

    摘要：我們來(lái)看下做一個(gè)動(dòng)畫(huà)需要哪些東西。說(shuō)明各個(gè)屬性的作用代表物體距離瀏覽器是。下面我們做一個(gè)向下翻頁(yè)的數(shù)字，和一個(gè)向做翻頁(yè)的數(shù)字。 我們來(lái)看下做一個(gè)css3 3D動(dòng)畫(huà)需要哪些東西。前面我們已經(jīng)使用transition和transform做了一些簡(jiǎn)單的操作。 設(shè)置3D場(chǎng)景 做3D動(dòng)畫(huà)，我們首先要設(shè)置3D場(chǎng)景。3D場(chǎng)景我們通常用perspective和perspective-origin兩個(gè)屬...

    jiekechoo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<