# Bloom HDR Workflow GLTF

Demo: https://pmndrs.github.io/examples/examples/bloom-hdr-workflow-gltf
Source: https://github.com/pmndrs/examples/tree/main/examples/bloom-hdr-workflow-gltf
Scaffold: npx degit pmndrs/examples/examples/bloom-hdr-workflow-gltf
Published: 2022-06-23
Authors: Paul Henschel
Tags: bloom, hdr, gltf, selective
Ported from: https://codesandbox.io/s/whnhyr
Dependencies: @react-three/drei@10.7.8, @react-three/fiber@9.6.1, react@19.2.8, react-dom@19.2.8, three@0.165.0
Binary files, in the repository but not below: src/123-transformed.glb

## src/App.tsx

```tsx
import { Canvas, extend } from "@react-three/fiber";
import {
  Effects,
  OrbitControls,
  OrthographicCamera,
  BakeShadows,
} from "@react-three/drei";
import { UnrealBloomPass } from "three-stdlib";
import { Tower } from "./Tower";

extend({ UnrealBloomPass });

export default function App() {
  return (
    <Canvas shadows gl={{ antialias: false }}>
      <color attach="background" args={["#202030"]} />
      <fog attach="fog" args={["#202030", 10, 25]} />
      <hemisphereLight
        intensity={0.2 * Math.PI}
        color="#eaeaea"
        groundColor="blue"
      />
      <directionalLight
        castShadow
        intensity={0.2 * Math.PI}
        shadow-mapSize={[1024, 1024]}
        shadow-bias={-0.0001}
        position={[10, 10, -10]}
      />
      <Tower position={[0, -3.25, 0]} />
      <Effects disableGamma>
        <unrealBloomPass threshold={1} strength={1.0} radius={0.5} />
      </Effects>
      <BakeShadows />
      <OrthographicCamera
        makeDefault
        far={100}
        near={0.1}
        position={[-10, 2, -10]}
        zoom={110}
      />
      <OrbitControls autoRotate enableZoom={false} />
    </Canvas>
  );
}
```

## src/Tower.tsx

