The type of value associated with this interactive object
The Three.js Mesh to convert to a radio button interactive object
A RadioButtonMesh that supports exclusive group selection and interaction events
import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
import { convertToRadioButtonMesh, RadioButtonManager, StateMaterialSet } from '@masatomakino/threejs-interactive-object';
// Create radio button meshes with state materials
const geometry = new BoxGeometry(1, 1, 1);
const normalMaterial = new MeshBasicMaterial({ color: 0x888888, transparent: true });
const selectedMaterial = new MeshBasicMaterial({ color: 0xff0000, transparent: true });
// Set up visual states
const stateSet = new StateMaterialSet({ normal: normalMaterial, normalSelect: selectedMaterial });
const mesh1 = new Mesh(geometry, stateSet);
const mesh2 = new Mesh(geometry, stateSet);
// Convert to radio buttons
const radio1 = convertToRadioButtonMesh<string>(mesh1);
const radio2 = convertToRadioButtonMesh<string>(mesh2);
radio1.interactionHandler.value = "option1";
radio2.interactionHandler.value = "option2";
// Create manager and add to group
const radioManager = new RadioButtonManager<string>();
radioManager.addButton(radio1);
radioManager.addButton(radio2);
// Handle selection events from manager
radioManager.on('select', (e) => {
console.log(`Selected: ${e.interactionHandler?.value}`);
// Material changes are handled automatically by RadioButtonInteractionHandler.updateMaterial()
});
Converts an existing Three.js Mesh to a RadioButtonMesh with exclusive selection behavior.
This function adds radio button-like interaction capabilities to a standard Three.js Mesh. Radio buttons work in groups where only one can be selected at a time. Use RadioButtonManager to manage groups and handle exclusive selection behavior.