为什么我的窗口调整大小事件监听器不起作用？使用 Three.js 和 Vuetify.js答案

【问题标题】：Why my window resize event listener doesn't work? Using Three.js and Vuetify.js为什么我的窗口调整大小事件监听器不起作用？使用 Three.js 和 Vuetify.js
【发布时间】：2019-01-17 11:46:28
【问题描述】：

我正在使用 vuetify.js 框架在 a 中放置一个 three.js 渲染器。我希望我的代码在调整窗口大小时更改 div 元素的尺寸。

这是我项目的一部分，我省略了不必要的代码块，所以不要介意未使用的变量:)

<style scoped>
.map__three {
  position: absolute;
  bottom: 60px;
  left: 0px;
}
</style>

<template>
  <div class="flex fill-height wrap">
    <v-btn></v-btn>
    <div id="map"  class="flex fill-height wrap"  v-on:dblclick="addNewPoi3d"></div>
  </div>
</template>

<script>

export default {
  name: 'ThreeTest',
  data() {
    return {
      scene: null,
      renderer: null,
      camera: null,
      mouse: null,
      mousePosition: new THREE.Vector2(),
      canvasPosition: null,
      rayCaster: new THREE.Raycaster(),
      mapWidth: null,
      mapHeight: null,
      mapDimensions: null
    };
  },

  methods: {
    init() {
      let map = document.getElementById('map');
      this.mapDimensions = map.getBoundingClientRect();
      this.mapWidth = this.mapDimensions.width;
      this.mapHeight = this.mapDimensions.height;
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color( 0xf0f0f0 );

      this.camera = new THREE.PerspectiveCamera(
        75,
        this.mapWidth/this.mapHeight,
        0.1,
        1000,
      );
      this.camera.position.z = 3;


      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(this.mapWidth, this.mapHeight);
      map.appendChild(this.renderer.domElement);



      // EVENT LISTENERS:
      window.addEventListener('resize', this.onWindowResize, false);
    },


    onWindowResize()  {
        this.camera.aspect = this.mapWidth / this.mapHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(this.mapWidth, this.mapHeight);
    },



    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },
    render() {
      this.renderer.render(this.scene, this.camera);
    },

  },

  mounted() {
    this.init();
    this.animate();
  }
};
</script>

预期：它应该调整我加载的场景尺寸和相机纵横比。

它的作用：都不是 :D 它适用于相同大小的场景和相机。

【问题讨论】：

标签： javascript html vue.js three.js vuetify.js

【解决方案1】：

我认为您需要在onWindowResize() 函数中重新计算this.mapWidth 和this.mapHeight。目前，代码将相机和渲染器设置为应用最初加载时的大小。

试试这个：

onWindowResize()  {
  let map = document.getElementById('map');
  this.mapDimensions = map.getBoundingClientRect();
  this.mapWidth = this.mapDimensions.width;
  this.mapHeight = this.mapDimensions.height;

  this.camera.aspect = this.mapWidth / this.mapHeight;
  this.camera.updateProjectionMatrix();
  this.renderer.setSize(this.mapWidth, this.mapHeight);
},

【讨论】：