3D for people who only know HTML

3D HTML demo (drag it with your mouse).

3D in the browser is an amazing thing and it seems that every day we see some a new demo that utilises 3D to wow its audience. But for the most 3D development requires a completely different skillset to the norm a regular web developer will deploy in their day to day. It requires knowledge of complex 3D applications, maths and animation. So I can see why for the majority of us this may be slightly outside of our remit.

I was really interested in bridging that gap. AngularJS is a JavaScript framework that allows the developer to define behaviour as basic mark-up. These web components hide the complexity of the code that sits behind them and allow a developer to focus on expressing their intent purely in HTML.

I thought if I could bring 3D into the hands of any developer, using their existing skill set then the adoption of 3D may be an easier task to achieve. This is what this project is about. If I want to add a model to the browser I only need to reference the model, its size, its position and rotation as attributes in HTML. This I know how to do. I don't need to know or worry how it works under the hood and this alone allows me to create an expressive scene such as the one demonstrated in this demo. If I want to remove the cube; I just delete the line of HTML. I don't have to navigate complex JSON structures or understand how the scene is constructed.

The scenes that can be constructed with this demo are relatively simplistic, but there’s some power in that simplicity. It means practically any web developer on our team can pick this up relatively quickly and start building.

I hope in future to expand the project to allow defining behaviours such as animation or simple logic like movement.