? ? ? ?為了更好的理解camera的position、lookAt與up屬性，文章最開始我們先來闡述three.js的坐標(biāo)系轉(zhuǎn)換的概念。

1.監(jiān)聽event的事件獲得屏幕坐標(biāo)

? ? ? ?文章的最開始首先討論在哪里進(jìn)行點(diǎn)擊事件的監(jiān)聽的問題，當(dāng)鼠標(biāo)觸發(fā)點(diǎn)擊事件時(shí)，event會(huì)輸出點(diǎn)擊位置相對于各個(gè)參考系所產(chǎn)生的坐標(biāo)，在此我們只討論常用的offsetX、offsetY以及clientX、clientY。

offsetX：設(shè)置或獲取鼠標(biāo)點(diǎn)擊位置相對于觸發(fā)事件對象（觸發(fā)事件DOM的內(nèi)部不包含border）的水平（X）距離
offsetY：設(shè)置或獲取鼠標(biāo)點(diǎn)擊位置相對于觸發(fā)事件對象（觸發(fā)事件DOM的內(nèi)部不包含border）的垂直（Y）距離

clientX：設(shè)置或獲取鼠標(biāo)相對于瀏覽器可視區(qū)域的水平坐標(biāo)? ??
clientY：設(shè)置或獲取鼠標(biāo)相對于瀏覽器可視區(qū)域的垂直坐標(biāo)? ??

? ? ?如圖（1）示，window中（clientX，clientY）都是相對于左上角坐標(biāo)原點(diǎn)的距離，而（offsetX，offsetY）中觸發(fā)事件的對象這個(gè)概念就很重要,是相對于當(dāng)前DOM元素不包含border及其外部的content部分左上角原點(diǎn)坐標(biāo)，如果在展示界面存在header，（clientX，clientY）還需要轉(zhuǎn)換才能作為畫布的坐標(biāo)，所以推介選?。╫ffsetX，offsetY）作為監(jiān)聽事件獲得的坐標(biāo)。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（1）不同坐標(biāo)數(shù)據(jù)展示

? ? ? ? ?如果展示模型的畫布如果是整個(gè)可視頁面，監(jiān)聽window得到的坐標(biāo)（clientX，clientY）與（offsetX，offsetY）都是一致的。但往往我們只會(huì)選擇一個(gè)區(qū)域進(jìn)行三維模型的展示，?這時(shí)若監(jiān)聽對象為window，就會(huì)在畫布外觸發(fā)點(diǎn)擊事件，容易產(chǎn)生不必要的問題。所以此時(shí)最好把監(jiān)聽對象設(shè)置為存放畫布的DOM元素，不僅在畫布外不會(huì)觸發(fā)不必要的事件，并且可以直觀的獲得該點(diǎn)相對于畫布的坐標(biāo)。

element.addEventListener('click',()=>{})
window.addEventListener('click',()=>{})

? ? ?

2 屏幕坐標(biāo)、標(biāo)準(zhǔn)化設(shè)備坐標(biāo)與世界坐標(biāo)的相互轉(zhuǎn)換

這里我們先拋出屏幕坐標(biāo)、標(biāo)準(zhǔn)化設(shè)備坐標(biāo)與世界坐標(biāo)的概念。

2.1 概念：

屏幕坐標(biāo)：以左上角為原點(diǎn)，橫向?yàn)閤軸，縱向向下為y軸；屏幕坐標(biāo)系在three.js中為canvas畫布的坐標(biāo)系，如圖（2）示

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（2）屏幕坐標(biāo)系

標(biāo)準(zhǔn)化設(shè)備坐標(biāo)(NormalizedDeviceCoordinates,NDC) ：標(biāo)準(zhǔn)化設(shè)備坐標(biāo)是一個(gè)橫縱坐標(biāo)值在-1到1的一小段空間，坐標(biāo)原點(diǎn)位于區(qū)域正中心。如圖（3）示

??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（3）標(biāo)準(zhǔn)化設(shè)備坐標(biāo)系

世界坐標(biāo)：場景坐標(biāo)原點(diǎn)坐標(biāo)系，世界坐標(biāo)是物體相對場景坐標(biāo)原點(diǎn)的位置，如圖（4）示

???? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（4）世界坐標(biāo)系

2.2 屏幕坐標(biāo)系轉(zhuǎn)世界坐標(biāo)系

首先我們了解如何從屏幕坐標(biāo)系轉(zhuǎn)化為標(biāo)準(zhǔn)化設(shè)備坐標(biāo)系，最后轉(zhuǎn)化為世界坐標(biāo)系的過程?。

step 1:

當(dāng)鼠標(biāo)在canvas畫布上點(diǎn)擊時(shí)，獲得屏幕坐標(biāo)系（Sx，Sy），將其轉(zhuǎn)化為（?Nx，Ny），可得

?

轉(zhuǎn)化為代碼就是

const x = (x / Width) * 2 - 1,

const y = - (y /Height) * 2 + 1,

step 2:?

將得到的設(shè)備坐標(biāo)轉(zhuǎn)化為三維向量；