```tsx
import * as THREE from "three";
import { type GLTF } from "three-stdlib";
import { type ThreeElements } from "@react-three/fiber";
import { useGLTF, Sparkles } from "@react-three/drei";

import oneTwoThreeModel from "./123-transformed.glb?url";

const glowRed = new THREE.MeshBasicMaterial({
  color: new THREE.Color(7, 0, 0.5),
  toneMapped: false,
});
const glowBlue = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0, 0.5, 20),
  toneMapped: false,
});
const glowGreen = new THREE.MeshBasicMaterial({
  color: new THREE.Color(0, 3, 1),
  toneMapped: false,
});

type GLTFResult = GLTF & {
  nodes: {
    Cube: THREE.Mesh;
    Cube001: THREE.Mesh;
    Cube002: THREE.Mesh;
    Cube003: THREE.Mesh;
    Cube004: THREE.Mesh;
    Cube005: THREE.Mesh;
    Cube006: THREE.Mesh;
    Cube007: THREE.Mesh;
    Cube008: THREE.Mesh;
    Cube009: THREE.Mesh;
    Cube010: THREE.Mesh;
    Cube011: THREE.Mesh;
    Cube012: THREE.Mesh;
    Cube013: THREE.Mesh;
    Cube014: THREE.Mesh;
    Cube015: THREE.Mesh;
    Cube016: THREE.Mesh;
    Cube017: THREE.Mesh;
    Cube018: THREE.Mesh;
    Cube019: THREE.Mesh;
    Cube020: THREE.Mesh;
    Cube021: THREE.Mesh;
    Cube022: THREE.Mesh;
    Cube023: THREE.Mesh;
    Cube024: THREE.Mesh;
    Cube025: THREE.Mesh;
    Cube026: THREE.Mesh;
    Cube027: THREE.Mesh;
    Cube028: THREE.Mesh;
    Cube029: THREE.Mesh;
    Cube030: THREE.Mesh;
    Cube031: THREE.Mesh;
    Cube032: THREE.Mesh;
    Cube033: THREE.Mesh;
    Cube034: THREE.Mesh;
    Cube035: THREE.Mesh;
    Cube036: THREE.Mesh;
    Cube037: THREE.Mesh;
    Cube038: THREE.Mesh;
    Cube039: THREE.Mesh;
    Cube040: THREE.Mesh;
    Cube041: THREE.Mesh;
    Cube042: THREE.Mesh;
    Cube043: THREE.Mesh;
    Cube044: THREE.Mesh;
    Cube045: THREE.Mesh;
    Cube046: THREE.Mesh;
    Cube047: THREE.Mesh;
    Cube048: THREE.Mesh;
    Cube049: THREE.Mesh;
    Cube050: THREE.Mesh;
    Cube051: THREE.Mesh;
    Cube052: THREE.Mesh;
    Cube053: THREE.Mesh;
    Cube054: THREE.Mesh;
    Cube055: THREE.Mesh;
    Cube056: THREE.Mesh;
    Cube057: THREE.Mesh;
    Cube058: THREE.Mesh;
    Cube059: THREE.Mesh;
    Cube060: THREE.Mesh;
    Cube061: THREE.Mesh;
    Cube062: THREE.Mesh;
    Cube063: THREE.Mesh;
    Cube064: THREE.Mesh;
    Cylinder001: THREE.Mesh;
    Cylinder007: THREE.Mesh;
    Cylinder008: THREE.Mesh;
    Cylinder009: THREE.Mesh;
    Cylinder010: THREE.Mesh;
    NurbsCurve: THREE.Mesh;
    NurbsCurve001: THREE.Mesh;
    NurbsPath: THREE.Mesh;
    NurbsPath001: THREE.Mesh;
    NurbsPath002: THREE.Mesh;
    NurbsPath003: THREE.Mesh;
    NurbsPath004: THREE.Mesh;
    NurbsPath005: THREE.Mesh;
    NurbsPath006: THREE.Mesh;
    NurbsPath007: THREE.Mesh;
    NurbsPath008: THREE.Mesh;
    NurbsPath009: THREE.Mesh;
    NurbsPath010: THREE.Mesh;
    NurbsPath011: THREE.Mesh;
    NurbsPath012: THREE.Mesh;
    NurbsPath013: THREE.Mesh;
    NurbsPath014: THREE.Mesh;
    NurbsPath015: THREE.Mesh;
    NurbsPath016: THREE.Mesh;
    NurbsPath017: THREE.Mesh;
    NurbsPath018: THREE.Mesh;
    NurbsPath019: THREE.Mesh;
    NurbsPath020: THREE.Mesh;
    Plane: THREE.Mesh;
    Plane001: THREE.Mesh;
    Plane002: THREE.Mesh;
    Plane003: THREE.Mesh;
    Plane004: THREE.Mesh;
    Plane005: THREE.Mesh;
    Plane006: THREE.Mesh;
    Plane007: THREE.Mesh;
    Plane008: THREE.Mesh;
    Plane009: THREE.Mesh;
    Plane010: THREE.Mesh;
    Plane011: THREE.Mesh;
    Plane012: THREE.Mesh;
    Plane013: THREE.Mesh;
    Plane014: THREE.Mesh;
    Plane015: THREE.Mesh;
    Plane016: THREE.Mesh;
    Sphere: THREE.Mesh;
    Text: THREE.Mesh;
    Text002: THREE.Mesh;
    Text003: THREE.Mesh;
    Torus: THREE.Mesh;
    Torus001: THREE.Mesh;
    body: THREE.Mesh;
    windows: THREE.Mesh;
  };
  materials: {
    "Material.008": THREE.MeshStandardMaterial;
    "Material.006": THREE.MeshStandardMaterial;
    kabeli: THREE.MeshStandardMaterial;
    "Material.014": THREE.MeshStandardMaterial;
    Material: THREE.MeshStandardMaterial;
    "kabeli.001": THREE.MeshStandardMaterial;
    "Material.016": THREE.MeshStandardMaterial;
    "Material.004": THREE.MeshStandardMaterial;
    "Material.003": THREE.MeshStandardMaterial;
    "Material.005": THREE.MeshStandardMaterial;
    "Material.011": THREE.MeshStandardMaterial;
    "Material.021": THREE.MeshStandardMaterial;
    "Material.013": THREE.MeshStandardMaterial;
    "Material.010": THREE.MeshStandardMaterial;
    "Material.007": THREE.MeshStandardMaterial;
  };
};

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Source: https://discourse.threejs.org/t/struggling-with-gltf-and-lighting/39564
*/
export function Tower({ ...props }: ThreeElements["group"]) {
  const { nodes, materials } = useGLTF(
    oneTwoThreeModel,
  ) as unknown as GLTFResult;
  return (
    <group {...props} dispose={null}>
      <Sparkles count={200} scale={[20, 20, 10]} size={1.5} speed={2} />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane.geometry}
        material={materials["Material.008"]}
        material-color="#778"
        position={[-0.1, 0.03, 0.07]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane001.geometry}
        material={materials["Material.006"]}
        position={[-0.08, 1.38, -0.62]}
        rotation={[Math.PI / 2, -1.57, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane002.geometry}
        material={materials.kabeli}
        position={[-2.58, 1.33, -0.4]}
        rotation={[0, 0, -2.17]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane003.geometry}
        material={materials.kabeli}
        position={[-3.11, 1.12, -0.93]}
        rotation={[0, 0, -2.17]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath001.geometry}
        material={glowGreen}
        position={[-1.34, 1.31, -0.7]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube009.geometry}
        material={materials["Material.006"]}
        position={[-1.58, 1.54, -0.79]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath002.geometry}
        material={glowRed}
        position={[-1.24, 1.31, -0.74]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath003.geometry}
        material={glowGreen}
        position={[-1.99, 1.43, -0.44]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath004.geometry}
        material={glowRed}
        position={[-1.99, 1.43, -0.4]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath019.geometry}
        material={materials.kabeli}
        position={[0.71, 2.56, -0.56]}
        scale={-0.17}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube010.geometry}
        material={materials["Material.014"]}
        position={[-0.03, 3.49, 0.37]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube011.geometry}
        material={materials["Material.014"]}
        position={[-0.67, 3.58, 0.01]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube013.geometry}
        material={materials["Material.014"]}
        position={[-0.62, 4.05, 0.26]}
        scale={[1, 1, 0.45]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube014.geometry}
        material={materials["Material.014"]}
        position={[0.49, 3.98, -0.02]}
        rotation={[0, 0, 3.14]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube015.geometry}
        material={materials["Material.014"]}
        position={[0.49, 4.32, -0.02]}
        rotation={[0, 0, 3.14]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube016.geometry}
        material={materials["Material.014"]}
        position={[-0.07, 1.87, -0.52]}
        rotation={[3.14, 1.57, 0]}
        scale={[1, 1.67, 1.42]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube012.geometry}
        material={materials["Material.014"]}
        position={[-0.71, 3.16, -0.31]}
        scale={[1, 1, 0.45]}
      />
      <mesh
        geometry={nodes.NurbsPath005.geometry}
        material={glowBlue}
        position={[-0.64, 2.55, -0.63]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath006.geometry}
        material={glowRed}
        material-fog={false}
        position={[-0.44, 2.55, -0.63]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath007.geometry}
        material={glowGreen}
        position={[-0.65, 2.77, -0.54]}
        rotation={[-0.03, 0, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath008.geometry}
        material={glowGreen}
        position={[-0.65, 2.73, -0.54]}
        rotation={[-0.03, 0, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath009.geometry}
        material={glowGreen}
        position={[-0.82, 2.84, -0.29]}
        rotation={[0, 0, -Math.PI / 2]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath010.geometry}
        material={glowGreen}
        position={[-0.82, 2.84, -0.27]}
        rotation={[0, 0, -Math.PI / 2]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath011.geometry}
        material={glowGreen}
        position={[-0.77, 3.31, 0.36]}
        rotation={[0, 0, -Math.PI / 2]}
      />
      <mesh
        geometry={nodes.NurbsPath012.geometry}
        material={glowBlue}
        position={[-0.79, 3.32, 0.32]}
        rotation={[0, 0, -Math.PI / 2]}
      />
      <mesh
        geometry={nodes.NurbsPath013.geometry}
        material={glowBlue}
        position={[-0.33, 4.12, 0.46]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath014.geometry}
        material={glowGreen}
        position={[-0.62, 3.54, 0.56]}
        rotation={[0.94, -0.04, -2.38]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath015.geometry}
        material={glowGreen}
        position={[-0.45, 4.08, -0.57]}
      />
      <mesh
        geometry={nodes.NurbsPath016.geometry}
        material={glowBlue}
        position={[-0.54, 4.1, -0.59]}
      />
      <mesh
        geometry={nodes.NurbsPath017.geometry}
        material={glowBlue}
        position={[0.68, 4.14, 0.51]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath018.geometry}
        material={glowGreen}
        position={[0.68, 4.46, 0.51]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsCurve.geometry}
        material={materials.Material}
        position={[-0.45, 6.42, 0.02]}
        rotation={[-1.24, -1.09, -1.2]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cylinder007.geometry}
        material={materials["kabeli.001"]}
        position={[-0.15, 6.19, -0.04]}
        rotation={[0, -1.4, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cylinder009.geometry}
        material={materials["kabeli.001"]}
        position={[0.07, 6.18, -0.08]}
        rotation={[-Math.PI, 0.53, -Math.PI]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cylinder008.geometry}
        material={materials["Material.014"]}
        position={[-0.29, 6.38, -0.03]}
        rotation={[0.03, 0.05, 0.9]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cylinder010.geometry}
        material={materials["Material.014"]}
        position={[0.15, 6.37, -0.21]}
        rotation={[2.61, -0.62, -2.57]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsCurve001.geometry}
        material={materials.Material}
        position={[0.22, 6.43, -0.35]}
        rotation={[-2.63, 0.47, 2.9]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Text.geometry}
        material={glowRed}
        position={[-0.52, 4.63, 0.49]}
        rotation={[Math.PI / 2, 0, 0]}
        scale={0.25}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Text002.geometry}
        material={glowGreen}
        position={[-0.51, 4.63, 0.43]}
        rotation={[Math.PI / 2, 0, 0]}
        scale={0.25}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Text003.geometry}
        material={glowGreen}
        position={[-0.52, 4.63, 0.49]}
        rotation={[Math.PI / 2, 0, 0]}
        scale={0.25}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane005.geometry}
        material={materials["Material.016"]}
        position={[-0.08, 1.38, -0.62]}
        rotation={[Math.PI / 2, -1.57, 0]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cylinder001.geometry}
        material={materials["kabeli.001"]}
        position={[-0.01, 6.17, 0.06]}
        rotation={[-Math.PI, 0.53, -Math.PI]}
        scale={0.87}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube046.geometry}
        material={materials["Material.014"]}
        position={[0.65, 1.87, -0.01]}
        rotation={[0, 0, 3.14]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath020.geometry}
        material={glowRed}
        position={[0.7, 2.61, -0.54]}
        scale={-0.17}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube048.geometry}
        material={materials["Material.004"]}
        position={[-1.29, 0.69, 1.79]}
        rotation={[-Math.PI, -0.89, -Math.PI]}
        scale={0.45}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube054.geometry}
        material={materials["Material.004"]}
        position={[-1.3, 0.69, 1.8]}
        rotation={[-Math.PI, -0.89, 0]}
        scale={0.45}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube055.geometry}
        material={materials["Material.003"]}
        position={[-1.27, 0.76, 1.77]}
        rotation={[Math.PI, -0.89, -1.68]}
        scale={0.45}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube056.geometry}
        material={materials["Material.005"]}
        position={[-2.38, 1.24, 1.81]}
        rotation={[0, -0.67, 0]}
        scale={0.46}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube057.geometry}
        material={materials["Material.005"]}
        position={[-2.32, 1.24, 1.71]}
        rotation={[0, -0.67, 0]}
        scale={0.46}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube058.geometry}
        material={materials["Material.011"]}
        position={[-2.25, 1.24, 1.61]}
        rotation={[0, -0.67, 0]}
        scale={0.46}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube059.geometry}
        material={materials["Material.003"]}
        position={[-2.01, 1.24, 1.35]}
        rotation={[0, -0.67, 0]}
        scale={0.46}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube060.geometry}
        material={materials["Material.003"]}
        position={[-2.1, 1.24, 1.45]}
        rotation={[0, -0.67, 0]}
        scale={0.46}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube061.geometry}
        material={materials["Material.003"]}
        position={[-2.17, 1.25, 1.52]}
        rotation={[0, -0.67, 0]}
        scale={0.46}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane007.geometry}
        material={materials["Material.011"]}
        position={[-1.45, 0.72, 1.42]}
        rotation={[0, -0.68, -Math.PI / 2]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane008.geometry}
        material={materials["Material.003"]}
        position={[-1.7, 0.73, 1.76]}
        rotation={[0, -0.68, -Math.PI / 2]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Torus.geometry}
        material={materials["kabeli.001"]}
        position={[-1.55, 0.78, 1.49]}
        rotation={[0, -0.73, -Math.PI / 2]}
        scale={0.09}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Torus001.geometry}
        material={materials["kabeli.001"]}
        position={[-1.64, 0.78, 1.6]}
        rotation={[0, -0.67, -Math.PI / 2]}
        scale={0.09}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube062.geometry}
        material={materials["Material.005"]}
        position={[-2.5, 1.47, 0.63]}
        rotation={[0, 0, -Math.PI / 2]}
        scale={0.25}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube063.geometry}
        material={materials["Material.005"]}
        position={[-2.46, 1.51, 0.76]}
        rotation={[0, 0.6, -Math.PI / 2]}
        scale={0.25}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube064.geometry}
        material={materials["Material.005"]}
        position={[-2.5, 1.54, 0.63]}
        rotation={[0, 0, -Math.PI / 2]}
        scale={0.25}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane009.geometry}
        material={materials.Material}
        position={[-3.11, 1.12, -0.93]}
        rotation={[0, 0, -2.17]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane010.geometry}
        material={materials.Material}
        position={[-2.58, 1.33, -0.4]}
        rotation={[0, 0, -2.17]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane011.geometry}
        material={materials["Material.021"]}
        position={[2, -0.57, 4.15]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane014.geometry}
        material={materials["Material.013"]}
        position={[0.93, 0.45, 5.2]}
        rotation={[0, 1.43, -Math.PI / 2]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane015.geometry}
        material={materials["Material.013"]}
        position={[0.87, 0.66, 5.2]}
        rotation={[0, 1.43, -Math.PI / 2]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane016.geometry}
        material={materials["Material.013"]}
        position={[1.09, 0.86, 5.24]}
        rotation={[0, 1.43, -Math.PI / 2]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.body.geometry}
        material={materials["Material.010"]}
        position={[-0.04, 2.11, -0.02]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.windows.geometry}
        material={materials["Material.010"]}
        position={[-0.04, 5.36, -0.02]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube.geometry}
        material={materials["Material.008"]}
        position={[-0.04, 5.41, -0.02]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube001.geometry}
        material={materials["Material.007"]}
        position={[1.14, 0.23, 2.01]}
        rotation={[0.87, 1.08, -0.77]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube002.geometry}
        material={nodes.Cube002.material}
        position={[0.42, 1.95, 0.6]}
        scale={0.1}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube003.geometry}
        material={nodes.Cube003.material}
        position={[0.35, 2.03, 0.58]}
        scale={0.1}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube004.geometry}
        material={nodes.Cube004.material}
        position={[0.31, 1.86, 0.59]}
        scale={0.1}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube005.geometry}
        material={nodes.Cube005.material}
        position={[0.21, 1.94, 0.6]}
        scale={0.1}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube006.geometry}
        material={nodes.Cube006.material}
        position={[-0.67, 1.49, 0.56]}
        scale={0.06}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube008.geometry}
        material={nodes.Cube008.material}
        position={[-0.61, 1.43, 0.57]}
        scale={0.08}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube017.geometry}
        material={nodes.Cube017.material}
        position={[0.56, 2.61, 0.55]}
        scale={0.08}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube007.geometry}
        material={nodes.Cube007.material}
        position={[0.61, 2.66, 0.55]}
        scale={0.06}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube018.geometry}
        material={nodes.Cube018.material}
        position={[0.68, 2.66, 0.43]}
        rotation={[0, Math.PI / 2, 0]}
        scale={0.06}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube019.geometry}
        material={nodes.Cube019.material}
        position={[0.53, 2.76, 0.37]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube020.geometry}
        material={nodes.Cube020.material}
        position={[0.62, 1.88, -0.38]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube021.geometry}
        material={nodes.Cube021.material}
        position={[0.62, 1.93, -0.45]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube022.geometry}
        material={nodes.Cube022.material}
        position={[0.62, 1.82, -0.46]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube023.geometry}
        material={nodes.Cube023.material}
        position={[0.68, 1.15, 0.16]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube024.geometry}
        material={nodes.Cube024.material}
        position={[0.68, 1.21, 0.11]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube025.geometry}
        material={nodes.Cube025.material}
        position={[0.67, 1.26, 0.18]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube026.geometry}
        material={nodes.Cube026.material}
        position={[0.68, 1.18, 0.3]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube027.geometry}
        material={nodes.Cube027.material}
        position={[0.45, 3.67, -0.17]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube028.geometry}
        material={nodes.Cube028.material}
        position={[0.45, 3.72, -0.21]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube029.geometry}
        material={nodes.Cube029.material}
        position={[0.44, 3.77, -0.15]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube030.geometry}
        material={nodes.Cube030.material}
        position={[0.45, 3.7, -0.02]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube031.geometry}
        material={nodes.Cube031.material}
        position={[0.45, 3.71, -0.36]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube032.geometry}
        material={nodes.Cube032.material}
        position={[-0.4, 3.63, -0.41]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube033.geometry}
        material={nodes.Cube033.material}
        position={[-0.44, 3.68, -0.41]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube034.geometry}
        material={nodes.Cube034.material}
        position={[-0.38, 3.73, -0.4]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube035.geometry}
        material={nodes.Cube035.material}
        position={[-0.25, 3.66, -0.41]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube036.geometry}
        material={nodes.Cube036.material}
        position={[-0.59, 3.66, -0.41]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube037.geometry}
        material={nodes.Cube037.material}
        position={[-0.21, 3.77, -0.42]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube038.geometry}
        material={nodes.Cube038.material}
        position={[0.42, 2.02, -0.46]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube039.geometry}
        material={nodes.Cube039.material}
        position={[0.37, 2.08, -0.46]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube040.geometry}
        material={nodes.Cube040.material}
        position={[0.43, 2.13, -0.45]}
        rotation={[0, Math.PI / 2, 0]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube041.geometry}
        material={nodes.Cube041.material}
        position={[-0.68, 1.89, -0.21]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube043.geometry}
        material={nodes.Cube043.material}
        position={[-0.67, 2.04, -0.23]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube044.geometry}
        material={nodes.Cube044.material}
        position={[-0.67, 1.96, -0.35]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube045.geometry}
        material={nodes.Cube045.material}
        position={[-0.67, 1.96, -0.14]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube047.geometry}
        material={nodes.Cube047.material}
        position={[-0.48, 4.84, -0.26]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube051.geometry}
        material={nodes.Cube051.material}
        position={[-0.48, 4.38, 0.26]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube052.geometry}
        material={nodes.Cube052.material}
        position={[-0.48, 4.28, 0.2]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube053.geometry}
        material={nodes.Cube053.material}
        position={[-0.48, 4.46, 0.19]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube049.geometry}
        material={nodes.Cube049.material}
        position={[-0.47, 4.78, -0.36]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube050.geometry}
        material={nodes.Cube050.material}
        position={[-0.47, 4.71, -0.3]}
        rotation={[-Math.PI, 0, -Math.PI]}
        scale={1.89}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cube042.geometry}
        material={materials.Material}
        position={[0.06, 6.6, 0.16]}
        rotation={[0, -0.16, 0]}
      />
      <mesh
        geometry={nodes.Sphere.geometry}
        material={glowGreen}
        position={[-0.01, 6.94, 0.06]}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.NurbsPath.geometry}
        material={materials["Material.011"]}
        position={[1.27, 0.54, 1.76]}
        rotation={[-0.12, 0.22, -0.61]}
        scale={0.16}
      />
      <mesh
        geometry={nodes.Plane004.geometry}
        material={glowRed}
        position={[-2.67, 0.51, 4.35]}
      />
      <mesh
        geometry={nodes.Plane004.geometry}
        material={glowRed}
        position={[-2.67, 0.51, 4.35]}
      />
      <mesh
        geometry={nodes.Plane006.geometry}
        material={materials["Material.021"]}
        position={[-2.67, 0.51, 4.35]}
      />
      <mesh
        geometry={nodes.Plane012.geometry}
        material={glowRed}
        position={[-0.03, 0.48, 5.18]}
        rotation={[0.47, -0.12, -0.25]}
      />
      <mesh
        geometry={nodes.Plane012.geometry}
        material={glowRed}
        position={[-0.03, 0.48, 5.18]}
        rotation={[0.47, -0.12, -0.25]}
      />
      <mesh
        geometry={nodes.Plane013.geometry}
        material={glowRed}
        position={[-0.32, 0.51, 5.07]}
        rotation={[0.47, -0.12, -0.25]}
        scale={0.74}
      />
    </group>
  );
}
```

