Three.js獲取鼠標點擊的三維坐標示例代碼
更新時間：2017年03月24日 17:18:55 作者：關注來哈爾濱請你吃鍋包肉
本篇文章主要介紹了Three.js獲取鼠標點擊的三維坐標示例代碼。具有一定的參考價值，感興趣的小伙伴們可以參考一下。
由于工作需要，但是對于three.js又是一竅不通，網(wǎng)上的資料又很少，所以上來就讓我獲取坐標，真是一個頭兩個大。好歹最后終于實現(xiàn)了。
既然已經(jīng)是想要獲取鼠標點擊的三維坐標了，相信你camera對象和scene都已經(jīng)有了，如果不了解的小伙伴，可以先去看一下這兩個對象。這里主要說一下怎么獲取到三維坐標，原理性的東西不提。上代碼：
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3();//三維坐標對象
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];//取第一個物體
console.log("x坐標:"+selected.point.x);
console.log("y坐標:"+selected.point.y);
console.log("z坐標:"+selected.point.z);
}
我理解的就是鼠標點擊的時候屏幕收到的是二維坐標，這個二維坐標和相機連線，在視角的方向上延伸，形成一條射線，這條射線會和場景中的物體相交，接收這些相交的所有物體，第一個物體就是離相機最近的，最后一個就是離相機最遠的。一般就把第一個相交的物體作為鼠標點擊的物體。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了利用javascript實現(xiàn)獲取鼠標當前的位置的具體方法，具有很好的參考作用，需要的朋友可以看看2016-12-12
在TypeScript中若一個變量使用了聯(lián)合類型,那么當我們使用該變量時必不可少的會去明確的限制該變量的具體類型，這稱為類型縮小,這篇文章主要給大家介紹了關于TypeScript學習筆記之類型縮小的相關資料,需要的朋友可以參考下2022-09-09
js實現(xiàn)左側網(wǎng)頁tab滑動門效果代碼
這篇文章主要介紹了js實現(xiàn)左側網(wǎng)頁tab滑動門效果代碼,涉及JavaScript頁面元素的遍歷及元素屬性動態(tài)切換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了Mint-UI時間組件起始時間問題的解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了如何使用?JS?判斷用戶是否處于活躍狀態(tài),案例演示了如何獲取用戶活躍狀態(tài),時間閾值定為5秒,超出該閾值沒有操作表示非活躍,否則屬于正在活躍中,需要的朋友可以參考下2024-05-05
本文是上一篇文章《用js讀、寫、刪除Cookie代碼分享及詳細注釋說明》發(fā)現(xiàn)了些問題，進行分析解決，推薦給大家2014-12-12
BootStrap下的彈出框加載select2框架失敗的解決方法
本文通過簡單的代碼給大家介紹了BootStrap下的彈出框加載select2框架失敗的解決方法，需要的朋友參考下吧2017-08-08
用js+xml自動生成表格的東西...2006-12-12
javascript使用switch case實現(xiàn)動態(tài)改變超級鏈接文字及地址
這篇文章主要介紹了javascript使用switch case實現(xiàn)動態(tài)改變超級鏈接文字及地址,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄僯s實現(xiàn)頁面返回頂部的動畫(超簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08