vue 中使用three.js 加载一个场景

要在Vue中使用three.js加载一个场景，可以使用Vue的生命周期函数来加载和渲染three.js场景。以下是一个简单的示例代码：

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

<script>
import * as THREE from 'three';

export default {
  name: 'ThreeScene',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      cube: null,
    };
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 创建相机
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.z = 5;

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.container.appendChild(this.renderer.domElement);

      // 创建立方体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

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

以上代码创建了一个Vue组件，包含了一个ref为container的div元素。在mounted生命周期函数中，调用了init方法来创建场景、相机、渲染器和立方体，并将立方体添加到场景中。在animate方法中，使用requestAnimationFrame函数来更新立方体的旋转并渲染场景。最后，使用renderer.domElement将渲染器的canvas元素添加到container中。