import { Canvas } from '@react-three/fiber';
import { PivotControls } from '@react-three/drei';
import { MeshEditor } from 'react-three-mesh-editor';
import { BoxGeometry, Vector3, Matrix4 } from 'three';
function App() {
const geometry = useMemo(() => new BoxGeometry(1, 1, 1), []);
return (
<Canvas>
<MeshEditor
geometry={geometry}
mode="edit"
editMode="vertex"
renderVertexControl={({ vertex, onMove }) => (
<PivotControls
matrix={new Matrix4().setPosition(...vertex.position)}
onDrag={(matrix) => {
const pos = new Vector3().setFromMatrixPosition(matrix);
onMove([pos.x, pos.y, pos.z]);
}}
/>
)}
/>
</Canvas>
);
}
Main mesh editor component for React Three Fiber.
Provides Blender-like mesh editing with object and edit modes. In edit mode, supports vertex, edge, and face selection/manipulation.
Important: Use one MeshEditor per Canvas. The component modifies the BufferGeometry by reference.
Bring Your Own Controls: Use the
renderVertexControl,renderEdgeControl, andrenderFaceControlprops to provide custom transform controls. See the Storybook examples for PivotControls integration.