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