Skip to content
Skip to content

Zen Geometry

This scene turns system architecture into a playable spatial sketch: nodes, connections, and subtle motion that respond to pointer and touch input. It is loaded only on this page, keeping the Canvas index fast and predictable.

Live Example

Move the pointer to pull the structure, drag on touch screens to orbit, and switch the site theme to change the atmosphere.

Back to Canvas

Demonstrates

  • Three.js scene lifecycle inside Zensical instant navigation
  • Light and dark theme synchronization
  • Pointer and touch interaction without loading on the Canvas overview

Implementation

  • Entry: docs/assets/js/canvas/scene/main.js
  • Scene: docs/assets/js/canvas/scene/ZenGeometryScene.js
  • Model: docs/assets/js/canvas/scene/ZenGeometryModel.js

Minimal Page Hook

<div id="canvas-scene" class="canvas-scene-viewport"></div>

The scene bootstrap looks for that element only on /canvas/zen-geometry/, initializes Three.js there, and destroys the renderer when instant navigation leaves the page.