generateEventListenerCode

Generate JavaScript event listener code for Spline 3D scenes to handle user interactions like mouse clicks, keyboard inputs, and touch events.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`sceneId`	Yes	Scene ID
`eventName`	Yes	Event name

Implementation Reference

src/tools/state-event-tools.js:307-341 (registration)

Registration of the MCP tool 'generateEventListenerCode' including input schema (sceneId, eventName) and handler that delegates to runtimeManager.generateEventListenerCode and returns the generated code as text content.

server.tool(
  'generateEventListenerCode',
  {
    sceneId: z.string().min(1).describe('Scene ID'),
    eventName: z.enum([
      'mouseDown', 'mouseUp', 'mouseOver', 'mouseOut', 'mouseMove',
      'touchStart', 'touchEnd', 'touchMove',
      'keyDown', 'keyUp', 'collision', 'sceneStart'
    ]).describe('Event name'),
  },
  async ({ sceneId, eventName }) => {
    try {
      const code = runtimeManager.generateEventListenerCode(sceneId, eventName);
      
      return {
        content: [
          { 
            type: 'text', 
            text: code 
          }
        ]
      };
    } catch (error) {
      return {
        content: [
          { 
            type: 'text', 
            text: `Error generating code: ${error.message}` 
          }
        ],
        isError: true
      };
    }
  }
);

src/tools/state-event-tools.js:309-316 (schema)

Zod schema for tool inputs: sceneId (string) and eventName (enum of supported Spline events).

{
  sceneId: z.string().min(1).describe('Scene ID'),
  eventName: z.enum([
    'mouseDown', 'mouseUp', 'mouseOver', 'mouseOut', 'mouseMove',
    'touchStart', 'touchEnd', 'touchMove',
    'keyDown', 'keyUp', 'collision', 'sceneStart'
  ]).describe('Event name'),
},

src/tools/state-event-tools.js:317-339 (handler)

MCP tool handler function that invokes runtimeManager.generateEventListenerCode and formats the result as MCP content response.

async ({ sceneId, eventName }) => {
  try {
    const code = runtimeManager.generateEventListenerCode(sceneId, eventName);
    
    return {
      content: [
        { 
          type: 'text', 
          text: code 
        }
      ]
    };
  } catch (error) {
    return {
      content: [
        { 
          type: 'text', 
          text: `Error generating code: ${error.message}` 
        }
      ],
      isError: true
    };
  }

src/utils/runtime-manager.js:575-614 (helper)

Helper method in RuntimeManager class that generates template JavaScript code for loading a Spline scene and attaching an event listener for the specified eventName, with example handlers for common objects.

  generateEventListenerCode(sceneId, eventName) {
    const sceneUrl = `https://prod.spline.design/${sceneId}/scene.splinecode`;
    
    return `
import { Application } from '@splinetool/runtime';

// Create a new Application instance
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);

// Load the scene
spline.load('${sceneUrl}').then(() => {
  console.log('Scene loaded successfully');
  
  // Add event listener
  spline.addEventListener('${eventName}', (e) => {
    console.log('Event triggered:', e);
    
    // Get information about the target object
    const targetObject = e.target;
    console.log('Target object:', targetObject.name, targetObject.id);
    
    // Respond to the event
    if (targetObject.name === 'Cube') {
      // Handle cube-specific event
      targetObject.scale.multiplyScalar(1.1); // Grow by 10%
    } else if (targetObject.name === 'Sphere') {
      // Handle sphere-specific event
      targetObject.material.color.set('#ff0000'); // Change to red
    }
    
    // You can also emit events on other objects
    const otherObject = spline.findObjectByName('OtherObject');
    if (otherObject) {
      otherObject.emitEvent('mouseDown');
    }
  });
});
`;
  }

Spline MCP Server