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

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

const goldMaterial = {
  color: "#cc8833",
  metalness: 1,
  roughness: 0.05,
};

const blueMaterial = {
  color: "#3388cc",
  metalness: 1,
  roughness: 0.05,
};

const magentaMaterial = {
  color: "#cc3388",
  metalness: 1,
  roughness: 0.05,
};

export const pipes: Scene = {
  name: "Pipes",
  description:
    "Classic 3D Pipes screensaver -- chrome pipes snaking through space at right angles",
  spec: {
    root: "scene",
    elements: {
      scene: {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "camera",
          "env",
          "ambient",
          "directional",
          "pipe-system",
          "post",
          "fog",
          "controls",
        ],
      },
      camera: {
        type: "PerspectiveCamera",
        props: {
          position: [0, 3, 12],
          rotation: null,
          scale: null,
          fov: 50,
          near: null,
          far: null,
          makeDefault: true,
        },
        children: [],
      },
      env: {
        type: "Environment",
        props: {
          preset: "warehouse",
          background: false,
          blur: 0.5,
          intensity: 1,
        },
        children: [],
      },
      ambient: {
        type: "AmbientLight",
        props: { color: "#ffffff", intensity: 0.3 },
        children: [],
      },
      directional: {
        type: "DirectionalLight",
        props: {
          position: [5, 10, 5],
          rotation: null,
          scale: null,
          color: "#ffffff",
          intensity: 1,
          castShadow: null,
        },
        children: [],
      },
      "pipe-system": {
        type: "Spin",
        props: {
          position: null,
          rotation: null,
          scale: null,
          speed: 0.1,
          axis: "y",
        },
        children: ["pipe1-group", "pipe2-group", "pipe3-group"],
      },
      "pipe1-group": {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "p1-j0",
          "p1-s1",
          "p1-j1",
          "p1-s2",
          "p1-j2",
          "p1-s3",
          "p1-j3",
          "p1-s4",
          "p1-j4",
          "p1-s5",
          "p1-j5",
          "p1-s6",
          "p1-j6",
        ],
      },
      "p1-j0": {
        type: "Sphere",
        props: {
          position: [-3, -3, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p1-j1": {
        type: "Sphere",
        props: {
          position: [-3, 0, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p1-j2": {
        type: "Sphere",
        props: {
          position: [1, 0, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p1-j3": {
        type: "Sphere",
        props: {
          position: [1, 2, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p1-j4": {
        type: "Sphere",
        props: {
          position: [1, 2, -3],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p1-j5": {
        type: "Sphere",
        props: {
          position: [1, 0, -3],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p1-j6": {
        type: "Sphere",
        props: {
          position: [-1, 0, -3],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p1-s1": {
        type: "Cylinder",
        props: {
          position: [-3, -1.5, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 3,
          radialSegments: 12,
        },
        children: [],
      },
      "p1-s2": {
        type: "Cylinder",
        props: {
          position: [-1, 0, 0],
          rotation: [0, 0, 1.5708],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 4,
          radialSegments: 12,
        },
        children: [],
      },
      "p1-s3": {
        type: "Cylinder",
        props: {
          position: [1, 1, 0],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 2,
          radialSegments: 12,
        },
        children: [],
      },
      "p1-s4": {
        type: "Cylinder",
        props: {
          position: [1, 2, -1.5],
          rotation: [1.5708, 0, 0],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 3,
          radialSegments: 12,
        },
        children: [],
      },
      "p1-s5": {
        type: "Cylinder",
        props: {
          position: [1, 1, -3],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 2,
          radialSegments: 12,
        },
        children: [],
      },
      "p1-s6": {
        type: "Cylinder",
        props: {
          position: [0, 0, -3],
          rotation: [0, 0, 1.5708],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: goldMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 2,
          radialSegments: 12,
        },
        children: [],
      },
      "pipe2-group": {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "p2-j0",
          "p2-s1",
          "p2-j1",
          "p2-s2",
          "p2-j2",
          "p2-s3",
          "p2-j3",
          "p2-s4",
          "p2-j4",
          "p2-s5",
          "p2-j5",
          "p2-s6",
          "p2-j6",
        ],
      },
      "p2-j0": {
        type: "Sphere",
        props: {
          position: [2, -3, 2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p2-j1": {
        type: "Sphere",
        props: {
          position: [2, 1, 2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p2-j2": {
        type: "Sphere",
        props: {
          position: [2, 1, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p2-j3": {
        type: "Sphere",
        props: {
          position: [-1, 1, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p2-j4": {
        type: "Sphere",
        props: {
          position: [-1, 4, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p2-j5": {
        type: "Sphere",
        props: {
          position: [-3, 4, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p2-j6": {
        type: "Sphere",
        props: {
          position: [-3, 4, 1],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p2-s1": {
        type: "Cylinder",
        props: {
          position: [2, -1, 2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 4,
          radialSegments: 12,
        },
        children: [],
      },
      "p2-s2": {
        type: "Cylinder",
        props: {
          position: [2, 1, 0],
          rotation: [1.5708, 0, 0],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 4,
          radialSegments: 12,
        },
        children: [],
      },
      "p2-s3": {
        type: "Cylinder",
        props: {
          position: [0.5, 1, -2],
          rotation: [0, 0, 1.5708],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 3,
          radialSegments: 12,
        },
        children: [],
      },
      "p2-s4": {
        type: "Cylinder",
        props: {
          position: [-1, 2.5, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 3,
          radialSegments: 12,
        },
        children: [],
      },
      "p2-s5": {
        type: "Cylinder",
        props: {
          position: [-2, 4, -2],
          rotation: [0, 0, 1.5708],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 2,
          radialSegments: 12,
        },
        children: [],
      },
      "p2-s6": {
        type: "Cylinder",
        props: {
          position: [-3, 4, -0.5],
          rotation: [1.5708, 0, 0],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: blueMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 3,
          radialSegments: 12,
        },
        children: [],
      },
      "pipe3-group": {
        type: "Group",
        props: { position: null, rotation: null, scale: null },
        children: [
          "p3-j0",
          "p3-s1",
          "p3-j1",
          "p3-s2",
          "p3-j2",
          "p3-s3",
          "p3-j3",
          "p3-s4",
          "p3-j4",
          "p3-s5",
          "p3-j5",
        ],
      },
      "p3-j0": {
        type: "Sphere",
        props: {
          position: [-2, 3, 3],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p3-j1": {
        type: "Sphere",
        props: {
          position: [-2, -2, 3],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p3-j2": {
        type: "Sphere",
        props: {
          position: [1, -2, 3],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p3-j3": {
        type: "Sphere",
        props: {
          position: [1, -2, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p3-j4": {
        type: "Sphere",
        props: {
          position: [1, 0, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p3-j5": {
        type: "Sphere",
        props: {
          position: [-3, 0, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radius: 0.12,
          widthSegments: null,
          heightSegments: null,
        },
        children: [],
      },
      "p3-s1": {
        type: "Cylinder",
        props: {
          position: [-2, 0.5, 3],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 5,
          radialSegments: 12,
        },
        children: [],
      },
      "p3-s2": {
        type: "Cylinder",
        props: {
          position: [-0.5, -2, 3],
          rotation: [0, 0, 1.5708],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 3,
          radialSegments: 12,
        },
        children: [],
      },
      "p3-s3": {
        type: "Cylinder",
        props: {
          position: [1, -2, 0.5],
          rotation: [1.5708, 0, 0],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 5,
          radialSegments: 12,
        },
        children: [],
      },
      "p3-s4": {
        type: "Cylinder",
        props: {
          position: [1, -1, -2],
          rotation: null,
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 2,
          radialSegments: 12,
        },
        children: [],
      },
      "p3-s5": {
        type: "Cylinder",
        props: {
          position: [-1, 0, -2],
          rotation: [0, 0, 1.5708],
          scale: null,
          castShadow: null,
          receiveShadow: null,
          material: magentaMaterial,
          radiusTop: 0.08,
          radiusBottom: 0.08,
          height: 4,
          radialSegments: 12,
        },
        children: [],
      },
      post: {
        type: "EffectComposer",
        props: { enabled: true, multisampling: 8 },
        children: ["bloom", "vignette"],
      },
      bloom: {
        type: "Bloom",
        props: {
          intensity: 0.4,
          luminanceThreshold: 0.4,
          luminanceSmoothing: null,
          mipmapBlur: true,
        },
        children: [],
      },
      vignette: {
        type: "Vignette",
        props: { offset: 0.3, darkness: 0.4 },
        children: [],
      },
      fog: {
        type: "Fog",
        props: { color: "#111111", near: 10, far: 30 },
        children: [],
      },
      controls: {
        type: "OrbitControls",
        props: {
          enableDamping: true,
          dampingFactor: null,
          enableZoom: null,
          enablePan: null,
          enableRotate: null,
          minDistance: 5,
          maxDistance: 20,
          minPolarAngle: null,
          maxPolarAngle: null,
          autoRotate: true,
          autoRotateSpeed: 0.6,
        },
        children: [],
      },
    },
  },
};