<script setup>
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import * as THREE from 'three'
import SceneInit from './init'
// 通过ref绑定dom,避免使用id导致重复问题
const threeDom = ref(null)
// 初始化完的实例
let threeObj
// 添加立方体
const addCube = () => {
  // 绘制立方体
  // 创建几何体：立方缓冲几何体（BoxGeometry）
  const geometry = new THREE.BoxGeometry(1, 1, 1)
  // 创建物体材质
  const material = new THREE.MeshBasicMaterial({ color: 0x00FF00 })
  // 几何体和材质组成一个物体
  const cube = new THREE.Mesh(geometry, material)
  // 将物体添加到场景
  threeObj.scene.add(cube)
}

// 销毁生命周期
onBeforeUnmount(() => {
  // 销毁three创建的demo和对象
  threeObj.destroy()
})

// 初始化生命周期
onMounted(() => {
  threeObj = new SceneInit(threeDom.value) // 使用new 调用类SceneInit的构造函数
  // 绘制网格
  threeObj.grid()
  // threeObj.loadPCD('../../../public/4.pcd')
  threeObj.loadPCD('./4.pcd')
  // threeObj.loadPCD('./finalCloud.pcd')
  // threeObj.loadPCD('../../../public/house.pcd')
  // addCube()
  // 加载三维地图
  threeObj.load3DMap()
})
</script>

<template>
  <div ref="threeDom" class="threeDiv" />
</template>

<style scoped>
.threeDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>