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,
|
||||
threeLoaders: null,
|
||||
threeModelRuntime: null
|
||||
,resizeObserver: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -151,6 +152,8 @@ export default {
|
||||
async mounted() {
|
||||
await this.init3D();
|
||||
await this.loadModel();
|
||||
// Ensure renderer has correct size if the container became visible after mount
|
||||
this.onWindowResize();
|
||||
this.animate();
|
||||
},
|
||||
beforeUnmount() {
|
||||
@@ -229,6 +232,17 @@ export default {
|
||||
|
||||
// Resize Handler
|
||||
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() {
|
||||
@@ -455,6 +469,12 @@ export default {
|
||||
if (this.scene) {
|
||||
this.scene.clear();
|
||||
}
|
||||
if (this.resizeObserver) {
|
||||
try {
|
||||
this.resizeObserver.disconnect();
|
||||
} catch (e) {}
|
||||
this.resizeObserver = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user