请帮我写一个vue组件使用threejs写一个3d模型展示器可以实现模型的放大缩小旋转查看页面整体居中

以下是一个简单的Vue组件，使用Three.js实现了一个3D模型展示器，可以通过鼠标控制模型的旋转、缩放和平移，同时将整个页面居中显示。

<template>
  <div class="model-viewer" ref="container"></div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

export default {
  name: 'ModelViewer',
  mounted() {
    // 创建场景、相机和渲染器
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    const renderer = new THREE.WebGLRenderer({ antialias: true })

    // 设置渲染器的大小和背景色
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setClearColor(0x000000)

    // 将渲染器添加到页面中
    this.$refs.container.appendChild(renderer.domElement)

    // 创建模型并添加到场景中
    const loader = new THREE.GLTFLoader()
    loader.load('/path/to/model.gltf', gltf => {
      const model = gltf.scene
      scene.add(model)
    })

    // 添加控制器，使用户可以通过鼠标控制模型的旋转、缩放和平移
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
    controls.dampingFactor = 0.05
    controls.rotateSpeed = 0.5
    controls.zoomSpeed = 1.2
    controls.panSpeed = 0.8

    // 调整相机的位置和方向
    camera.position.set(0, 0, 5)
    camera.lookAt(scene.position)

    // 渲染场景并循环更新
    const animate = () => {
      requestAnimationFrame(animate)
      controls.update()
      renderer.render(scene, camera)
    }
    animate()

    // 监听窗口大小变化并调整渲染器的大小
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    })
  }
}
</script>

<style>
.model-viewer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

在上述代码中，我们首先在模板中添加了一个div元素，并在mounted生命周期钩子函数中获取了该元素的引用，将渲染器的canvas元素添加到该元素中。接着，我们创建了一个场景、相机和渲染器，并将渲染器添加到页面中。然后，我们使用GLTFLoader加载了一个3D模型，并将其添加到场景中。接下来，我们使用OrbitControls创建了一个控制器，使用户可以通过鼠标控制模型的旋转、缩放和平移。最后，我们调整了相机的位置和方向，并在循环中更新控制器和渲染场景。同时，我们监听了窗口大小变化事件，调整了渲染器的大小。最后，我们使用CSS将整个组件居中显示。