I built a first-person 3D portfolio with collision…
0 reactions
I built a first-person 3D portfolio with collision detection using only HTML and CSS
I’ve rebuilt my personal portfolio as a first-person 3D world you can walk around, with no JavaScript.
You can explore rooms containing my research, tools and talks, open doors, teleport between areas, play HTML/CSS-only games and solve a lockbox puzzle.
Movement and state are handled using CSS animations, custom properties, radio buttons, checkboxes and selectors such as `:has()`. The collision detection uses CSS maths including `sign()`, `abs()` and `clamp()`.
Live site: https://garethheyes.co.uk/
I also wrote about how the movement and collision system works:
https://thespanner.co.uk/pure-css-3d-world-collision-detection
I’d love feedback on the navigation, usability and any browser-specific problems you encounter.
#dev #programming #technology
source
I’ve rebuilt my personal portfolio as a first-person 3D world you can walk around, with no JavaScript.
You can explore rooms containing my research, tools and talks, open doors, teleport between areas, play HTML/CSS-only games and solve a lockbox puzzle.
Movement and state are handled using CSS animations, custom properties, radio buttons, checkboxes and selectors such as `:has()`. The collision detection uses CSS maths including `sign()`, `abs()` and `clamp()`.
Live site: https://garethheyes.co.uk/
I also wrote about how the movement and collision system works:
https://thespanner.co.uk/pure-css-3d-world-collision-detection
I’d love feedback on the navigation, usability and any browser-specific problems you encounter.
#dev #programming #technology
source
| 0 mlx | |
| 1 | |
| 0 |