allow changing grid parameters of ui.scene

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 @@ def __init__(self,
 
  :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)