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);
 
posted @ 2024-02-18 16:06  QinHaoRan  阅读(224)  评论(0编辑  收藏  举报