<template>
  <div ref="canvas"></div>
</template>

<script>
  import * as THREE from 'three'
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
  import { VueThreejs } from 'vue-threejs'

  export default {
    mixins: [VueThreejs],

    mounted () {
      this.initCADViewer()
    },

    methods: {
      initCADViewer () {
        const container = this.$refs.canvas

        // 创建场景
        const scene = new THREE.Scene()

        // 创建相机
        const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 1000)
        camera.position.set(0, 0, 10)

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true })
        renderer.setSize(container.offsetWidth, container.offsetHeight)
        container.appendChild(renderer.domElement)

        // 添加灯光
        const light = new THREE.DirectionalLight(0xffffff, 1)
        light.position.set(0, 0, 1)
        scene.add(light)

        // 加载CAD文件
        const loader = new GLTFLoader()
        loader.load('./cad.dwg', (gltf) => {
          scene.add(gltf.scene)
          renderer.render(scene, camera)
        })

        // 动画循环
        const animate = () => {
          requestAnimationFrame(animate)
          renderer.render(scene, camera)
        }
        animate()
      }
    }
  }
</script>

<style>
  div {
    width: 100%;
    height: 100%;
  }
</style>