## src/index.tsx

```tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import App from "./App";

const rootElement = document.getElementById("root")!;
const root = createRoot(rootElement);
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);
```

## src/react-three-fiber-jsx.d.ts

```ts
import type { ThreeElement, ThreeElements } from "@react-three/fiber";
import type { UnrealBloomPass } from "three-stdlib";

// UnrealBloomPass's constructor parameters are typed as required, but the
// implementation falls back to defaults when they're omitted, so `args` is
// safe to leave optional here (matching the original JSX, which omits it).
type UnrealBloomPassElement = Omit<
  ThreeElement<typeof UnrealBloomPass>,
  "args"
> & {
  args?: ConstructorParameters<typeof UnrealBloomPass>;
};

declare global {
  namespace JSX {
    interface IntrinsicElements extends ThreeElements {}
    interface IntrinsicElements {
      unrealBloomPass: UnrealBloomPassElement;
    }
  }
}

declare module "react" {
  namespace JSX {
    interface IntrinsicElements extends ThreeElements {}
    interface IntrinsicElements {
      unrealBloomPass: UnrealBloomPassElement;
    }
  }
}

declare module "react/jsx-runtime" {
  namespace JSX {
    interface IntrinsicElements extends ThreeElements {}
    interface IntrinsicElements {
      unrealBloomPass: UnrealBloomPassElement;
    }
  }
}
```

## src/styles.css

```css
html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #202030;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

canvas {
  opacity: 0;
  touch-action: none;
  animation: fade-in 2s ease 0.3s forwards;
  animation-delay: 0s;
}
```

## src/vite-env.d.ts

```ts
/// <reference types="vite/client" />
```