json-render/examples/react-three-fiber/app/scenes/hyperspace-tunnel.ts

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

export const hyperspaceTunnel: Scene = {
  name: "Hyperspace Tunnel",
  description:
    "Neon warp tunnel at breakneck speed -- bloom, camera shake, particles streaming past",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "cam",
          "controls",
          "tunnel",
          "stars",
          "sparkles-core",
          "sparkles-wide",
          "ambient",
          "center-light",
          "shake",
          "post",
          "fog",
        ],
      },
      cam: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 0, 2],
          rotation: null,
          scale: null,
          fov: 80,
          near: 0.1,
          far: 200,
          makeDefault: true,
        },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableRotate: false,
          enableZoom: false,
          enablePan: false,
        },
        children: [],
      },
      tunnel: {
        type: "WarpTunnel",
        props: {
          position: null,
          rotation: null,
          scale: null,
          ringCount: 100,
          radius: 3,
          length: 50,
          speed: 12,
          tubeRadius: 0.025,
          color1: "#00ffff",
          color2: "#ff00ff",
        },
        children: [],
      },
      stars: {
        type: "Stars",
        props: {
          radius: 80,
          depth: 60,
          count: 6000,
          factor: 5,
          saturation: 0.4,
          fade: true,
          speed: 3,
        },
        children: [],
      },
      "sparkles-core": {
        type: "Sparkles",
        props: {
          position: [0, 0, -10],
          rotation: null,
          scale: [4, 4, 30],
          count: 300,
          speed: 3,
          opacity: 1,
          color: "#00ffff",
          size: 2,
          noise: 0.5,
        },
        children: [],
      },
      "sparkles-wide": {
        type: "Sparkles",
        props: {
          position: [0, 0, -15],
          rotation: null,
          scale: [6, 6, 40],
          count: 200,
          speed: 4,
          opacity: 0.7,
          color: "#ff44ff",
          size: 1.5,
          noise: 1,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#110033", intensity: 0.2 },
        children: [],
      },
      "center-light": {
        type: "PointLight",
        props: {
          position: [0, 0, -5],
          rotation: null,
          scale: null,
          color: "#00ccff",
          intensity: 30,
          distance: 30,
          decay: 2,
          castShadow: false,
        },
        children: [],
      },
      shake: {
        type: "CameraShake",
        props: {
          intensity: 0.3,
          maxYaw: 0.03,
          maxPitch: 0.03,
          maxRoll: 0.02,
        },
        children: [],
      },
      post: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 2.5,
          luminanceThreshold: 0.1,
          luminanceSmoothing: null,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.3, darkness: 0.9 },
        children: [],
      },
      fog: {
        type: "Fog",
        props: { color: "#030008", near: 5, far: 50 },
        children: [],
      },
    },
  },
};