three.js Gltf模型转换为three.points点云模型

three.js Gltf模型转换为three.points点云模型

背景需求

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