Janus (stylized as IANVS) is an AI-powered 3D CAD platform built with React, Three.js, and Google Gemini API. It bridges the gap between natural language intention and geometric execution.
- AI-Driven Architect: Type commands like "Create a red chair" or "Split the cube in half".
- 3D Visualization: Real-time rendering using
react-three-fiber. - Export: Download your scene as JSON to save your work.
- Context Aware: Reference objects using
@Name(e.g., "Rotate @Table 90 degrees"). - Visual Verification: Self-correcting AI that views the scene from multiple angles (8-point orbital view) to ensure geometry accuracy.
The project follows a strict separation of concerns:
Contains all React UI components and visualization logic.
components/Viewer3D.tsx: The main 3D canvas rendering the scene.components/ChatInterface.tsx: The chat sidebar for communicating with the AI.components/Header.tsx: Navigation and global actions.
Contains the business logic and API integrations.
engine/SceneManager.ts: A class-based module responsible for maintaining the state of the 3D world and applying transformations.services/geminiService.ts: Handles communication with the Google Gemini API, including prompt engineering and JSON schema validation.
App.tsx: The main controller that glues the Frontend components to the Backend services.types.ts: Shared TypeScript interfaces for type safety across the stack.
- Ensure
process.env.API_KEYis set with a valid Google Gemini API Key. - The application uses CDN-based Tailwind for styling and Google Fonts (Cinzel for branding).
- No build step required if using a modern ESM-compatible environment.
- Select: Click an object in the 3D view to select it.
- Rotate/Pan: Left click to rotate, right click to pan.
- AI Command: Type in the right-hand panel.
- Example: "Add a blue sphere on top of the cube."
- Example: "Make the cube taller."
- Example: "Delete the sphere."
- React 18
- Tailwind CSS
- Three.js / React Three Fiber / Drei
- @google/genai SDK