[mesh1, mesh2, mesh3]为模型
addEventListener('click', function (event) {
const px = event.offsetX
const py = event.offsetY
// 屏幕坐标px、py转换为三维坐标x、y
// width、height表示canvas画布的宽高
const x = (px / width) * 2 - 1
const y = -(py / height) * 2 + 1
console.log('x', x)
console.log('y', y)
// 创建一个射线投射器
const raycaster = new THREE.Raycaster()
raycaster.setFromCamera(new THREE.Vector2(x, y), camera)
const intersects = raycaster.intersectObjects([mesh1, mesh2, mesh3])
if (intersects.length > 0) {
// 选中模型中的第一个模型设置为红色
intersects[0].object.material.color.set(0xff0000)
}
})
three.js中Raycaster(鼠标点击选中模型)
最新推荐文章于 2025-03-24 15:03:58 发布