1:添加點(diǎn)擊事件
window.addEventListener('click', this.onMouseClick, false);
2:在點(diǎn)擊事件中獲取具體信息
// 監(jiān)聽(tīng)鼠標(biāo)點(diǎn)擊事件 onMouseClick(event) { event.preventDefault(); this.currentPartition = {} this.showHeight = false; // console.log(event) // 將鼠標(biāo)位置轉(zhuǎn)換成歸一化設(shè)備坐標(biāo)(-1 到 +1) // this.elem.clientWidth, this.elem.clientHeight // let x = event.clientX - (window.innerWidth - this.elem.clientWidth) // let y = event.clientY - (window.innerHeight - this.elem.clientHeight) // mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; // mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; // console.log('event.clientY') // console.log(event) this.mouseTop = event.clientY-renderer.domElement.getBoundingClientRect().top +'px'; this.mouseLeft = event.clientX-renderer.domElement.getBoundingClientRect().left+3+'px'; const mouse = new THREE.Vector2(); // 轉(zhuǎn)換為webgl坐標(biāo)系下的鼠標(biāo)位置 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; // console.log(mouse) // // 使用鼠標(biāo)位置更新射線投射器 raycaster.setFromCamera(mouse, camera); // // 計(jì)算鼠標(biāo)點(diǎn)擊的所有物體 const intersects = raycaster.intersectObjects(scene.children, true); // 如果有物體被點(diǎn)擊,輸出它的信息 if (intersects.length > 0) { // 獲取最近的交點(diǎn)對(duì)象和交點(diǎn)坐標(biāo) const intersect = intersects[0]; const point = intersect.point; // 交點(diǎn)在世界坐標(biāo)中的位置 const object = intersect.object; // 被點(diǎn)擊的對(duì)象 const distanceToCamera = intersect.distance; // 從相機(jī)到交點(diǎn)的距離(可以用來(lái)計(jì)算高度) // console.log('Clicked on object:', object); // console.log('Intersection --------------- point:'); // console.log(point); this.mouseCurrentHeight = parseInt(parseFloat((point.z-2.2).toFixed(2)) * 100) / 100;// Math.floor(point.z-1); this.showHeight = true; // if(this.timerHeight){ // clearInterval(this.timerHeight) // } // this.timerHeight = setInterval(()=>{ // this.showHeight = false; // clearInterval(this.timerHeight) // },1500) // console.log('Distance to camera:', distanceToCamera); // // 如果需要計(jì)算高度,可以這樣做: // // 假設(shè)相機(jī)位于y=0的位置,則可以計(jì)算高度為:point.y - cameraPosition.y; // const cameraPosition = new THREE.Vector3(); // camera.getWorldPosition(cameraPosition); // const height = point.y - cameraPosition.y; // 注意:這取決于你的場(chǎng)景設(shè)置,可能需要調(diào)整以適應(yīng)實(shí)際情況。 // console.log('Height from camera:', height); return // // 取第一個(gè)被點(diǎn)擊的物體 // let intersect = null; // console.log('輸出被點(diǎn)擊的物體信息'); // intersects.forEach((ele) => { // // console.log('ele'); // // console.log(ele); // // if(ele.object.name == "partitionName"){ // intersect = ele; // // } // }) // if(intersect){ // // 輸出被點(diǎn)擊的物體信息 // console.log('輸出被點(diǎn)擊的物體信息'); // 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); // } // 你可以獲取更多的信息,例如點(diǎn)的位置、面的法線等 // console.log(intersect.point); // console.log(intersect.face.normal); } },
備住:由于我這里展示3d模型的區(qū)域不是全屏所以點(diǎn)擊時(shí)候做了處理需要轉(zhuǎn)化一下坐標(biāo)系。代碼如下:
this.mouseTop = event.clientY-renderer.domElement.getBoundingClientRect().top +'px'; this.mouseLeft = event.clientX-renderer.domElement.getBoundingClientRect().left+3+'px'; const mouse = new THREE.Vector2(); // 轉(zhuǎn)換為webgl坐標(biāo)系下的鼠標(biāo)位置 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; // console.log(mouse)
浙公網(wǎng)安備 33010602011771號(hào)