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

我目前正在尝试学习Three.js，我正在Vue.js组件中学习， 这是我的代码：

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

export default {
  name: "Scene",
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      this.canvas = document.getElementById("background");

      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);

      this.renderer = new THREE.WebGLRenderer({
        canvas: this.canvas,
        alpha: true,
        antialias: true,
      });
      this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);

      let geometry = new THREE.BoxGeometry(1, 1, 1);

      this.light = new THREE.DirectionalLight(0xffffff, 1);
      this.light.position.set(4, -2, 2);
      this.scene.add(this.light);

      this.camera.position.z = 2;

      this.cubes = [
        this.makeInstance(geometry, 0x44aa88, 0),
        this.makeInstance(geometry, 0x8844aa, -2),
        this.makeInstance(geometry, 0xaa8844, 2),
      ];

      this.animate();
    },

    animate() {
      this.cubes.forEach((cube) => {
        cube.rotation.y += 0.01;
      });
      this.resizeCanvasToDisplaySize();
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animate);
    },

    resizeCanvasToDisplaySize() {
      const canvas = this.renderer.domElement;
      // look up the size the canvas is being displayed
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;

      if (canvas.width !== width || canvas.height !== height) {
        this.renderer.setSize(width, height, false);
        this.camera.aspect = width / height;
        this.camera.updateProjectionMatrix();
      }
    },

    makeInstance(geometry, color, x) {
      const material = new THREE.MeshPhongMaterial({ color });

      const cube = new THREE.Mesh(geometry, material);
      this.scene.add(cube);

      cube.position.x = x;

      return cube;
    },
  },
};
</script>

<style scoped>
canvas {
  display: block;
  width: 100%;
}
</style>

从“三”中导入*作为三；
导出默认值{
名称：“场景”，
安装的（）{
这个.init三（）；
},
方法：{
initThree（）{
this.canvas=document.getElementById（“背景”）；
this.scene=新的三个.scene（）；
这个摄像头=新的三个透视摄像头（75,2,0.11000）；
this.renderer=new THREE.WebGLRenderer({
canvas:this.canvas，
阿尔法：是的，
反别名：是的，
});
this.renderer.setSize（this.canvas.clientWidth，this.canvas.clientHeight）；
让geometry=new-THREE.BoxGeometry（1,1,1）；
this.light=新的三方向光（0xffffff，1）；
此。灯。位置。设置（4，-2，2）；
this.scene.add（this.light）；
这个.camera.position.z=2；
此值为0.cubes=[
这个.makeInstance（几何体，0x44aa88，0），
这个.makeInstance（几何体，0x8844aa，-2），
这个.makeInstance（几何体，0xaa8844，2），
];
这个。动画（）；
},
制作动画（）{
this.cubes.forEach（（cube）=>{
立方体旋转y+=0.01；
});
此.resizeCanvasToDisplaySize（）；
this.renderer.render（this.scene，this.camera）；
requestAnimationFrame（this.animate）；
},
resizeCanvasToDisplaySize（）的大小{
const canvas=this.renderer.doElement；
//查找画布显示的大小
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
if（canvas.width！==宽度| | canvas.height！==高度）{
this.renderer.setSize（宽度、高度、false）；
this.camera.aspect=宽度/高度；
this.camera.updateProjectMatrix（）；
}
},
makeInstance（几何体、颜色、x）{
const material=新的3.MeshPhongMaterial（{color}）；
常量立方体=新的三个网格（几何体、材质）；
this.scene.add（立方体）；
立方体位置x=x；
返回立方体；
},
},
};
帆布{
显示：块；
宽度：100%；
}

---

如果我将窗口的大小调整为小于初始大小（加载页面时的大小），在chrome上的developer tools中，它可以正常工作，画布的宽度和高度可以正确更改。如果我使大小大于初始大小，它将保持不变，并且根本不缩放。此外，缩放只在开发工具中起作用，而不在实际窗口中起作用。

调整大小功能中的逻辑存在缺陷。实际上，您得到的是当前宽度：

const width=canvas.clientWidth然后循环地将它分配回从何处获得它。你也在这样做：

width = canvas.width;
canvas.width = width;

您应该使用所有三个.js示例中使用的标准方法。不要在每个
animate（）
帧上检查调整大小，只需为窗口调整大小时设置事件侦听器，然后使用窗口的大小设置画布的尺寸：

window.addEventListener（'resize'，onWindowResize，false）；
函数onWindowResize（）{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
}
我建议您以不同的方式进行操作，并向
resize
事件注册一个事件侦听器。然后，您可以使用与此基本示例相同的实现：感谢您的回答，现在来看这个问题似乎有点愚蠢，函数确实没有太多意义^^