three.js 創建模型后,想要實現點擊模型獲取模型對象觸發相應事件。可以使用它提供的API THREE.Raycaster()
https://threejs.org/docs/index.html?q=Raycaster#api/en/core/Raycaster
//監聽點擊事件 window.addEventListener('click', (event) => { event.preventDefault(); var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); mouse.x = ((event.clientX) / renderer.domElement.clientWidth) * 2 - 1; mouse.y = -((event.clientY) / renderer.domElement.clientHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children, true); //當intersects.length > 0說明碰點擊到物體(可能為多個重合的物體),獲取最近的物體名稱進行判斷 if (intersects.length > 0) { console.log(intersects) } });
如果當前場景不是整個頁面 需要調整鼠標拾取位置 否則獲取數據不準確具體調整代碼如下(其中的renderer就是場景canvas大小)
const mouse = new THREE.Vector2(); // 轉換為webgl坐標系下的鼠標位置 mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.clientWidth) * 2 - 1; mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.clientHeight) * 2 + 1; // // 使用鼠標位置更新射線投射器 raycaster.setFromCamera(mouse, camera); // // 計算鼠標點擊的所有物體 const intersects = raycaster.intersectObjects(scene.children, true); // 如果有物體被點擊,輸出它的信息 if (intersects.length > 0) { // 取第一個被點擊的物體 let intersect = null; intersects.forEach((ele) => { if(ele.object.name == "partitionName"){ intersect = ele; } }) if(intersect){ // 輸出被點擊的物體信息 console.log('輸出被點擊的物體信息'); console.log(intersect.object); if(intersect.object.partitionInfo.volume){ intersect.object.partitionInfo.volume = Number(intersect.object.partitionInfo.volume).toFixed(2) } this.currentPartition = { ...intersect.object.partitionInfo } // console.log(intersects); } // 你可以獲取更多的信息,例如點的位置、面的法線等 // console.log(intersect.point); // console.log(intersect.face.normal); }
浙公網安備 33010602011771號