> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Three.js & Spline

> Drive 3D scenes and product configurators with sustainability data.

The Hey Chocolate API provides structured data for Three.js scenes and Spline projects, enabling 3D supply chain visualizations and interactive product configurators.

## Three.js integration

### Supply Chain Globe

Visualize a product's global supply chain on an interactive 3D globe:

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: THREEJS
    template: SUPPLY_CHAIN_GLOBE
  }) {
    sceneData {
      nodes {
        id
        position { lat lng }
        label
        value
        tier
        color
      }
      edges {
        from
        to
        weight
        transportMethod
      }
      camera {
        position { x y z }
        lookAt { x y z }
      }
    }
  }
}
```

### Rendering with Three.js

```javascript theme={null}
import * as THREE from 'three';

const response = await fetch('/api/visualisation', { /* ... */ });
const { sceneData } = await response.json();

// Create nodes on the globe
sceneData.nodes.forEach(node => {
  const position = latLngToVector3(node.position.lat, node.position.lng, GLOBE_RADIUS);
  const mesh = createNodeMesh(node.value, node.color);
  mesh.position.copy(position);
  scene.add(mesh);
});

// Create edges between nodes
sceneData.edges.forEach(edge => {
  const from = findNode(sceneData.nodes, edge.from);
  const to = findNode(sceneData.nodes, edge.to);
  const curve = createArcCurve(from.position, to.position);
  scene.add(curve);
});
```

## Spline integration

### Product Configurator

Drive Spline variables with sustainability data:

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: SPLINE
    template: PRODUCT_CONFIGURATOR
  }) {
    sceneUrl
    variables {
      name
      type
      value
    }
  }
}
```

### Using with @splinetool/react-spline

```tsx theme={null}
import Spline from '@splinetool/react-spline';

function ProductViewer({ productId }) {
  const [sceneData, setSceneData] = useState(null);

  useEffect(() => {
    fetchVisualisationData(productId, 'SPLINE', 'PRODUCT_CONFIGURATOR')
      .then(setSceneData);
  }, [productId]);

  function onLoad(spline) {
    if (!sceneData) return;

    // Apply sustainability data to Spline variables
    sceneData.variables.forEach(({ name, value }) => {
      spline.setVariable(name, value);
    });
  }

  return (
    <Spline
      scene={sceneData?.sceneUrl}
      onLoad={onLoad}
    />
  );
}
```

## Available templates

| Template               | Format           | Description                                 |
| ---------------------- | ---------------- | ------------------------------------------- |
| `SUPPLY_CHAIN_GLOBE`   | Three.js         | 3D globe with supply chain nodes and routes |
| `PRODUCT_CONFIGURATOR` | Spline, Three.js | 3D product with material visualization      |
| `IMPACT_PARTICLES`     | Three.js         | Particle system representing CO2 volume     |
| `MATERIAL_EXPLORER`    | Spline           | Interactive material composition view       |