3d 问题

[YBFACC]

点击事件

原理：点击位置是否与mesh相交
这是我一开始写的 demo

/**
 * 给模型添加点击事件
 * @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)
    }
  });
};

在实际项目中使用的时候，出现点击偏移的问题

这块主要是计算的窗口变更

• rootDOM 是 3d 根元素
• rootWidth 根元素的宽
• rootHeight 根元素的宽

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)
        }
    });
}