Three.js獲取鼠標(biāo)點(diǎn)擊的三維坐標(biāo)示例代碼
由于工作需要,但是對(duì)于three.js又是一竅不通,網(wǎng)上的資料又很少,所以上來(lái)就讓我獲取坐標(biāo),真是一個(gè)頭兩個(gè)大。好歹最后終于實(shí)現(xiàn)了。
既然已經(jīng)是想要獲取鼠標(biāo)點(diǎn)擊的三維坐標(biāo)了,相信你camera對(duì)象和scene都已經(jīng)有了,如果不了解的小伙伴,可以先去看一下這兩個(gè)對(duì)象。這里主要說(shuō)一下怎么獲取到三維坐標(biāo),原理性的東西不提。上代碼:
function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3();//三維坐標(biāo)對(duì)象 vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); vector.unproject( camera ); var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { var selected = intersects[0];//取第一個(gè)物體 console.log("x坐標(biāo):"+selected.point.x); console.log("y坐標(biāo):"+selected.point.y); console.log("z坐標(biāo):"+selected.point.z); }
我理解的就是鼠標(biāo)點(diǎn)擊的時(shí)候屏幕收到的是二維坐標(biāo),這個(gè)二維坐標(biāo)和相機(jī)連線,在視角的方向上延伸,形成一條射線,這條射線會(huì)和場(chǎng)景中的物體相交,接收這些相交的所有物體,第一個(gè)物體就是離相機(jī)最近的,最后一個(gè)就是離相機(jī)最遠(yuǎn)的。一般就把第一個(gè)相交的物體作為鼠標(biāo)點(diǎn)擊的物體。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Three.js實(shí)現(xiàn)簡(jiǎn)單3D房間布局
- three.js實(shí)現(xiàn)3D模型展示的示例代碼
- three.js實(shí)現(xiàn)3D影院的原理的代碼分析
- Three.js開(kāi)發(fā)實(shí)現(xiàn)3D地圖的實(shí)踐過(guò)程總結(jié)
- 利用three.js畫(huà)一個(gè)3D立體的正方體示例代碼
- three.js實(shí)現(xiàn)3D視野縮放效果
- three.js中3D視野的縮放實(shí)現(xiàn)代碼
- Three.js的使用及繪制基礎(chǔ)3D圖形詳解
- Three.js源碼閱讀筆記(Object3D類)
- Three.JS實(shí)現(xiàn)三維場(chǎng)景
相關(guān)文章
解析為什么axios會(huì)有params和data兩個(gè)參數(shù)
本文給大家分享為什么axios會(huì)有params和data兩個(gè)參數(shù),先來(lái)回顧一下axios的基本使用,怎么發(fā)送一個(gè)請(qǐng)求,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2023-10-10微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的canvas合成圖片功能,結(jié)合實(shí)例形式分析了微信小程序canvas合成圖片相關(guān)組件使用、操作步驟與注意事項(xiàng),需要的朋友可以參考下2019-05-05Echarts圖表分析巴西隊(duì)歷年戰(zhàn)績(jī)實(shí)例詳解
這篇文章主要為大家介紹了Echarts圖表分析巴西隊(duì)歷年戰(zhàn)績(jī)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12概述javascript在Google IE中的調(diào)試技巧
本篇文章主要是對(duì)javascript在Google IE中的調(diào)試技巧進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下2016-11-11JavaScript學(xué)習(xí)筆記之獲取當(dāng)前目錄的實(shí)現(xiàn)代碼
用來(lái)獲取當(dāng)前目錄的js代碼,需要的朋友可以參考下,主要利用了split函數(shù)。2010-12-12JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對(duì)頁(yè)面TextArea元素焦點(diǎn)設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08