Creating 3D Worlds with HTML and CSS (2013)
3 days ago
- #Innovation
- #CSS3D
- #WebDevelopment
- The author created a demo showcasing CSS 3D transforms to build 3D environments.
- The demo evolved with more complex models, realistic lighting, shadows, and collision detection.
- 3D objects in CSS are created using HTML elements, manipulated via transforms without complex math.
- Lighting was a major challenge, requiring calculations to simulate depth and atmosphere.
- Flat shading was initially used, but the author sought more realistic lighting with multiple light sources.
- A second approach used <canvas> to generate light maps for realistic lighting effects.
- Shadows were implemented by checking light obstruction between surfaces.
- Collision detection uses a height map to determine player movement and interactions.
- Future plans include developing a game and integrating these techniques with Three.js.
- The project received widespread acclaim for its innovative use of CSS and JavaScript.