Click in Spline shows element in Webflow?

Design help Custom code
2

Actually I found out how to do this:

<!-- Add a canvas element where Spline will render the 3D scene -->
<canvas id="canvas3d"></canvas>

<!-- Import the necessary Spline runtime -->
<script
  async
  src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"
></script>
<script type="importmap">
  {
    "imports": {
      "@splinetool/runtime": "https://unpkg.com/@splinetool/runtime@latest/build/runtime.js"
    }
  }
</script>

<!-- Custom JavaScript for loading Spline scene and handling interactions -->
<script type="module">
  import { Application } from '@splinetool/runtime';

  // Create a new Spline application and attach it to the canvas element
  const canvas = document.getElementById('canvas3d');
  const spline = new Application(canvas);

  // Load the Spline scene using its URL
  spline
    .load('https://prod.spline.design/your-spline-file/scene.splinecode') // Replace with your Spline scene URL
    .then(() => {
      // Listen for a click event on the 3D object in the Spline scene
      spline.addEventListener('mouseDown', (e) => {
        // Placeholder: Add your interaction logic here
        // Example: If the clicked object is named "Cube", show a specific div
        if (e.target.name === 'Cube') {
          console.log('Cube was clicked!');
          // Add your custom interaction code here (e.g., showing a div)
        }
      });
    });

  console.log('Spline scene loaded');
</script>
1 Like