Remix

Make your own version of Virtuanatomy Lab

Get an exact, working copy in your account, then change anything with chat.

Original by Mohammed Salman

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

# VIRTUANATOMY LAB — NEW PROJECT FOUNDATION

Build a brand-new, fully functional web application from scratch called VIRTUANATOMY LAB.

Tagline: “Feel the Science. Explore the Human Body.”

This is the first stage of a larger interactive 3D anatomy and surgical education platform. Establish a professional foundation that can support later additions without needing to rebuild the application.

## 1. Technology

Use React, TypeScript, Vite, Three.js and React Three Fiber, with a suitable 3D control library. Use MediaPipe Hands or an equivalent browser-compatible hand-tracking library in a later development stage.

Create a clean, maintainable component architecture. The project must run in the development environment and be suitable for later deployment.

## 2. Genuine human anatomy model

The highest priority is a genuine, detailed, properly licensed 3D human anatomy model, not a cartoon, flat illustration or collection of primitive shapes.

Support GLB/GLTF assets and load an actual anatomical model containing as many of these separately identifiable structures as the asset supports:

- Skin and external body surface.
- Skull, skeleton and brain.
- Muscles and connective tissues.
- Heart and lungs.
- Arteries, veins and other available blood vessels.
- Nerves.
- Liver, stomach, intestines, kidneys and bladder.
- Other available organs and anatomical structures.
- Optional educational reproductive anatomy, to be added in a later stage.

Find an appropriately licensed asset that can legally be used in this project. Document its source and attribution requirements. Do not invent a successful download or use an asset without permission.

If a genuine model cannot be obtained automatically, create the application with a clear model-loading interface and instructions for importing a compatible model. Display a meaningful loading or missing-asset message. Never silently substitute primitive shapes and pretend they are real anatomy.

## 3. Main 3D anatomy viewer

Create a large, central 3D viewport showing the full human body.

Implement:
- Smooth 360-degree rotation.
- Horizontal rotation and vertical tilt.
- Mouse-drag rotation and mouse-wheel zoom.
- Camera reset.
- Front, back, left-side and right-side views.
- Touchscreen controls.
- Keyboard alternatives.
- Suitable lighting, realistic materials and shadows where supported.
- Responsive layout for desktop, tablet and mobile.

The anatomy viewer must occupy the main visual area rather than being a small card surrounded by dashboards.

## 4. Initial organ interaction

Where the model provides named, separate anatomical meshes, let users click a structure to select and highlight it.

Display the selected structure's name, anatomical location, function and body system in an information panel. Include a searchable list of available structures.

Prepare the application architecture for later organ isolation, transparency, gesture selection, physical manipulation and automatic camera focusing. Do not pretend these future features are already complete.

## 5. Initial interface

Create a polished medical-technology interface with:
- Product name and tagline.
- Main 3D anatomy viewport.
- Anatomical structure search.
- Selected-organ information panel.
- Camera-view controls.
- Available structure visibility controls.
- Loading and error indicators.
- A clearly labelled area for future gesture controls and surgical simulations.

Use white and pale-grey clinical panels, navy text, subtle teal/blue accents, clean typography and minimal icons. Use a professional hospital-inspired visual style.

## 6. Engineering requirements

Separate the model loader, 3D viewer, camera controls, anatomical selection, information panel and interface into maintainable components.

Use shared application state for selected structures and viewer settings. Validate the loaded model and provide useful error handling. Optimise large assets and avoid unnecessary repeated loading.

Every implemented button must perform its stated function. Do not add fake interactive controls.

## 7. Verification

Run the application and check that it starts correctly, the 3D model loads if the asset is available, rotation and zoom work, the camera resets correctly, and available anatomical meshes can be selected.

Report exactly which model and asset were loaded, which anatomical structures are separately selectable, which functions have been tested, and what remains dependent on importing additional assets.

Do not stop after generating a static homepage. Build and run the actual application.

IMPORTANT: This is stage one. Keep the architecture ready for the following development stages: anatomical layers and focused organ selection; webcam gestures; soft-body interaction and blood flow; surgical instruments and suturing; learning modules; and final integration. Do not remove or rewrite working features when these stages are added.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.