Merge pull request #1190 from zauberzeug/resize_scene

Resize scene canvas and text renderers with container div

nicegui/elements/scene.js

@@ -73,9 +73,9 @@ export default {
     light.position.set(5, 10, 40);
     this.scene.add(light);
 
-    let renderer = undefined;
+    this.renderer = undefined;
     try {
-      renderer = new THREE.WebGLRenderer({
+      this.renderer = new THREE.WebGLRenderer({
         antialias: true,
         alpha: true,
         canvas: this.$el.children[0],
@@ -88,18 +88,21 @@ export default {
       this.$el.style.border = "1px solid silver";
       return;
     }
-    renderer.setClearColor("#eee");
-    renderer.setSize(this.width, this.height);
+    this.renderer.setClearColor("#eee");
+    this.renderer.setSize(this.width, this.height);
 
-    const text_renderer = new CSS2DRenderer({
+    this.text_renderer = new CSS2DRenderer({
       element: this.$el.children[1],
     });
-    text_renderer.setSize(this.width, this.height);
+    this.text_renderer.setSize(this.width, this.height);
 
-    const text3d_renderer = new CSS3DRenderer({
+    this.text3d_renderer = new CSS3DRenderer({
       element: this.$el.children[2],
     });
-    text3d_renderer.setSize(this.width, this.height);
+    this.text3d_renderer.setSize(this.width, this.height);
+
+    this.$nextTick(() => this.resize());
+    window.addEventListener("resize", this.resize, false);
 
     if (this.grid) {
       const ground = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.MeshPhongMaterial({ color: "#eee" }));
@@ -113,21 +116,21 @@ export default {
       grid.rotateX(Math.PI / 2);
       this.scene.add(grid);
     }
-    this.controls = new OrbitControls(this.camera, renderer.domElement);
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
 
     const render = () => {
       requestAnimationFrame(() => setTimeout(() => render(), 1000 / 20));
       TWEEN.update();
-      renderer.render(this.scene, this.camera);
-      text_renderer.render(this.scene, this.camera);
-      text3d_renderer.render(this.scene, this.camera);
+      this.renderer.render(this.scene, this.camera);
+      this.text_renderer.render(this.scene, this.camera);
+      this.text3d_renderer.render(this.scene, this.camera);
     };
     render();
 
     const raycaster = new THREE.Raycaster();
     const click_handler = (mouseEvent) => {
-      let x = (mouseEvent.offsetX / renderer.domElement.width) * 2 - 1;
-      let y = -(mouseEvent.offsetY / renderer.domElement.height) * 2 + 1;
+      let x = (mouseEvent.offsetX / this.renderer.domElement.width) * 2 - 1;
+      let y = -(mouseEvent.offsetY / this.renderer.domElement.height) * 2 + 1;
       raycaster.setFromCamera({ x: x, y: y }, this.camera);
       this.$emit("click3d", {
         hits: raycaster
@@ -159,6 +162,10 @@ export default {
     }, 100);
   },
 
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resize);
+  },
+
   methods: {
     create(type, id, parent_id, ...args) {
       let mesh;
@@ -350,6 +357,14 @@ export default {
         })
         .start();
     },
+    resize() {
+      const { clientWidth, clientHeight } = this.$el;
+      this.renderer.setSize(clientWidth, clientHeight);
+      this.text_renderer.setSize(clientWidth, clientHeight);
+      this.text3d_renderer.setSize(clientWidth, clientHeight);
+      this.camera.aspect = clientWidth / clientHeight;
+      this.camera.updateProjectionMatrix();
+    },
   },
 
   props: {

website/more_documentation/scene_documentation.py

@@ -4,7 +4,7 @@ from ..documentation_tools import text_demo
 
 
 def main_demo() -> None:
-    with ui.scene(width=285, height=285) as scene:
+    with ui.scene().classes('w-full h-64') as scene:
         scene.sphere().material('#4488ff')
         scene.cylinder(1, 0.5, 2, 20).material('#ff8800', opacity=0.5).move(-2, 1)
         scene.extrusion([[0, 0], [0, 1], [1, 0.5]], 0.1).material('#ff8888').move(-2, -2)