![](https://img-blog.csdnimg.cn/img_convert/0647b7fd2196fe5fc0a7b5733b1afe0c.png)
클릭 시 콘솔 인쇄에 주의하세요.
threejs의 최종 렌더링은 캔버스 형식으로 수행됩니다. 따라서 인터페이스에서 클릭 이벤트를 구현하는 방법은 실제로 캔버스에서 클릭 이벤트를 구현하는 방법이 됩니다. 그러나 실제로 이것은 그 중 하나일 뿐입니다. Threejs는 3차원 공간인데 마우스를 클릭하면 x, y 두자리 데이터로 이동하는데 3차원 세계에서는 마우스 좌표를 어떻게 구하나요? 여기에 표준 장치 좌표가 도입되었습니다.
-1과 1 사이의 값을 갖는 상대값입니다. 장치에서 마우스 움직임의 상대적 위치를 기록하는 데 사용됩니다. 상대적 위치이므로 누구를 기준으로 합니까?
![](https://img-blog.csdnimg.cn/img_convert/e276e60c305d1fed79afd2418dbe3c56.png)
좋아요. 장치 좌표는 웹에서 캔버스 위치 지정 기준점과 다릅니다. 웹에서는 캔버스 위치의 기준점은 왼쪽 상단(0,0)이며, 장치 좌표의 경우 기준점은 캔버스의 중심입니다. 이러한 방식으로 마우스가 움직일 때 웹에서의 마우스 위치를 통해 장치 좌표를 기준으로 마우스의 이동 위치를 얻을 수 있습니다. 즉, sx와 sy의 최종 결과입니다. 물론 3D 세계에서 마우스 포인트의 좌표를 얻고 싶습니다. 또한 장치 좌표를 3D 세계 좌표로 변환하는 작업을 수행해야 하며, 이를 위해서는 이 프로젝트 메소드 worldVector.project(camara)를 통해 실제 변환을 달성해야 합니다.
좌표만 있으면 충분하지 않나요? 아직 아님.
다행스럽게도 threejs는 우리에게 솔루션을 제공합니다. 새로운 3.Raycaster (), Raycaster, 이 클래스는 레이캐스팅 에 사용됩니다 . 레이 캐스팅은 이 클래스의 intersectObjects 메소드를 통해 마우스 선택(3차원 공간에서 마우스가 이동한 객체 계산)에 사용됩니다. 이 광선과 교차하는 장면의 모든 객체를 얻을 수 있습니다. 클릭할지 말지 결정됩니다.
<template>
<div>
</div>
</template>
<script setup>
import { ref ,reactive, nextTick,onMounted} from 'vue'
import * as THREE from "three"
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
const scene=new THREE.Scene()
//相机
const camara=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camara.position.set(0,0,10)
//几何体
const cube=new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({color:"#f90"})
)
scene.add(cube)
//渲染器
const renderder=new THREE.WebGLRenderer({
antialias:true
})
renderder.setSize(window.innerWidth,window.innerHeight)
renderder.setClearColor("#ccc")
document.body.appendChild(renderder.domElement)
//控制器
const control=new OrbitControls(camara,renderder.domElement)
//渲染函数
const render=()=>{
renderder.render(scene,camara)
requestAnimationFrame(render)
}
render()
const mouse=new THREE.Vector2()
let rayCaster=new THREE.Raycaster()
const handlerClick=(e)=>{
mouse.x=(e.clientX/window.innerWidth)*2-1 //通过web中鼠标坐标得到标准屏幕坐标
mouse.y=-(e.clientY/window.innerHeight)*2+1
rayCaster.setFromCamera(mouse,camara) 通过摄像机和鼠标位置更新射线
let intersects=rayCaster.intersectObjects(scene.children) //获取场景中所有与射线相交的物体,结果是一个数组
console.log("intersects:",intersects)
if(intersects.length>0){ //length>0则说明有与射线相交的问题。表明点击了
console.log(intersects[0])
}
}
window.addEventListener("click",handlerClick)
</script>
<style scoped>
.view-box{
width: 100%;
height: 100%;
overflow: hidden;
}
.container{
position: absolute;
width: 240px;
height: 240px;
background: rgba(0,0,0,0.6);
color:#ccc
}
</style>