threejs引入GLTF模型進行點擊獲取

最近編輯點擊事件時發現：
threejs的 raycaster只對mesh有感應，而引入模型類型是group，那么要對引入模型進行獲取就要把
raycaster.intersectObjects（children）里children對象設置為group的children這樣就可以編輯對引入模型的點擊事件。
如果目標模型的同級模型干擾嚴重，可以直接外部建立一個透明mesh進行點擊綁定

// 獲取與射線相交的對象數組

//this.renderer這是渲染器dom對象

this.renderer.domElement.addEventListener('click', this.getIntersects)

function getIntersects(event) {
event.preventDefault();
// 聲明 raycaster 和 mouse 變量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// 通過鼠標點擊位置,計算出 raycaster 所需點的位置,以屏幕為中心點,范圍 -1 到 1
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
//通過鼠標點擊的位置和當前相機的矩陣計算出射線位置
raycaster.setFromCamera(mouse, three.camera);
// 獲取與射線相交的對象數組，按照距離排序，越近的越靠前
//scene下的children，--
var intersects = raycaster.intersectObjects(scene.children, true); //如果加載的是gltf文件，這里一定要把tue加上，代表遞歸
//當射線接觸到導入的gltf模型，且沒有點擊到其他模型時（這是我項目里的內容，理解了方法的用法，就可以自定義了）

console.log(intersects);

//返回選中的對象 return intersects; }

 

參考鏈接：https://blog.csdn.net/yunduanzhijie/article/details/113373093

參考鏈接：101 Three.js 場景世界坐標和平面二維坐標互轉_現在學習也不晚-CSDN博客