json-render/examples/react-three-fiber/app/scenes/orbital-chaos.ts

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

export const orbitalChaos: Scene = {
  name: "Orbital Chaos",
  description:
    "Everything in motion -- orbiting glass, spinning knots, morphing core, all with bloom",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "cam",
          "env",
          "stars",
          "ambient",
          "core-light",
          "accent-1",
          "accent-2",
          "core-pulse",
          "orbit-1",
          "orbit-2",
          "orbit-3",
          "orbit-4",
          "orbit-5",
          "orbit-6",
          "ring-spin-fast",
          "ring-spin-slow",
          "sparkles",
          "post",
          "fog",
          "controls",
        ],
      },
      cam: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 2, 8],
          fov: 50,
          makeDefault: true,
        },
        children: [],
      },
      env: {
        type: "Environment",
        props: { preset: "night", background: false, blur: 1, intensity: 0.15 },
        children: [],
      },
      stars: {
        type: "Stars",
        props: {
          radius: 120,
          depth: 60,
          count: 8000,
          factor: 5,
          saturation: 0.2,
          fade: true,
          speed: 0.5,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#110022", intensity: 0.3 },
        children: [],
      },
      "core-light": {
        type: "PointLight",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          color: "#ff44aa",
          intensity: 80,
          distance: 25,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      "accent-1": {
        type: "PointLight",
        props: {
          position: [5, 3, 5],
          rotation: null,
          scale: null,
          color: "#00ffff",
          intensity: 25,
          distance: 20,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      "accent-2": {
        type: "PointLight",
        props: {
          position: [-5, -2, -5],
          rotation: null,
          scale: null,
          color: "#ff00ff",
          intensity: 25,
          distance: 20,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },

      "core-pulse": {
        type: "Pulse",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.8,
          min: 0.85,
          max: 1.15,
        },
        children: ["core-spin"],
      },
      "core-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.3,
          axis: "y",
        },
        children: ["core-blob"],
      },
      "core-blob": {
        type: "DistortSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 1.2,
          widthSegments: 64,
          heightSegments: 32,
          color: "#ff2288",
          speed: 4,
          distort: 0.6,
          metalness: 0.1,
          roughness: 0.1,
        },
        children: [],
      },

      "orbit-1": {
        type: "Orbit",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          speed: 0.8,
          radius: 4,
          tilt: 0.5,
        },
        children: ["orb-1-spin"],
      },
      "orb-1-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 2,
          axis: "x",
        },
        children: ["orb-1"],
      },
      "orb-1": {
        type: "GlassSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.4,
          widthSegments: 32,
          heightSegments: 16,
          color: "#00ffff",
          transmission: 1,
          thickness: 0.5,
          roughness: 0,
          chromaticAberration: 0.15,
          ior: 1.8,
          distortion: 0.1,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },

      "orbit-2": {
        type: "Orbit",
        props: {
          position: [0, 0.5, 0],
          rotation: null,
          scale: null,
          speed: -0.6,
          radius: 5.5,
          tilt: 1,
        },
        children: ["orb-2-spin"],
      },
      "orb-2-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 3,
          axis: "z",
        },
        children: ["orb-2"],
      },
      "orb-2": {
        type: "TorusKnot",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#ff00ff",
            metalness: 0.9,
            roughness: 0.1,
            emissive: "#ff00ff",
            emissiveIntensity: 0.8,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 0.35,
          tube: 0.12,
          tubularSegments: 64,
          radialSegments: 8,
          p: 2,
          q: 3,
        },
        children: [],
      },

      "orbit-3": {
        type: "Orbit",
        props: {
          position: [0, -0.3, 0],
          rotation: null,
          scale: null,
          speed: 1.2,
          radius: 3.2,
          tilt: 0.3,
        },
        children: ["orb-3"],
      },
      "orb-3": {
        type: "GlassSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.3,
          widthSegments: 32,
          heightSegments: 16,
          color: "#ff8800",
          transmission: 1,
          thickness: 0.4,
          roughness: 0,
          chromaticAberration: 0.1,
          ior: 1.6,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },

      "orbit-4": {
        type: "Orbit",
        props: {
          position: [0, 1, 0],
          rotation: null,
          scale: null,
          speed: -1.5,
          radius: 6.5,
          tilt: -0.8,
        },
        children: ["orb-4-spin"],
      },
      "orb-4-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -4,
          axis: "y",
        },
        children: ["orb-4"],
      },
      "orb-4": {
        type: "Sphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#00ff88",
            metalness: null,
            roughness: null,
            emissive: "#00ff88",
            emissiveIntensity: 0.8,
            opacity: null,
            transparent: null,
            wireframe: true,
          },
          radius: 0.35,
          widthSegments: 16,
          heightSegments: 12,
        },
        children: [],
      },

      "orbit-5": {
        type: "Orbit",
        props: {
          position: [0, -0.5, 0],
          rotation: null,
          scale: null,
          speed: 0.4,
          radius: 8,
          tilt: 0.2,
        },
        children: ["orb-5-spin"],
      },
      "orb-5-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 1.5,
          axis: "z",
        },
        children: ["orb-5"],
      },
      "orb-5": {
        type: "GlassBox",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          width: 0.5,
          height: 0.5,
          depth: 0.5,
          color: "#ff44ff",
          transmission: 1,
          thickness: 0.4,
          roughness: 0,
          chromaticAberration: 0.08,
          ior: 1.7,
          distortion: 0,
          distortionScale: null,
          temporalDistortion: null,
          samples: 6,
          resolution: 128,
        },
        children: [],
      },

      "orbit-6": {
        type: "Orbit",
        props: {
          position: [0, 0.8, 0],
          rotation: null,
          scale: null,
          speed: 2,
          radius: 2.2,
          tilt: 1.5,
        },
        children: ["orb-6"],
      },
      "orb-6": {
        type: "DistortSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.25,
          widthSegments: 32,
          heightSegments: 16,
          color: "#ffcc00",
          speed: 5,
          distort: 0.7,
          metalness: 0.5,
          roughness: 0.1,
        },
        children: [],
      },

      "ring-spin-fast": {
        type: "Spin",
        props: {
          position: null,
          rotation: [0.3, 0, 0],
          scale: null,
          speed: 0.5,
          axis: "y",
        },
        children: ["ring-inner"],
      },
      "ring-inner": {
        type: "Torus",
        props: {
          position: null,
          rotation: [PI / 2, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#00ffff",
            metalness: 0.9,
            roughness: 0.1,
            emissive: "#00ccff",
            emissiveIntensity: 0.5,
            opacity: 0.3,
            transparent: true,
            wireframe: null,
          },
          radius: 9,
          tube: 0.015,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },
      "ring-spin-slow": {
        type: "Spin",
        props: {
          position: null,
          rotation: [-0.5, 0, 0.3],
          scale: null,
          speed: -0.3,
          axis: "y",
        },
        children: ["ring-outer"],
      },
      "ring-outer": {
        type: "Torus",
        props: {
          position: null,
          rotation: [PI / 2, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#ff00ff",
            metalness: 0.9,
            roughness: 0.1,
            emissive: "#ff00aa",
            emissiveIntensity: 0.3,
            opacity: 0.2,
            transparent: true,
            wireframe: null,
          },
          radius: 11,
          tube: 0.012,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },

      sparkles: {
        type: "Sparkles",
        props: {
          position: null,
          rotation: null,
          scale: [18, 18, 18],
          count: 400,
          speed: 0.4,
          opacity: 0.5,
          color: "#ffddaa",
          size: 1.2,
          noise: 2,
        },
        children: [],
      },
      post: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 2,
          luminanceThreshold: 0.15,
          luminanceSmoothing: null,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.4, darkness: 0.7 },
        children: [],
      },
      fog: {
        type: "Fog",
        props: { color: "#030008", near: 10, far: 40 },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: true,
          enablePan: null,
          enableRotate: true,
          minDistance: 5,
          maxDistance: 25,
          minPolarAngle: null,
          maxPolarAngle: null,
          autoRotate: true,
          autoRotateSpeed: 0.4,
        },
        children: [],
      },
    },
  },
};