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

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

export const mystify: Scene = {
  name: "Mystify",
  description:
    "Neon wireframe torus knots orbiting in the void -- the Windows Mystify screensaver in 3D",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "cam",
          "ambient",
          "shape1",
          "shape2",
          "shape3",
          "shape4",
          "shape5",
          "shape6",
          "shape7",
          "post",
          "controls",
        ],
      },
      cam: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 0, 10],
          rotation: null,
          scale: null,
          fov: 55,
          near: 0.1,
          far: 1000,
          makeDefault: true,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#111111", intensity: 0.1 },
        children: [],
      },
      shape1: {
        type: "Orbit",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.5,
          radius: 3,
          tilt: 0.3,
        },
        children: ["s1-spin"],
      },
      "s1-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 1.5,
          axis: "x",
        },
        children: ["s1-body"],
      },
      "s1-body": {
        type: "TorusKnot",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.4,
          tube: 0.02,
          p: 2,
          q: 3,
          tubularSegments: 128,
          radialSegments: 4,
          material: {
            color: "#00ffff",
            emissive: "#00ffff",
            emissiveIntensity: 2,
            wireframe: true,
          },
        },
        children: [],
      },
      shape2: {
        type: "Orbit",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -0.4,
          radius: 4,
          tilt: -0.5,
        },
        children: ["s2-spin"],
      },
      "s2-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -1,
          axis: "z",
        },
        children: ["s2-body"],
      },
      "s2-body": {
        type: "Torus",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.6,
          tube: 0.015,
          radialSegments: 4,
          tubularSegments: 128,
          material: {
            color: "#ff00ff",
            emissive: "#ff00ff",
            emissiveIntensity: 2,
            wireframe: true,
          },
        },
        children: [],
      },
      shape3: {
        type: "Orbit",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.7,
          radius: 2.5,
          tilt: 0.8,
        },
        children: ["s3-spin"],
      },
      "s3-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 2,
          axis: "y",
        },
        children: ["s3-body"],
      },
      "s3-body": {
        type: "TorusKnot",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.35,
          tube: 0.015,
          p: 3,
          q: 2,
          tubularSegments: 128,
          radialSegments: 4,
          material: {
            color: "#ffff00",
            emissive: "#ffff00",
            emissiveIntensity: 2,
            wireframe: true,
          },
        },
        children: [],
      },
      shape4: {
        type: "Orbit",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -0.6,
          radius: 3.5,
          tilt: -0.2,
        },
        children: ["s4-spin"],
      },
      "s4-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 1.2,
          axis: "x",
        },
        children: ["s4-body"],
      },
      "s4-body": {
        type: "Torus",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.5,
          tube: 0.012,
          radialSegments: 4,
          tubularSegments: 128,
          material: {
            color: "#00ff44",
            emissive: "#00ff44",
            emissiveIntensity: 2,
            wireframe: true,
          },
        },
        children: [],
      },
      shape5: {
        type: "Orbit",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.3,
          radius: 5,
          tilt: 0.6,
        },
        children: ["s5-spin"],
      },
      "s5-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -1.8,
          axis: "z",
        },
        children: ["s5-body"],
      },
      "s5-body": {
        type: "TorusKnot",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.5,
          tube: 0.018,
          p: 2,
          q: 5,
          tubularSegments: 128,
          radialSegments: 4,
          material: {
            color: "#ff4400",
            emissive: "#ff4400",
            emissiveIntensity: 2,
            wireframe: true,
          },
        },
        children: [],
      },
      shape6: {
        type: "Orbit",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -0.8,
          radius: 2,
          tilt: -0.7,
        },
        children: ["s6-spin"],
      },
      "s6-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 2.5,
          axis: "y",
        },
        children: ["s6-body"],
      },
      "s6-body": {
        type: "Torus",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.3,
          tube: 0.01,
          radialSegments: 4,
          tubularSegments: 128,
          material: {
            color: "#4488ff",
            emissive: "#4488ff",
            emissiveIntensity: 2,
            wireframe: true,
          },
        },
        children: [],
      },
      shape7: {
        type: "Orbit",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.45,
          radius: 4.5,
          tilt: 1,
        },
        children: ["s7-spin"],
      },
      "s7-spin": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: -0.8,
          axis: "x",
        },
        children: ["s7-body"],
      },
      "s7-body": {
        type: "TorusKnot",
        props: {
          position: null,
          rotation: null,
          scale: null,
          castShadow: false,
          receiveShadow: false,
          radius: 0.45,
          tube: 0.015,
          p: 3,
          q: 4,
          tubularSegments: 128,
          radialSegments: 4,
          material: {
            color: "#ff88ff",
            emissive: "#ff88ff",
            emissiveIntensity: 2,
            wireframe: true,
          },
        },
        children: [],
      },
      post: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 3,
          luminanceThreshold: 0.05,
          luminanceSmoothing: 0.3,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.2, darkness: 0.8 },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: true,
          enablePan: true,
          enableRotate: true,
          minDistance: 4,
          maxDistance: 18,
          minPolarAngle: null,
          maxPolarAngle: null,
          autoRotate: true,
          autoRotateSpeed: 0.3,
        },
        children: [],
      },
    },
  },
};