json-render/examples/react-three-fiber/app/scenes/clockwork-orrery.ts

import type { Scene } from "./_helpers";

export const clockworkOrrery: Scene = {
  name: "Clockwork Orrery",
  description:
    "Interlocking brass/gold rings spinning at different tilts and speeds with orbiting metallic planets. Like the inside of a celestial clockwork mechanism.",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "cam",
          "env",
          "ambient",
          "key",
          "warm",
          "accent",
          "center",
          "ring-spin-0",
          "ring-spin-1",
          "ring-spin-2",
          "ring-spin-3",
          "planet-orbit-0",
          "planet-orbit-1",
          "planet-orbit-2",
          "sparkles",
          "post",
          "controls",
        ],
      },
      cam: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 3, 8],
          fov: 50,
          makeDefault: true,
        },
        children: [],
      },
      env: {
        type: "Environment",
        props: {
          preset: "dawn",
          background: true,
          blur: 1,
          intensity: 0.5,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#332200", intensity: 0.4 },
        children: [],
      },
      key: {
        type: "DirectionalLight",
        props: {
          position: [5, 10, 5],
          rotation: null,
          scale: null,
          color: "#ffddaa",
          intensity: 2,
          castShadow: true,
        },
        children: [],
      },
      warm: {
        type: "PointLight",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          color: "#ffaa44",
          intensity: 30,
          distance: 15,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      accent: {
        type: "PointLight",
        props: {
          position: [-4, 3, -4],
          rotation: null,
          scale: null,
          color: "#ffcc88",
          intensity: 15,
          distance: 15,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      center: {
        type: "Float",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.5,
          rotationIntensity: 0.1,
          floatIntensity: 0.2,
          enabled: true,
        },
        children: ["center-sphere"],
      },
      "center-sphere": {
        type: "GlassSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.5,
          widthSegments: 32,
          heightSegments: 16,
          color: "#ffddaa",
          transmission: 1,
          thickness: 0.8,
          roughness: 0,
          chromaticAberration: 0.1,
          ior: 1.8,
          distortion: 0.05,
          distortionScale: null,
          temporalDistortion: null,
          samples: 10,
          resolution: 256,
        },
        children: [],
      },
      "ring-spin-0": {
        type: "Spin",
        props: {
          position: null,
          rotation: [0.3, 0, 0.8],
          scale: null,
          speed: 1.2,
          axis: "y",
        },
        children: ["ring-torus-0"],
      },
      "ring-torus-0": {
        type: "Torus",
        props: {
          position: null,
          rotation: [1.5708, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#ffcc44",
            metalness: 0.95,
            roughness: 0.1,
            emissive: "#cc9900",
            emissiveIntensity: 0.4,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 2,
          tube: 0.04,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },
      "ring-spin-1": {
        type: "Spin",
        props: {
          position: null,
          rotation: [0.9, 0, -0.2],
          scale: null,
          speed: -0.7,
          axis: "y",
        },
        children: ["ring-torus-1"],
      },
      "ring-torus-1": {
        type: "Torus",
        props: {
          position: null,
          rotation: [1.5708, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#cc8833",
            metalness: 0.95,
            roughness: 0.1,
            emissive: "#aa6622",
            emissiveIntensity: 0.3,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 3.2,
          tube: 0.035,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },
      "ring-spin-2": {
        type: "Spin",
        props: {
          position: null,
          rotation: [-0.4, 0, 0.5],
          scale: null,
          speed: 0.4,
          axis: "y",
        },
        children: ["ring-torus-2"],
      },
      "ring-torus-2": {
        type: "Torus",
        props: {
          position: null,
          rotation: [1.5708, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#bb9944",
            metalness: 0.95,
            roughness: 0.1,
            emissive: "#886622",
            emissiveIntensity: 0.25,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 4.5,
          tube: 0.03,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },
      "ring-spin-3": {
        type: "Spin",
        props: {
          position: null,
          rotation: [0.1, 0, -0.1],
          scale: null,
          speed: -0.2,
          axis: "y",
        },
        children: ["ring-torus-3"],
      },
      "ring-torus-3": {
        type: "Torus",
        props: {
          position: null,
          rotation: [1.5708, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#997744",
            metalness: 0.95,
            roughness: 0.1,
            emissive: "#664422",
            emissiveIntensity: 0.15,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 6,
          tube: 0.025,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },
      "planet-orbit-0": {
        type: "Orbit",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          speed: 0.6,
          radius: 2.5,
          tilt: 0.3,
        },
        children: ["planet-spin-0"],
      },
      "planet-spin-0": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 3,
          axis: "y",
        },
        children: ["planet-sphere-0"],
      },
      "planet-sphere-0": {
        type: "Sphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#ffffff",
            metalness: 1,
            roughness: 0.02,
            emissive: "#ffffff",
            emissiveIntensity: 0.2,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.2,
          widthSegments: 32,
          heightSegments: 16,
        },
        children: [],
      },
      "planet-orbit-1": {
        type: "Orbit",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          speed: -0.9,
          radius: 3.8,
          tilt: 0.8,
        },
        children: ["planet-spin-1"],
      },
      "planet-spin-1": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -2,
          axis: "x",
        },
        children: ["planet-sphere-1"],
      },
      "planet-sphere-1": {
        type: "Sphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#ffcc88",
            metalness: 0.8,
            roughness: 0.15,
            emissive: "#ffcc88",
            emissiveIntensity: 0.2,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.15,
          widthSegments: 32,
          heightSegments: 16,
        },
        children: [],
      },
      "planet-orbit-2": {
        type: "Orbit",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          speed: 0.35,
          radius: 5.2,
          tilt: -0.5,
        },
        children: ["planet-spin-2"],
      },
      "planet-spin-2": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 1.5,
          axis: "z",
        },
        children: ["planet-sphere-2"],
      },
      "planet-sphere-2": {
        type: "Sphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#ccaa66",
            metalness: 0.9,
            roughness: 0.05,
            emissive: "#ccaa66",
            emissiveIntensity: 0.2,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.18,
          widthSegments: 32,
          heightSegments: 16,
        },
        children: [],
      },
      sparkles: {
        type: "Sparkles",
        props: {
          position: null,
          rotation: null,
          scale: [14, 10, 14],
          count: 150,
          speed: 0.15,
          opacity: 0.3,
          color: "#ffcc66",
          size: 1,
          noise: 2,
        },
        children: [],
      },
      post: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 1.2,
          luminanceThreshold: 0.2,
          luminanceSmoothing: null,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.5, darkness: 0.5 },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: true,
          enablePan: null,
          enableRotate: true,
          minDistance: 4,
          maxDistance: 18,
          minPolarAngle: 0.3,
          maxPolarAngle: 1.5,
          autoRotate: true,
          autoRotateSpeed: 0.3,
        },
        children: [],
      },
    },
  },
};