json-render/examples/react-three-fiber/app/scenes/perpetual-motion.ts

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

export const perpetualMotion: Scene = {
  name: "Perpetual Motion Machine",
  description:
    "A gyroscope/gimbal with 3 nested spinning rings on different axes, with a perfectly still glass sphere floating at the center. Clean, minimal, mesmerizing.",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "env",
          "ambient",
          "key",
          "fill",
          "outer-spin",
          "sparkles",
          "floor",
          "shadows",
          "post",
          "controls",
        ],
      },
      env: {
        type: "Environment",
        props: {
          preset: "studio",
          background: false,
          blur: null,
          intensity: 1,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#ffffff", intensity: 0.3 },
        children: [],
      },
      key: {
        type: "DirectionalLight",
        props: {
          position: [5, 8, 5],
          rotation: null,
          scale: null,
          color: "#ffffff",
          intensity: 2,
          castShadow: true,
        },
        children: [],
      },
      fill: {
        type: "PointLight",
        props: {
          position: [-3, 4, -3],
          rotation: null,
          scale: null,
          color: "#aaccff",
          intensity: 10,
          distance: 15,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      "outer-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.4,
          axis: "y",
        },
        children: ["outer-ring", "mid-spin"],
      },
      "outer-ring": {
        type: "Torus",
        props: {
          position: null,
          rotation: [PI / 2, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#cccccc",
            metalness: 1,
            roughness: 0.05,
            emissive: "#ffffff",
            emissiveIntensity: 0.05,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 4,
          tube: 0.06,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },
      "mid-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -0.8,
          axis: "x",
        },
        children: ["mid-ring", "inner-spin"],
      },
      "mid-ring": {
        type: "Torus",
        props: {
          position: null,
          rotation: [PI / 2, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#ffcc44",
            metalness: 0.95,
            roughness: 0.08,
            emissive: "#cc9900",
            emissiveIntensity: 0.1,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 3,
          tube: 0.05,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },
      "inner-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 1.5,
          axis: "z",
        },
        children: ["inner-ring", "center-float"],
      },
      "inner-ring": {
        type: "Torus",
        props: {
          position: null,
          rotation: [PI / 2, 0, 0],
          scale: null,
          castShadow: false,
          receiveShadow: false,
          material: {
            color: "#cc8844",
            metalness: 0.9,
            roughness: 0.1,
            emissive: "#996633",
            emissiveIntensity: 0.1,
            opacity: null,
            transparent: null,
            wireframe: null,
          },
          radius: 2,
          tube: 0.04,
          radialSegments: null,
          tubularSegments: 128,
        },
        children: [],
      },
      "center-float": {
        type: "Float",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          speed: 0.3,
          rotationIntensity: 0,
          floatIntensity: 0.1,
          enabled: true,
        },
        children: ["center-orb"],
      },
      "center-orb": {
        type: "GlassSphere",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: true,
          receiveShadow: false,
          radius: 0.8,
          widthSegments: 64,
          heightSegments: 32,
          color: "#ffffff",
          transmission: 1,
          thickness: 1,
          roughness: 0,
          chromaticAberration: 0.12,
          ior: 2,
          distortion: 0.1,
          distortionScale: 0.4,
          temporalDistortion: 0.4,
          samples: 10,
          resolution: 256,
        },
        children: [],
      },
      sparkles: {
        type: "Sparkles",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: [10, 10, 10],
          count: 100,
          speed: 0.1,
          opacity: 0.2,
          color: "#ccddff",
          size: 0.8,
          noise: 2,
        },
        children: [],
      },
      floor: {
        type: "ReflectorPlane",
        props: {
          position: [0, -4.5, 0],
          rotation: [-PI / 2, 0, 0],
          scale: null,
          width: 25,
          height: 25,
          color: "#1a1a2a",
          resolution: 1024,
          blur: 400,
          mirror: 0.7,
          mixBlur: 10,
          mixStrength: 2,
          depthScale: 0.2,
          metalness: 0.5,
          roughness: 1,
        },
        children: [],
      },
      shadows: {
        type: "ContactShadows",
        props: {
          position: [0, -4.5, 0],
          rotation: null,
          scale: null,
          opacity: 0.3,
          width: 12,
          height: 12,
          blur: 2.5,
          near: null,
          far: 10,
          smooth: true,
          resolution: 512,
          frames: null,
          color: "#000000",
        },
        children: [],
      },
      post: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 0.8,
          luminanceThreshold: 0.25,
          luminanceSmoothing: null,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.5, darkness: 0.4 },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: true,
          enablePan: null,
          enableRotate: true,
          minDistance: 5,
          maxDistance: 16,
          minPolarAngle: 0.3,
          maxPolarAngle: 1.5,
          autoRotate: true,
          autoRotateSpeed: 0.3,
        },
        children: [],
      },
    },
  },
};