The type of value associated with this interactive object
The Three.js Mesh to convert to an interactive object
A ClickableMesh that supports mouse interaction events
import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
import { convertToClickableMesh } from '@masatomakino/threejs-interactive-object';
// Create a standard mesh
const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshBasicMaterial({ color: 0x00ff00, transparent: true });
const mesh = new Mesh(geometry, material);
// Convert to interactive
const clickableMesh = convertToClickableMesh<string>(mesh);
clickableMesh.interactionHandler.value = "button1";
// Add click handler
clickableMesh.interactionHandler.on('click', (e) => {
console.log(`Clicked: ${e.target.interactionHandler.value}`);
});
Converts an existing Three.js Mesh to a ClickableMesh with basic click interaction.
This function adds interaction capabilities to a standard Three.js Mesh without modifying its geometry, material, or visual properties. The converted mesh will emit click, mousedown, mouseup, mouseover, and mouseout events.