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

页面

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".pcd" />
    <input type="file" @change="changeFile"  />
    <div @click="stringToFileClick">测试string转file</div>
    <div ref="viewer"></div>
  </div>
</template>

js部分

<script>
import * as THREE from 'three';
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js' // 注意是examples/jsm
//  本地上传pcd文件预览
export default {
  data() {
    return {
      pointCloud: null,
    };
  },
  mounted(){
    // 使用例子
    // const input = this.stringToFile('Hello, World!', 'message.txt', 'text/plain');
    // document.body.appendChild(input); // 如果需要将input添加到DOM中
  },
  methods: {
    handleFileUpload(file) {
    //   const file = event.target.files[0];
      console.log(file)
      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();
      
      console.log(URL.createObjectURL(file))
      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();
      });
    },
    
    changeFile(event){
        console.log('event----------------------aaa')
        // console.log(event.target.files[0])
        let that = this;
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.onload = (e) => {
            console.log('pcdData--------aaaaaa--------------bbb');
            var byteArray = new Uint8Array(e.target.result.length);
            for (var i = 0; i < e.target.result.length; i++) {
                byteArray[i] = e.target.result.charCodeAt(i);
                // console.log(byteArray[i])
            }
            console.log(byteArray.buffer);
            console.log(e.target.result.length);
            // console.log(typeof e.target.result);
            this.stringToFile(byteArray.buffer, 'message.pcd', 'application/octet-stream');
            // this.stringToFile(e.target.result, 'message.pcd', 'application/octet-stream');
            // this.stringToFile(e.target.result, 'tasks (1).html','text/html');
        };
        reader.readAsBinaryString(file);
        // reader.readAsArrayBuffer(file);
    },
    stringToFileClick(){
        this.stringToFile('Hello, World!', 'message.txt', 'text/plain');
    },
    stringToFile(content, fileName, mimeType) {
        // 创建一个Blob对象，类型为mimeType
        const blob = new Blob([content], { type: mimeType });
        // const blob = new Blob([content]);
    
        // 创建一个File对象
        const file = new File([blob], fileName, {
            type: mimeType,
            lastModified: new Date().getTime(), // 或者使用其他适当的时间戳
        });
        this.handleFileUpload(file)
        console.log(file)
        // // // 创建一个隐藏的input元素
        // const input = document.createElement('input');
        // input.type = 'file';
        // input.style.display = 'none';
    
        // // 触发一个点击事件来设置文件
        // input.addEventListener('change', () => {
        //     // 当input改变时，设置文件
        //     const dataTransfer = new DataTransfer();
        //     dataTransfer.items.add(file);
        //     input.files = dataTransfer.files;
        // });
    
        // // 触发点击事件
        // input.click();
    
        // // 返回input元素，以便可以在需要时添加到DOM中
        // return input;
    }
  },
};
</script>