json-render/examples/react-three-fiber/app/scenes/storm-cell.ts

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

export const stormCell: Scene = {
  name: "Storm Cell",
  description:
    "Dark violent thunderstorm -- spinning cloud masses, pulsing lightning, rain particles, camera shake",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "sky",
          "ambient",
          "sun",
          "cloud-spin-1",
          "cloud-spin-2",
          "cloud-spin-3",
          "lightning-1-pulse",
          "lightning-2-pulse",
          "lightning-3-pulse",
          "rain",
          "shake",
          "post",
          "fog",
          "controls",
        ],
      },
      sky: {
        type: "Sky",
        props: {
          distance: null,
          sunPosition: [10, 2, 0],
          inclination: null,
          azimuth: null,
          turbidity: 20,
          rayleigh: 0.5,
          mieCoefficient: 0.01,
          mieDirectionalG: 0.9,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#111122", intensity: 0.15 },
        children: [],
      },
      sun: {
        type: "DirectionalLight",
        props: {
          position: [10, 3, 0],
          rotation: null,
          scale: null,
          color: "#334466",
          intensity: 0.5,
          castShadow: true,
        },
        children: [],
      },
      "cloud-spin-1": {
        type: "Spin",
        props: {
          position: [0, 4, 0],
          rotation: null,
          scale: null,
          speed: 0.08,
          axis: "y",
        },
        children: ["cloud-1"],
      },
      "cloud-1": {
        type: "Cloud",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          seed: 1,
          segments: 40,
          bounds: [25, 3, 25],
          volume: 15,
          speed: 0.3,
          fade: 20,
          opacity: 0.9,
          color: "#222233",
          growth: 10,
        },
        children: [],
      },
      "cloud-spin-2": {
        type: "Spin",
        props: {
          position: [0, 6, -3],
          rotation: null,
          scale: null,
          speed: -0.05,
          axis: "y",
        },
        children: ["cloud-2"],
      },
      "cloud-2": {
        type: "Cloud",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          seed: 42,
          segments: 30,
          bounds: [20, 2, 20],
          volume: 12,
          speed: 0.2,
          fade: 15,
          opacity: 0.7,
          color: "#1a1a2a",
          growth: 8,
        },
        children: [],
      },
      "cloud-spin-3": {
        type: "Spin",
        props: {
          position: [0, 8, 2],
          rotation: null,
          scale: null,
          speed: 0.03,
          axis: "y",
        },
        children: ["cloud-3"],
      },
      "cloud-3": {
        type: "Cloud",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          seed: 99,
          segments: 25,
          bounds: [30, 2, 30],
          volume: 10,
          speed: 0.15,
          fade: 25,
          opacity: 0.5,
          color: "#2a2a3a",
          growth: 6,
        },
        children: [],
      },
      "lightning-1-pulse": {
        type: "Pulse",
        props: {
          position: [2, 5, -1],
          rotation: null,
          scale: null,
          speed: 3,
          min: 0,
          max: 1,
        },
        children: ["lightning-1"],
      },
      "lightning-1": {
        type: "PointLight",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          color: "#aabbff",
          intensity: 80,
          distance: 30,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      "lightning-2-pulse": {
        type: "Pulse",
        props: {
          position: [-3, 6, 3],
          rotation: null,
          scale: null,
          speed: 4.5,
          min: 0,
          max: 1,
        },
        children: ["lightning-2"],
      },
      "lightning-2": {
        type: "PointLight",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          color: "#aaccff",
          intensity: 60,
          distance: 25,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      "lightning-3-pulse": {
        type: "Pulse",
        props: {
          position: [0, 4, -4],
          rotation: null,
          scale: null,
          speed: 2.5,
          min: 0,
          max: 1,
        },
        children: ["lightning-3"],
      },
      "lightning-3": {
        type: "PointLight",
        props: {
          position: [0, 0, 0],
          rotation: null,
          scale: null,
          color: "#99bbff",
          intensity: 40,
          distance: 20,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      rain: {
        type: "Sparkles",
        props: {
          position: [0, 5, 0],
          rotation: null,
          scale: [20, 15, 20],
          count: 500,
          speed: 5,
          opacity: 0.4,
          color: "#6688aa",
          size: 0.5,
          noise: 0.5,
        },
        children: [],
      },
      shake: {
        type: "CameraShake",
        props: {
          intensity: 0.2,
          maxYaw: 0.02,
          maxPitch: 0.03,
          maxRoll: 0.01,
        },
        children: [],
      },
      post: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 0.8,
          luminanceThreshold: 0.3,
          luminanceSmoothing: null,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.3, darkness: 0.8 },
        children: [],
      },
      fog: {
        type: "Fog",
        props: { color: "#0a0a15", near: 5, far: 30 },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: null,
          dampingFactor: null,
          enableZoom: true,
          enablePan: null,
          enableRotate: true,
          minDistance: 3,
          maxDistance: 20,
          minPolarAngle: 0.2,
          maxPolarAngle: 1.3,
          autoRotate: true,
          autoRotateSpeed: 0.1,
        },
        children: [],
      },
    },
  },
};