背景需求

1. 对 gltf 格式的点云模型进行测距，调用 three.js 提供的 raycaster 射线无法穿透选中；
2. 通过官网示例发现有相应实现点云点捕捉的代码，其格式为 three.Points，因而存在需求将 gltf 点云模型转换成 three.points 模型；

代码实现

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const loader = new GLTFLoader();

loader.load(
  gltfurl,
  (gltf) => {
    let mesh = gltf.scene;

    // 获取几何体和材质
    const geometry = gltf.scene.children[0].geometry;
    const material = gltf.scene.children[0].material;

    // 创建three.points对象
    const particles = new THREE.Points(geometry, material);

    // 设置中心点，方便点云数据切片多次加载，看需要添加
    particles.position.x = x;
    particles.position.y = y;
    particles.position.z = z;

    this.scene.add(particles); // 将模型引入three
  },
  undefined,
  function (error) {
    console.error(error);
  }
);