three.js的物体点击事件
直接粘贴无脑用
!!!vue文件执行要现在初始化方法里面调用一下
onclickS() {
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
function onmodelclick(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
console.log(intersects.length > 0 ? intersects[0].object : '');
}
window.addEventListener("click", onmodelclick);
},
---------------------------华丽分割线----------------------------------------
创建一个新的射线投射器对象,用于从鼠标点击位置生成一条射线,并检测这条射线是否与场景中的任何物体相交。
let raycaster = new THREE.Raycaster();
创建一个新的二维向量对象,用于存储鼠标点击位置在归一化设备坐标(NDC)中的x和y值。
let mouse = new THREE.Vector2();
创建一个方法
function onmodelclick(event) {
将鼠标位置转换为归一化设备坐标 (归一化坐标:将所有要渲染的物体映射到x轴、y轴、z轴上的[-1, 1]范围内。这种映射使得坐标独立于屏幕的实际尺寸或形状,提供了一种标准化的方式来处理图形渲染和显示。)
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
使用当前相机和鼠标位置设置射线投射器的起点和方向
raycaster.setFromCamera(mouse, camera);
与射线相交的物体数组集合
const intersects = raycaster.intersectObjects(scene.children);
console.log(intersects.length > 0 ? intersects[0].object : '');
}
window.addEventListener("click", onmodelclick);