3D Workspace
Home
Assets
Affiliate Program
Creator Program
Sign up/Log in
View Plans
DCC Bridge
dmbbs499
04-07 13:37
Model Name
construction site 3d model
Tags
architecture
architecture realistic
architecture rendering
architecture rendering realistic
build
construction
construction site
realistic
rendering
rendering realistic
Prompt
Generate a complete, single-file HTML/CSS/JS website showing a VERY REALISTIC 3D animated construction site where a house is being built. NO abstract shapes. NO floating dots. NO generic particles. NO cartoon style. NO yellow/black safety theme. This must look like a real construction site from India. Use Three.js with realistic textures, shadows, lighting, and detailed geometry. NO external .glb models. NO Blender. Build everything using Three.js primitives but combine them to look REAL. --- ## THE SCENE OVERVIEW Create a 30m x 30m construction site on brown earth ground. A 2-story house is mid-construction. Workers move. Equipment operates. Dust hangs in air naturally. Sunlight casts realistic shadows. Camera starts at 45-degree angle, 20 meters away, looking at the house. Camera rotates slowly (0.002 rad per frame) around the site for 360 view. --- ## THE HOUSE BEING BUILT The house has: GROUND FLOOR (partially built): - Brick walls: red-brown rectangular bricks stacked with visible mortar lines (gray between bricks) - Height: 3 meters, incomplete on right side (scaffolding visible) - Window frames: wood brown, glass semi-reflective, installed on left wall only - Door frame: wood, no door yet, opening to inside - Concrete floor slab: gray with texture, visible rebar sticking out at edges FIRST FLOOR (just started): - Concrete columns: 4 columns, 2 meters tall, gray with formwork marks (horizontal line patterns) - Rebar sticking out from column tops: silver rods, 1 meter high, 8 rods per column - Wood formwork panels attached to columns: brown plywood texture with bolt holes - Floor slab missing (open sky visible through rebar) ROOF (not started): - Roof trusses: wood triangles being assembled, half completed - Roof trusses position: sitting on first floor columns, angled at 30 degrees - Some trusses lying on ground near house CONSTRUCTION DETAILS: - Scaffolding: bamboo poles (greenish-yellow) tied with rope, around incomplete wall - Bricks pile: stack of 200 bricks on ground near right side - Cement bags: 10 white bags with "CEMENT" text, stacked near bricks - Sand pile: cone-shaped mound of sand (yellow-brown) near cement bags - Water tank: blue plastic barrel with "WATER" text - Tools: wheelbarrow (metal tray + wood handles), shovel (wood + metal blade) leaning on sand pile --- ## WORKERS AND EQUIPMENT ANIMATION WORKER 1 (bricklayer): - Position: standing on scaffolding - Animation cycle (6 seconds): - 0-2 sec: reaches down for brick (bends 30 degrees) - 2-3 sec: lifts brick up - 3-5 sec: places brick on wall - 5-6 sec: taps brick with trowel - Body parts: head (sphere), torso (box), arms (cylinders), legs (cylinders) - Clothes: orange shirt, blue jeans, yellow helmet - Holds: silver trowel in right hand WORKER 2 (carrying materials): - Position: walking from brick pile to scaffolding - Path: linear back and forth, 8 meters distance - Speed: 1.5 meters per second - Animation: arms swing, legs walk, body bobs up and down slightly - Carries: 4 bricks stacked on wooden plank on shoulder - Clothes: white shirt, gray pants, no helmet WORKER 3 (tying rebar): - Position: on first floor, near columns - Animation cycle (8 seconds): - 0-3 sec: hands moving around rebar (tying wire motion) - 3-5 sec: pulls wire tight (arms move back) - 5-8 sec: moves to next rebar connection - Clothes: red shirt, brown pants, yellow helmet - Holds: roll of black wire in left hand, pliers in right hand WORKER 4 (operating mixer): - Position: near cement mixer machine - Animation: rotates mixer drum continuously, adds water from bucket every 10 seconds - Clothes: blue shirt, dirty jeans, no helmet TOWER CRANE: - Height: 15 meters - Base: concrete block 2m x 2m - Tower: lattice structure (cross-braced metal bars) - Jib: horizontal arm 12 meters long - Trolley: moves along jib back and forth (10 seconds per cycle) - Hook: hangs from trolley, moves up/down - Load: pallet with 20 bricks hanging from hook - Animation: trolley moves to brick pile (5 sec), hook lowers (3 sec), hook raises with bricks (3 sec), trolley moves to house (5 sec), hook lowers (3 sec), releases (2 sec), repeats CEMENT MIXER: - Position: near water tank - Drum: rotating continuously (one rotation every 4 seconds) - Color: orange with white patches - Wheel: one wheel visible, stationary - Opening: facing up at 45 degrees --- ## REALISTIC TEXTURES (ALL PROCEDURAL, NO EXTERNAL IMAGES) Generate every texture using Canvas API: BRICK TEXTURE: - Base: #B53A1A (red-brown) - Add noise: random dark spots (#8B2A10) - Mortar lines: #C8C2B8, 8px thick horizontal and vertical, spacing 65px x 120px - Brick edges: slight highlight on top edge (#C95A3A) CONCRETE TEXTURE: - Base: #9A9A9A - Noise: Perlin noise algorithm, variation ±15 - Formwork marks: horizontal lines every 30px, #7A7A7A, 2px thick - Bolt holes: dark circles every 60px, diameter 6px, #5A5A5A GROUND TEXTURE (earth): - Base: #8B7355 - Noise: heavy Perlin noise, variation ±25 - Small stones: random dark spots #6B5335, size 2-5px - Tire tracks: curved dark lines from wheelbarrow and mixer SAND TEXTURE: - Base: #D4B896 - Dots: thousands of tiny dots (#C4A886 and #E4C8A6) - Grain effect: individual pixels of varying brightness WOOD TEXTURE (formwork, trusses): - Base: #A0724A - Grain lines: wavy dark brown lines (#7A5232) using sin/cos paths - Knots: dark brown ovals with concentric rings - Bolt holes: dark circles with silver edge REBAR TEXTURE: - Base: #B8B8B8 (silver) - Ridges: diagonal lines every 5px, #888888 - Rust spots: random orange-brown patches #8B4513 GLASS TEXTURE: - Base: #A8D8EA with opacity 0.6 - Reflection: diagonal gradient from white (opacity 0.4) to transparent - Edge highlight: white 1px border on top and left SKY TEXTURE: - Gradient: top #2B6B9B (deep blue), middle #6BA8D4, bottom #D4E8F4 - Clouds: 5-8 semi-transparent white blobs using ellipse paths, moving slowly (drift 0.1px per frame) DUST PARTICLES: - 500 small points floating in air - Size: 1-3px - Color: #D4C8B8 with opacity 0.3 - Movement: random drift upward and sideways, 0.5px per frame - Generated randomly within 25m cube around construction site --- ## LIGHTING (CINEMATIC REALISM) SUNLIGHT (main light): - DirectionalLight from angle 45° up, 120° right - Color: #FFF5E0 (warm white) - Intensity: 1.2 - Casts shadows: true, mapSize 2048x2048 - Shadow bias: 0.0001 AMBIENT LIGHT: - Color: #404060 - Intensity: 0.4 FILL LIGHT (from sky reflection): - HemisphereLight - Sky color: #88BBFF, intensity 0.3 - Ground color: #8B7355, intensity 0.1 WORK LIGHT (on crane): - PointLight at crane jib - Color: #FFAA66 - Intensity: 0.5 - Distance: 20 meters SHADOW DETAILS: - House casts shadow on ground - Crane casts shadow on house and ground - Workers cast shadows on ground and walls - Shadows are soft (radius 2) --- ## SCROLL ANIMATION (EXACT PROGRESS) Scroll controls the construction progress. Page height: 200vh. SCROLL 0%: - House at current state (as described above) - Workers moving as described - Crane operating - Camera at start position (45°, 20m distance) SCROLL 25%: - Ground floor walls complete (right side finished) - Window installed on right wall - Door installed - First floor columns now 3 meters tall - First floor slab appears (concrete texture) - Rebar now sticking up from slab (1.5m tall) - Scaffolding moves to first floor level SCROLL 50%: - First floor walls start (brick, 1 meter tall) - Roof trusses fully assembled and installed on top - Roof sheathing appears (plywood texture on trusses) - Roof tar paper appears (black layer on sheathing) - Crane moves to lifting roof tiles SCROLL 75%: - First floor walls complete (3 meters) - Roof tiles appear (terracotta red, overlapping pattern) - Window frames on first floor installed - Plaster texture appears on ground floor walls (smooth gray over bricks) - Paint appears on ground floor (cream white color) SCROLL 100%: - House complete - All scaffolding removed - Landscaping: grass appears on ground (green), small bushes - Workers walk away (exit scene) - "COMPLETED" banner appears floating above house - Final camera orbit: 360° slow reveal over 10 seconds Use GSAP ScrollTrigger with scrub: 2 for smooth progress between states. --- ## ADDITIONAL REALISTIC DETAILS SOUND VISUALIZATION (no actual audio, just visual cues): - When crane moves: small vibration lines near motor - When worker taps brick: tiny dust puff particle effect - When mixer rotates: subtle blur effect on drum WEATHER EFFECTS: - Light haze (fog): ExponentialFogExp2, color #D4E8F4, density 0.008 - Heat shimmer: subtle distortion near ground (optional post-processing) TIME OF DAY: - Starts at 9 AM (sun angle 45°) - As scroll progresses to 100%, time advances to 5 PM (sun angle 15°, color #FF8844) - Shadows lengthen and warm up CAMERA MOVEMENT DETAILS: - Idle: slow orbit 0.002 rad/frame - On scroll: camera moves closer as progress increases - At 100%: camera pulls back to see entire completed house --- ## TECHNICAL REQUIREMENTS - Use Three.js (r128 or newer) - Include OrbitControls for optional user interaction (disabled by default) - Include GUI panel to toggle animations on/off - All textures generated via Canvas API in code - Shadows enabled on all moving objects - Performance: max 500 draw calls, use BufferGeometry where possible - Responsive: canvas fills window, resize handler updates camera aspect - FPS target: 60 on mid-range laptop - Code must be clean, commented, and organized --- ## OUTPUT Generate the complete HTML file now. Include style section, script section, and all assets inline. Make the house look like a REAL construction site in India. Workers must move realistically. Dust must float naturally. Lighting must feel like sunlight. No shortcuts. No abstract shapes. Every object must look like what it represents. The client must see this and believe it is a video of a real construction site.
Detailed Info
Related Models
Enter invite code
Enter invite code to get credits!
dmbbs499
dmbbs499dmbbs499