使用 NPM 和 Three.js 加载 PCD 文件

Question

我是 Three.js 的新手，我正在努力将 PCD 文件导入场景，如果可能的话，我需要一些帮助。

我正在使用 node.module 并使用 npm 安装了“pcd-format”。

这是我的工作空间的图片： 在此处输入图像描述

我想一开始就使用尽可能简单的代码，而不需要使用一些复杂的包来理解原理。

谢谢

Answer 1

好吧，我会回答我的问题，因为我在其他平台上得到了类似问题的帮助。这是我所做的：

1. 在 Visual Studio Code 的终端中： npm create vite ，安装“Vanilla”框架，初始化一个新项目“my-project”。
2. 创建“my-project”文件夹后，我得到了 main.js 、 package.json 等文件。
3. 从终端中的“my-project”我安装了三个： npm install Three 和 npm运行 dev 在 localhost:3000 上为我的应用程序提供服务
4. 然后我导入了 PCDLoader 和用于加载从 Three.js/docs 复制的 PCD 模型的脚本 (https://thirdjs.org/docs/index.html？ q=load#examples/en/loaders/PCDLoader):

document.querySelector('#app').innerHTML = `
  <h1>Ciao</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader'
console.log(PCDLoader)

const loader = new PCDLoader();

loader.load(
    // resource URL
    'pointcloud.pcd',
    // called when the resource is loaded
    function ( mesh ) {

        scene.add( mesh );

    },
    // called when loading is in progresses
    function ( xhr ) {

        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    },
    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );

    }
);

现在它可以工作了，只是当我调试时应用程序崩溃了，并且它说 DevTools 已与页面断开连接......