threejs实现点击获取当前坐标(x,y,z)

九段刀客

已于 2023-12-18 02:55:28 修改

阅读量6.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： threejs 文章标签： javascript 前端 vue.js

于 2022-08-13 18:20:36 首次发布

本文链接：https://blog.csdn.net/weixin_35958891/article/details/126322723

threejs 专栏收录该内容

22 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

在aweb123.com上，博主分享了如何利用threejs库，在前端项目中实现用户点击屏幕时获取3D场景中的当前坐标(x,y,z)。这涉及到javascript与vue.js的结合应用，为3D交互提供了便利。" 128506294,8371128,Linux系统设备树驱动LED详解,"['linux', '驱动开发', '系统运维']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述


// 加载游戏地图
  async function loadGameMap() {
    const { scene: object } = await loadGLTF("/model/工厂2/scene.gltf");
    object.scale.set(2.2, 2.2, 2.2);
    object.rotateY(getAngle(90));
    object.position.set(-4, 0, 0);

    document.addEventListener("click", (e) => {
      modelOnClick(e, object);
    });

    scene.value?.add(object);
  }

// 点击模型，打印出坐标
  function modelOnClick(event: MouseEvent, object: THREE.Group) {
    const mouse = new THREE.Vector2(
      (event.clientX / element.value.offsetWidth) * 2 - 1,
      -(event.clientY / element.value.offsetHeight) * 2 + 1
    );
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera.value!);
    const intersects = raycaster.intersectObject(object, true);
    if (intersects.length <= 0) return void 0;
    const selected = intersects[0].object;

    console.log(intersects[0].point, "===");

    // if (selected instanceof THREE.Mesh) {
    //   selected.material = new THREE.MeshStandardMaterial({
    //     color: "red",
    //     metalness: 1,
    //     roughness: 0.7
    //   });
    // }
  }