project: build a realistic, fixed-layout, interactive 3d compound microscope simulation using three.js and html5. output must be a single-page index.html (plus an /assets folder) that renders a photo-real, interactive microscope in 3d. do not use ui frameworks; three.js is allowed for 3d and postprocessing only. deliver a responsive canvas that works with mouse, touch, and keyboard. the scene must be visually realistic, physically plausible, and interaction behavior must mimic a real compound microscope.
goal:
produce a realistic 3d microscope model and lab-bench scene where every major microscope component is interactive and behaves like the real device. parts are visually fixed in a realistic assembly (not free-floating) and are positioned relative to one another along a single optical axis. interactions adjust optics, stage, and specimen, and a teacher-guided experiment mode teaches the onion epidermis procedure.
general composition / relative placement (no coordinates):
optical axis: define a single vertical optical axis. all optical components are collinear along that axis in this order from top to bottom: eyepiece (ocular) → tube → nosepiece/turret (with objectives) → objective tips pointing down → specimen on slide centered on stage → condenser → illuminator/base.
arm and base: the arm supports the tube and connects down to a sturdy base; coarse and fine focus knobs are mounted on the arm (on the same side) within human reach. accessory tray and tool rack sit to the right side of the base on the bench.
stage assembly: stage is fixed under objectives with a mechanical two-axis stage for slide movement. the slide clamp, stage knobs, condenser housing and diaphragm are integrated into the stage assembly.
control panel / teacher panel: ui controls, scripted instructions, and status indicators are placed off-canvas in a responsive layout on the side or bottom; they map to 3d parts via visual highlights.
required 3d components & materials:
complete compound microscope 3d model divided into interactive submeshes with clear ids / names: eyepiece, ocular-tube, nosepiece-turret, objective-# (4x,10x,40x,100x), objective-housing, tube, stage-platform, slide-slot, slide, cover-slip, slide-clamps, stage-x-knob, stage-y-knob, coarse-knob, fine-knob, condenser, diaphragm-ring, illuminator, arm, base, accessory-tray, tool-dropper, tool-forceps, tool-iodine-bottle, tool-cover-slip.
materials: use physically based rendering (pbr) materials. metal parts use metalness/roughness maps; glass elements use transmission/ior and subtle chromatic dispersion; rubber/plastic parts use roughness and normal maps. stage surface and bench have slight bump/roughness.
lighting: three-point studio lighting plus a directional lab light and a physically plausible point light for the illuminator beneath the stage. include ibl (hdr environment) for reflections (provide local hdr asset or use neutral procedural sky if offline).
rendering & optical simulation:
optical axis camera system:
main scene camera: perspective camera for the overall scene orbit & interactions (restricted orbit so the microscope remains front-facing and realistic).
eyepiece camera: separate internal camera that represents the microscope optical path. render the eyepiece view to a circular render-target texture used as the eyepiece viewport. eyepiece camera must be collinear with the optical axis and point down the axis through the active objective to the specimen.
eyepiece viewport:
display the eyepiece render target as a circular overlay/window that appears when user "looks" into the eyepiece or as a persistent inset view in the ui. the overlay must show magnified specimen detail, simulate depth-of-field, vignetting, and the field-of-view change with objective selection.
implement depth-of-field (dof) and bokeh as a post-processing pass on the eyepiece render target so focus knob changes map to realistic blur/plane-of-focus shifts.
simulate field-of-view (fov) and resolution: swapping objectives changes eyepiece camera focal length and fov, and automatically selects higher-resolution specimen textures when necessary (lod switching).
specimen rendering:
specimen is a layered textured plane on the slide: base tissue texture + stain-layer mask + subtle cell-wall normal map. allow dynamic shader-driven color shift for iodine staining (multiply blend and hue shift) and a diffusion algorithm to animate stain spread.
implement multi-resolution specimen assets and tile or mipmap loading so higher mag uses high-res textures while lower mag uses smaller textures.
parfocal & focus behavior:
implement parfocal behavior: when changing objectives, maintain approximate focus (small auto defocus penalty) so fine adjustments are usually required on higher mag.
coarse knob changes large focus steps (moves lens assembly along optical axis in scene or adjusts eyepiece camera focus distance by larger increments). fine knob applies small precise changes. lock coarse when mag > low-power threshold.
optical effects:
simulate condenser/diaphragm by adjusting eyepiece render-target exposure, contrast, and depth-of-field aperture values. simulate illumination intensity by toggling and dimming the illuminator point light.
simulate field-of-view circle shrink when magnification increases and rotate nosepiece to snap objective tips into optical alignment.
interactivity & behaviors:
pointer & touch:
allow click/drag/rotate interactions: rotate the nosepiece turret with drag or click-to-select; drag stage-x/y knobs or drag the slide to move specimen; drag coarse/fine knobs to change focus; slide diaphragm and brightness controls via drag gestures.
support pinch-to-zoom in the overall scene (not the eyepiece magnification), tap-and-hold to simulate looking through eyepiece (or click to toggle eyepiece view).
keyboard & accessibility:
keyboard focus order and shortcuts: tab-cycle through tools then microscope controls; arrow keys for stage adjustments when stage knobs focused; +/- or page up/down to coarse/fine focus; enter/space to activate knobs and nosepiece; esc to exit eyepiece view.
include ARIA-labeled ui controls and text alternatives for visual components.
tools & specimen preparation:
tool selection UI toggles tool mode: dropper, forceps, cover-slip, iodine. using a tool over the slide triggers context-aware animations and state changes: drop water droplet, peel onion epidermis to reveal specimen layer, place cover slip (snap and create glass refraction), add iodine near cover-slip edge to start diffusion shader.
diffusion animation: run a shader or cpu-simulated radial diffusion on the stain-layer mask mapped to the specimen plane; diffusion speed is scaled for interactivity (e.g., tens of seconds) but visually realistic—color intensifies cell walls and reveals nuclei.
validation & teacher-mode:
implement an experiment-script manager that walks the student through steps: add water, place tissue, add cover slip, start low-power scan, focus, change to medium, add iodine, observe. each step must validate that the user completed the required interaction before advancing; provide contextual hints and highlight the relevant 3d part (outline glow).
free-explore mode with contextual help and optional auto-guidance.
ui overlays & mapping:
when the teacher script references a 3d part, highlight the corresponding mesh in 3d and show an arrow / label anchored to the part. clicking the label focuses the camera slightly but must not break the fixed realistic pose.
provide an inset mini-eyepiece or toggleable full-screen eyepiece overlay showing the render-target. ensure the eyepiece overlay maps exactly to eyepiece optical center and stays visually consistent as canvas scales.
performance & assets:
use efficient geometry: keep high-resolution meshes only where needed (objective glass, knobs); use normal/roughness/metalness maps for detail.
lazy-load specimen high-res textures and optional hdr if available; provide fallback low-res texture to ensure offline startup.
prefer gltf/glb assets for models; shader code for stain/diffusion should be included inline and work offline.
responsiveness & ui constraints:
canvas scales to available container while preserving aspect ratio so the microscope remains front-facing; on narrow screens move teacher panel below the canvas and collapse non-essential labels.
ensure interactive touch targets are at least 44x44 css pixels and knobs/tools have enlarged invisible hit areas on small screens.
deliverables & constraints:
single-page index.html that uses three.js + postprocessing (no other js frameworks). include modular, well-commented code: model loader, scene builder, optics-engine, interaction-controller, experiment-script.
include an /assets folder with 3d models (gltf), specimen texture variants, normal/roughness maps, and small ui icons. include a README with run instructions and acceptance checklist.
acceptance checklist (must pass):
3d microscope renders with realistic pbr materials and physically plausible lighting.
eyepiece view is a live render-target that magnifies the specimen and shows depth-of-field; objective changes update fov and lod.
coarse & fine knobs change focus and visibly alter depth-of-field on eyepiece render.
nosepiece rotates and snaps to objective stops; active objective changes magnification.
stage moves in two axes and the eyepiece crop follows specimen offsets correctly.
tools can prepare the slide (water, peel, cover-slip, add iodine) and iodine triggers visible diffusion/stain shader.
teacher-mode guides and validates each step; free-explore works and provides helpful hints.
works with mouse, touch, and keyboard; no external cdn dependencies beyond three.js (include local copy).
note: keep all labels, mesh names, and dom ids lowercased and human-readable so downstream automation can reference them. output code must include a dev-mode toggle that visualizes the optical axis and highlights centers of eyepiece, active objective tip, and slide center for verification.
do only in html5 no framwork