Three.js & Spline

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 }
      }
    }
  }
}

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);
});

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

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}
    />
  );
}