ThreeJS給模型繫結點選事件

2022-08-20 21:12:11 字數 1011 閱讀 6089

由於瀏覽器是乙個2d視口,而在裡面顯示three.js的內容是3d場景,所以,現在有乙個問題就是如何將2d視口的x和y座標轉換成three.js場景中的3d座標。好在three.js已經有了解決相關問題的方案,那就是three.raycaster射線,用於滑鼠拾取(計算出滑鼠移過的三維空間中的物件)。

我們一般都會設定三維場景的顯示區域,如果,指明當前顯示的2d座標給three.raycaster的話,它將生成一條從顯示的起點到終點的一條射線。也就是說,我們再螢幕上點選了乙個點,在three.js裡面獲取的則是一條直線。

滑鼠在螢幕上點選的時候,得到二維座標p(x, y),再加上深度座標的範圍(0, 1), 就可以形成兩個三位座標a(x1, y1, 0), b(x2, y, 1), 由於它們的z軸座標是0和1,則轉變到投影座標系的話,一定分別是前剪下平面上的點和後剪下平面上的點,也就是說,在投影座標系中,a點一定在能看見的所有模型的最前面,b點一定在能看見的所有的模型的最後邊,將ab點連成線,ab線穿過的物體就是被點選的物體。而 three.js提供乙個射線類raycasting來拾取場景裡面的物體。更方便的使用滑鼠來操作3d場景。(不過在實際**中我們組成射線的兩個點是攝像機所在視點與螢幕上點選的點連線而成的射線)

思路:先通過當前點選位置的座標和相機計算出raycaster線,然後計算出相交的所有模型,修改模型的紋理。

**實現:

var raycaster = new

three.raycaster()

var mouse = new

three.vector2()

function

onmouseclick(event)

}window.addeventlistener( 'click', onmouseclick, false );

jqury繫結點選事件

流程 1.事件繫結 2.事件觸發 場景 tr.audiotr a.play這兩個元素是通過js函式動態生成的,不是直接就存在的 如下一 因為文件物件是存在的 步驟1 繫結了乙個click事件 步驟2 事件觸發的選擇器去選擇,然後執行function document on click tr.audi...

vue元件繫結點選事件

今天敲 的時候 發現不能給vue封裝好的元件繫結點選事件 情況是這樣的 因為 有乙個列表 在很多地方都要用到 所以就封裝成元件了 然後 裡邊有乙個邏輯就是點選進入詳情頁面 我在元件上繫結了點選事件 發現 點選事件並沒有生效 然後發現111和id都沒有輸出 查了查資料 發現 native 修飾符可以解...

ISO給UIImageView增加點選事件

自己做了乙個九宮格,裡面的圖示都是由多張重疊構成,然後包裝成乙個button來使用 遇到的問題是如何給這個 button 增加點選事件?解決思路1 提示在該 button 上增加乙個真正的透明button,這樣就可以順利執行點選事件了 但是本人嘗試發現,如果我調整了button的透明度後,點選是沒有...