Open YBFACC opened 2 months ago
原理:点击位置是否与mesh相交 这是我一开始写的 demo
mesh
/** * 给模型添加点击事件 * @param camera * @param mesh * @param fn */ const addClickEvent = (camera: any, mesh: any, fn: any) => { // 创建一个Raycaster对象 const raycaster = new THREE.Raycaster(); // 创建一个用于存储鼠标位置的二维向量 const mouse = new THREE.Vector2(); // 监听鼠标点击事件 window.addEventListener('click', (event) => { // 将鼠标点击位置转换为归一化设备坐标 (-1 到 +1 的范围内,对应视口) mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 使用Raycaster更新鼠标位置 raycaster.setFromCamera(mouse, camera); // 计算物体和射线的交点 const intersects = raycaster.intersectObject(mesh); // 如果有交点,表示点击了物体 if (intersects.length > 0) { fn(event) } }); };
这块主要是计算的窗口变更
addClickEvent(camera: any, mesh: any, callback: any) { // 创建一个Raycaster对象 const raycaster = new Raycaster(); // 创建一个用于存储鼠标位置的二维向量 const mouse = new Vector2(); // 监听鼠标点击事件 // debug 点击偏差 this.rootDOM.addEventListener('click', (event) => { console.log('1111', event) // 将鼠标点击位置转换为归一化设备坐标(-1 到 + 1 的范围内,对应视口) mouse.x = (event.offsetX / this.rootWidth) * 2 - 1; mouse.y = -(event.offsetY / this.rootHeight) * 2 + 1; // 使用Raycaster更新鼠标位置 raycaster.setFromCamera(mouse, camera); // 计算物体和射线的交点 const intersects = raycaster.intersectObject(mesh); // 如果有交点,表示点击了物体 if (intersects.length > 0) { callback(event) } }); }
点击事件
原理:点击位置是否与
mesh
相交 这是我一开始写的 demo在实际项目中使用的时候,出现点击偏移的问题
这块主要是计算的窗口变更