上传本地pcd文件，并用threejs渲染

项目背景：

pcd文件很大，如果是本地的文件，上传到网络再下载下来，会造成网络流量的极大浪费。那么我直接加载本地的（当前计算机上的pcd文件）用来显示，会大大提高网络效率。

上代码：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".pcd" />
    <div ref="viewer"></div>
  </div>
</template>

<script>
import * as THREE from 'three';
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js' // 注意是examples/jsm

export default {
  data() {
    return {
      pointCloud: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.viewer.innerHTML = '';
      this.$refs.viewer.appendChild(renderer.domElement);

      camera.position.z = 5;

      const loader = new PCDLoader();
      loader.load(URL.createObjectURL(file), (loadedPointCloud) => {
        if (this.pointCloud) {
          scene.remove(this.pointCloud);
        }

        this.pointCloud = loadedPointCloud;
        scene.add(this.pointCloud);

        const animate = () => {
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
        };

        animate();
      });
    },
  },
};
</script>

说明：两个知识点
1）用input上传文件，生成新路径 URL.createObjectURL(file),
2）用pcd加载器PCDLoader，渲染pcd文件

失败的尝试：
用FileReader来直接获取到文件二进制形式的内容，进行threejs的渲染，但是会报数据格式问题，无法渲染。分析了下pcdloader源码，其中对无效数据进行了处理。

const file = event.target.files[0]
      const reader = new FileReader()
      reader.addEventListener(
        'load',
        () => {
          console.log(reader.result)
         },
        false
      )
      reader.readAsArrayBuffer(file)
    }