feat: Füge ResizeObserver hinzu, um Größenänderungen des Containers zu überwachen und die Darstellung anzupassen
All checks were successful
Deploy to production / deploy (push) Successful in 2m0s
All checks were successful
Deploy to production / deploy (push) Successful in 2m0s
This commit is contained in:
@@ -82,6 +82,7 @@ export default {
|
|||||||
threeRuntime: null,
|
threeRuntime: null,
|
||||||
threeLoaders: null,
|
threeLoaders: null,
|
||||||
threeModelRuntime: null
|
threeModelRuntime: null
|
||||||
|
,resizeObserver: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -151,6 +152,8 @@ export default {
|
|||||||
async mounted() {
|
async mounted() {
|
||||||
await this.init3D();
|
await this.init3D();
|
||||||
await this.loadModel();
|
await this.loadModel();
|
||||||
|
// Ensure renderer has correct size if the container became visible after mount
|
||||||
|
this.onWindowResize();
|
||||||
this.animate();
|
this.animate();
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
@@ -229,6 +232,17 @@ export default {
|
|||||||
|
|
||||||
// Resize Handler
|
// Resize Handler
|
||||||
window.addEventListener('resize', this.onWindowResize);
|
window.addEventListener('resize', this.onWindowResize);
|
||||||
|
// Observe size changes of the container (useful when element is shown/hidden via v-show)
|
||||||
|
if (typeof window !== 'undefined' && window.ResizeObserver) {
|
||||||
|
this.resizeObserver = new window.ResizeObserver(() => {
|
||||||
|
this.onWindowResize();
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
this.resizeObserver.observe(container);
|
||||||
|
} catch (e) {
|
||||||
|
// ignore observe errors on older browsers
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async loadBackground() {
|
async loadBackground() {
|
||||||
@@ -455,6 +469,12 @@ export default {
|
|||||||
if (this.scene) {
|
if (this.scene) {
|
||||||
this.scene.clear();
|
this.scene.clear();
|
||||||
}
|
}
|
||||||
|
if (this.resizeObserver) {
|
||||||
|
try {
|
||||||
|
this.resizeObserver.disconnect();
|
||||||
|
} catch (e) {}
|
||||||
|
this.resizeObserver = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user