OpenMec is a web-based 3D construction application inspired by Meccano. It allows users to build models using perforated strips, screws, and nuts in an interactive 3D environment.
- Procedural Parts: Generate perforated strips of variable lengths (3 to 25 holes).
- Interactive Assembly:
- Click on holes to align and assemble strips.
- Automatic placement of screws and nuts (screw on top, nut on bottom).
- Correct stacking of parts (strips stack on top of each other).
- Selection & Manipulation:
- Click on parts to select them (visual feedback).
- Rotate selected parts around their pivot point (screw axis).
- 3D Visualization:
- Built with
three.jsand@react-three/fiber. - Realistic rendering with shadows and materials.
- Orbit controls for navigating the scene.
- Built with
- Framework: React, Vite, TypeScript
- 3D Engine: Three.js, @react-three/fiber, @react-three/drei
- State Management: Zustand
- Styling: CSS (BEM naming convention)
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open the application: Navigate to
http://localhost:5173in your browser.
- Add a Strip: Use the toolbar at the bottom to specify the number of holes and click "Add Strip".
- Assemble: Click on a hole in one strip, then click on a hole in another strip to join them.
- Select: Click on a strip to select it (it will glow orange).
- Rotate: Use the buttons in the top-right properties panel to rotate the selected strip.
- Clear: Click the "Clear" button in the toolbar to remove all parts (requires confirmation).
MIT