Overview
The 3D LEGO Builder Simulator is an interactive, physics-driven web application enabling users to construct and manipulate modular blocks within a responsive 3D environment. Re-engineered to feature advanced free-motion object manipulation and a tactile physics engine, this sandbox offers a digital building experience directly in the browser.
How to Use
- Camera Controls: Drag on empty space to orbit the camera. Scroll to zoom in or out. Right-click and drag to pan.
- Adding Blocks: Select a block shape, pick a custom color, and tap "Add Block to Scene" to drop it in.
- Free-Motion Dragging: Click (or touch) and hold directly on any block to pick it up. As you move your pointer, the block will follow it freely through 3D space parallel to your screen. When you let go, gravity instantly takes over.
- The Glue System: Toggle "Glue Mode: ON" before dropping blocks onto each other. When glued blocks collide, the physics engine chemically "welds" them together. This allows you to build trees, overarching roofs, and leaning towers without them collapsing.
- Demo Mode: If left idle for 45 seconds, the sandbox will automatically start demonstrating features. Tap the screen or the pulsing badge to instantly regain control, clear the demo, and restore your exact layout.
Technical Details
This application synthesizes the Three.js WebGL library for rendering and Cannon-es for rigid-body physics calculations. Moving blocks utilizes custom raycasting against invisible mathematical planes calculated from the camera's normal trajectory. The Glue mechanism applies LockConstraints internally at the physics-step level to permanently weld bodies that emit collision events while the glue flag is active.
Future Directions
As this simulator evolves, several enhancements are conceptualized to bring it closer to physical interlocking systems:
- Grid Alignment (Snap-to-Grid): To emulate actual LEGO stud connections, future iterations will introduce spatial rounding logic. While dragging, block coordinates will automatically clamp to strict mathematical grid intervals (e.g., locking to the nearest whole integer), ensuring walls align perfectly and uniformly without microscopic gaps.
- Client-Side Save System: A lightweight preservation module is planned using the browser's
localStorageAPI. This system will serialize the visual and physical states (coordinates, rotations, block types, and glue constraints) into a compact JSON string stored securely on your device. This guarantees your layout is remembered between sessions or accidental refreshes without any server-side logging or tracking.