allow changing grid parameters of `ui.scene` (#3257)

nicegui/elements/scene.js

@@ -123,16 +123,18 @@ export default {
     this.$nextTick(() => this.resize());
     window.addEventListener("resize", this.resize, false);
 
+    const gridSize = this.grid[0] || 100;
+    const gridDivisions = this.grid[1] || 100;
     if (this.grid) {
       const ground = new THREE.Mesh(
-        new THREE.PlaneGeometry(100, 100),
+        new THREE.PlaneGeometry(gridSize, gridSize),
         new THREE.MeshPhongMaterial({ color: this.background_color })
       );
       ground.translateZ(-0.01);
       ground.object_id = "ground";
       this.scene.add(ground);
 
-      const grid = new THREE.GridHelper(100, 100);
+      const grid = new THREE.GridHelper(gridSize, gridDivisions);
       grid.material.transparent = true;
       grid.material.opacity = 0.2;
       grid.rotateX(Math.PI / 2);
@@ -470,7 +472,7 @@ export default {
   props: {
     width: Number,
     height: Number,
-    grid: Boolean,
+    grid: Object,
     camera_type: String,
     camera_params: Object,
     drag_constraints: String,

nicegui/elements/scene.py

@@ -1,6 +1,6 @@
 import asyncio
 from dataclasses import dataclass
-from typing import Any, Callable, Dict, List, Literal, Optional, Union
+from typing import Any, Callable, Dict, List, Literal, Optional, Tuple, Union
 
 from typing_extensions import Self
 
@@ -72,7 +72,7 @@ class Scene(Element,
     def __init__(self,
                  width: int = 400,
                  height: int = 300,
-                 grid: bool = True,
+                 grid: Union[bool, Tuple[int, int]] = True,
                  camera: Optional[SceneCamera] = None,
                  on_click: Optional[Callable[..., Any]] = None,
                  on_drag_start: Optional[Callable[..., Any]] = None,
@@ -89,7 +89,7 @@ class Scene(Element,
 
         :param width: width of the canvas
         :param height: height of the canvas
-        :param grid: whether to display a grid
+        :param grid: whether to display a grid (boolean or tuple of ``size`` and ``divisions`` for `Three.js' GridHelper <https://threejs.org/docs/#api/en/helpers/GridHelper>`_, default: 100x100)
         :param camera: camera definition, either instance of ``ui.scene.perspective_camera`` (default) or ``ui.scene.orthographic_camera``
         :param on_click: callback to execute when a 3D object is clicked
         :param on_drag_start: callback to execute when a 3D object is dragged

website/documentation/content/scene_documentation.py

@@ -145,4 +145,13 @@ def custom_background() -> None:
         scene.box()
 
 
+@doc.demo('Custom Grid', '''
+    You can set custom grid parameters using the `grid` parameter of `ui.scene`.
+    It accepts a tuple of two integers, the first one for the grid size and the second one for the number of divisions.
+''')
+def custom_grid() -> None:
+    with ui.scene(grid=(3, 2)).classes('w-full h-64') as scene:
+        scene.sphere()
+
+
 doc.reference(ui.scene)