画布中的Three.js动画在Vue应用程序中无法正确调整大小

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

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

export default {
  mounted() {
    // 创建 Three.js 场景
    this.scene = new THREE.Scene();

    // 创建渲染器并将画布添加到 DOM 中
    this.renderer = new THREE.WebGLRenderer();
    this.$refs.canvasContainer.appendChild(this.renderer.domElement);

    // 初始化画布大小
    this.resizeCanvas();

    // 初始化动画
    this.initAnimation();

    // 监听窗口大小调整事件
    window.addEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      // 调整画布大小
      const width = this.$refs.canvasContainer.clientWidth;
      const height = this.$refs.canvasContainer.clientHeight;
      this.renderer.setSize(width, height);

      // 调整相机纵横比
      this.camera.aspect = width / height;
      this.camera.updateProjectionMatrix();
    },
    initAnimation() {
      // 创建相机
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.z = 5;

      // 创建立方体并添加到场景中
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube);

      // 创建动画循环
      this.animate();
    },
    animate() {
      // 更新动画
      requestAnimationFrame(this.animate);

      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;

      // 渲染场景
      this.renderer.render(this.scene, this.camera);
    }
  },
  beforeDestroy() {
    // 清理和销毁 Three.js 相关对象
    window.removeEventListener('resize', this.resizeCanvas);
    this.scene.remove(this.cube);
    this.renderer.dispose();
    this.renderer.forceContextLoss();
    this.renderer.domElement = null;
    this.scene = null;
    this.renderer = null;
    this.camera = null;
  }
};
</script>