自用封装处理pcd文件的vue组件

<template>
  <div id="three" style="height: 100%;width: 100%;"></div>
</template>

<script>
import * as THREE from 'three'
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js' // 注意是examples/jsm
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // 放大缩小旋转等控制操作
export default {
  data () {
    return {
      publicPath: process.env.BASE_URL // public
    }
  },
  mounted () {
    this.qwe(`${process.env.BASE_URL}map.pcd`, 'three')
  },
  methods: {
    qwe (pcdPath, domName) {
      var elem = document.getElementById(domName)
      var camera = new THREE.PerspectiveCamera(70, elem.clientWidth / elem.clientHeight, 0.8, 1000) // 相机
      var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) // 渲染器
      renderer.setClearColor(new THREE.Color(0x303030)) // 背景色
      renderer.setSize(elem.clientWidth, elem.clientHeight)
      elem.appendChild(renderer.domElement)
      var scene = new THREE.Scene() // 场景
      var loader = new PCDLoader()
      loader.load(pcdPath, function (points) {
        points.material.size = 0.02
        points.material.color = new THREE.Color(0xffffff) // 背景色
        scene.add(points)
        // 构造盒子
        var middle = new THREE.Vector3()
        points.geometry.computeBoundingBox()
        points.geometry.boundingBox.getCenter(middle)
        points.applyMatrix(new THREE.Matrix4().makeTranslation(-middle.x, -middle.y, -middle.z))
        // 比例
        var largestDimension = Math.max(points.geometry.boundingBox.max.x,
          points.geometry.boundingBox.max.y,
          points.geometry.boundingBox.max.z)
        camera.position.z = largestDimension * 0.5
        var animate = function () {
          renderer.render(scene, camera)
          requestAnimationFrame(animate)
        }
        animate()
        var controls = new OrbitControls(camera, renderer.domElement) // 创建控件对象
        controls.addEventListener('change', animate) // 监听鼠标、键盘事件  放大缩小等
      })
    }
  }
}
</script>