Click in Spline shows element in Webflow?

Design help Custom code
1

Hi guys!

I would need the following functionality:
If the user clicks an element in a spline animation, an interaction should be triggered in Webflow (basically some information/div should appear). Is that achievable somehow?

Any tipps are much appreciated!

Cheers,
Manuel

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
3

It looks like you’ve already solved your own question, though for posterity’s sake, here is a more integrated way to accomplish this…

Add an On Click interaction, for example, then select Spline.

spline
spline476Ă—1516 63.2 KB

4

Hey Jonathan, thanks but the thing is: I need it the other way round. The “On Click” event needs to be on a spline element, not on a Webflow element ;-)

So basically, for example:
If you click Element X in Spline, show Element/Div Y in Webflow.

5

Ah I see. Thanks for clarifying.

1 Like
6

Hello @ManuelE

I am looking to do exactly this. Except I would like it on hover (hover object in spline, div/modal pops up in webflow). I have 12 different objects that I would like to be able to do this with. Essentially I have buttons in spline and want an info box to pop up in webflow when I hover the object in spline. Can you possibly help me with this?

Thank you. Have a blessed day.