Interactive 3D

Click, hover, and drag interactions in 3D space.

Clickable Objects

Click on objects to interact. Hover to see visual feedback.

Clicks: 0

<mesh
  onClick={(e) => handleClick(e)}
  onPointerOver={() => setHovered(true)}
  onPointerOut={() => setHovered(false)}
>
  <boxGeometry />
  <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>

Draggable Object

Drag the sphere to move it on the plane.

// Using onPointerDown/Move/Up for drag
const [dragging, setDragging] = useState(false);

onPointerDown={() => setDragging(true)}
onPointerMove={(e) => {
  if (dragging) {
    // Update position from intersection point
    ref.current.position.copy(e.point);
  }
}}
onPointerUp={() => setDragging(false)}

Multi-Selection

Click objects to select/deselect. Foundation for node selection in graphs.

Selected: None

const [selected, setSelected] = useState<string[]>([]);

const toggleSelect = (id: string) => {
  setSelected(prev =>
    prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id]
  );
};

<mesh onClick={() => toggleSelect(id)}>
  <meshStandardMaterial
    color={isSelected ? 'white' : originalColor}
    emissive={isSelected ? color : 'black'}
    emissiveIntensity={isSelected ? 0.5 : 0}
  />
</mesh>