[英]Why my window resize event listener doesn't work? Using Three.js and Vuetify.js
我使用 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 它屬於相同大小的場景和相機。
我認為您需要在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);
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.