The type of value associated with this interactive object
The Three.js Mesh to convert to a checkbox interactive object
A CheckBoxMesh that supports toggle state and interaction events
import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
import { convertToCheckboxMesh, StateMaterialSet } from '@masatomakino/threejs-interactive-object';
// Create a standard mesh
const geometry = new BoxGeometry(1, 1, 1);
const normalMaterial = new MeshBasicMaterial({ color: 0x888888, transparent: true });
const selectedMaterial = new MeshBasicMaterial({ color: 0x00ff00, transparent: true });
const mesh = new Mesh(geometry, normalMaterial);
// Convert to checkbox
const checkboxMesh = convertToCheckboxMesh<string>(mesh);
checkboxMesh.interactionHandler.value = "option1";
// Set up visual states
const stateSet = new StateMaterialSet({ normal: normalMaterial, normalSelect: selectedMaterial });
mesh.material = stateSet;
// Handle select events (when state toggles)
checkboxMesh.interactionHandler.on('select', (e) => {
console.log(`Checkbox ${e.interactionHandler?.value}: ${e.isSelected}`);
// Material changes are handled automatically by CheckBoxInteractionHandler.updateMaterial()
});
Converts an existing Three.js Mesh to a CheckBoxMesh with toggle interaction behavior.
This function adds checkbox-like interaction capabilities to a standard Three.js Mesh. The converted mesh maintains a selected state that toggles on each click, and can display different visual states through StateMaterialSet integration.