const nVector = new THREE.Vector3((x / Width) * 2 - 1,- (y /Height) * 2 + 1,0.5) 

step 3:?

?three.js有封裝好的方法.unporject( ),將設(shè)備坐標(biāo)轉(zhuǎn)為世界坐標(biāo)系；

const worldVector = nVector.unprojet( camera )

?2.2世界坐標(biāo)系轉(zhuǎn)屏幕坐標(biāo)系

? ? ? ? 同上可得

?step1:

?將世界坐標(biāo)系轉(zhuǎn)化為標(biāo)準(zhǔn)坐標(biāo)系

const nVector = worldVector .projet( camera )

step2:

將標(biāo)準(zhǔn)坐標(biāo)系轉(zhuǎn)化為屏幕坐標(biāo)系，公式為

3 camera的position、lookAt與up屬性

3.1camera的position

.position:Vectors

?表示對象局部位置的Vector3。默認(rèn)值為(0, 0, 0)

? ? ? ?官方文檔的解釋很容易理解，就是相機(jī)相對于世界坐標(biāo)系原點(diǎn)的位置，換句話說相機(jī)距離場景中心的距離。距離越近看到的物體越少越大，距離越遠(yuǎn)看到的物體越多越小。設(shè)置一個(gè)合適的位置對于觀察場景內(nèi)模型具有很重要的意義。

???? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（5）相機(jī)看向物體

3.2 .lookAt

object3D.lookAt?( vector:Vector3) :undefined object3D.lookAt( x :?Float, y :?Float, z :?Float?) :undefined

vector - 一個(gè)表示世界空間中位置的向量。

也可以使用世界空間坐標(biāo)的位置分量。
旋轉(zhuǎn)物體使其在世界空間中面朝一個(gè)點(diǎn)。

這一方法不支持其父級被旋轉(zhuǎn)過或者被位移過的物體。

? ? ? ?也就是說，這個(gè)object的永遠(yuǎn)朝向 .lookAt( )?中向量的位置，如果在創(chuàng)建object時(shí)使用這個(gè)屬性，就會(huì)產(chǎn)生構(gòu)建的物體總是會(huì)朝向向量的方向，圖（6）示為raycaster射線射中返回的數(shù)據(jù)，借由這些數(shù)據(jù)和。lookAt（）方法，我們可以完成很多有趣的功能，例如在物體表面形成數(shù)據(jù)點(diǎn)，或者構(gòu)建垂直于當(dāng)前面的線等等。

????? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（6）相機(jī)看向物體

? ? ? ?而相機(jī)的這個(gè)屬性可以理解為”看向“哪里，只有保證視角中出現(xiàn)這個(gè)對象，我們才能通過畫布看到。在渲染場景時(shí)，通常都是將相機(jī)看向場景的原點(diǎn)，以此來保證可視界面的完整，我們也可以把相機(jī)放置在場景中移動(dòng)的物體上，設(shè)置看向某個(gè)方向，借此完成動(dòng)態(tài)巡檢等功能。

3.3?up

.up:Vector3

這個(gè)屬性由lookAt方法所使用，例如，來決定結(jié)果的朝向。 默認(rèn)值是Object3D.DefaultUp,

即( 0, 1, 0 )

? ? ? ?通過前面闡述的世界坐標(biāo)系概念可知，這個(gè)”結(jié)果的朝向“指的是場景的坐標(biāo)系的朝向，默認(rèn)的朝向?yàn)閅軸向上，X軸向右，Z軸向外，那么我們設(shè)置這個(gè)值會(huì)得到什么？

a.設(shè)置Y軸向上

? ? ? 換句話說，就是哪個(gè)方向是向上的，設(shè)置.up為（0，1，0），就可以得到圖（7）的樣式，Y軸向上，X軸向右，Z軸向外。

camera.position.set(1,30,60)

camera.lookAt(0,0,0)

camera.up = new THREE.Vector3(0,1,0) 

?????? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（7）Y軸向上

b.設(shè)置Y軸向上

? ? ? ?那么，設(shè)置.up為（1，0，0），就可以得到圖（8）的樣式，x軸向上，X軸向坐，Z軸向外。

camera.position.set(1,30,60)

camera.lookAt(0,0,0)

camera.up = new THREE.Vector3(1,0,0) 

?????? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（8）X軸向上

c.設(shè)置Z軸向上

? ? ? ? ?設(shè)置.up為（0，0，1）時(shí)，就可以得到圖（9），由圖可知Z軸向外，那么為什么Z軸沒有向上？通過圖（10）可以知道相機(jī)的位置在Z軸正半軸，看向Z軸的負(fù)半軸，改變.up()的值，相機(jī)的位置也是在跟隨著一起移動(dòng)，所以得到如圖所示的結(jié)果。

camera.position.set(1,30,60)

camera.lookAt(0,0,0)

camera.up = new THREE.Vector3(1,0,0) 

?????? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖（9）Z軸向上

文章來源地址http://www.zghlxwxcb.cn/news/detail-430234.html

到了這里，關(guān)于three.js中坐標(biāo)系轉(zhuǎn)換以及camera的position、lookAt與up屬性理解的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！