Interactive Web 3D

Interactive 3D

At work lately, I have been given the job to create an interactive 3D model framework. Sure, I have done stuff in Blender3D and OpenGL in the past, but I thought, how can I do this on the web (most browser support), tablet/mobile friendly and make some things dynamic. Back when I started web development, VRML was a thing, and sure it was awesome for its time (albeit not many browsers supported). I needed something which had the power of what I can do in Blender3D and OpenGL, and I came across this cool Javascript API called WebGL. Programming directly in the WebGL API I found to be very complicated and messy, but lucky for us there are libraries that simplified this for me. I came across this cool and lightweight one called Three.js by mrdoob. Three.js is an awesome 3D library that hides a lot of the WebGL complexities and makes it very simple to get started with 3D programming on the web. You can use Three.js in any way you could use canvas, including full-screen animations, so long as the device supports WebGL. It reminded me a bit of OpenGL and Renderman when I started reading the documentation.

The process of creating 3D using Three.js could be likened to how a movie set works. You start with an empty stage and add some things to it to create a scene. For example, we could add some actors, props, and a backdrop so it looks like we’re inside. Each actor puts on a costume so they look like the character they’re playing. Lights are added so we can see and to set the mood. Finally a camera is positioned to shoot the scene from the desired perspective.

So the actors and props are made by a collection of vertices and faces, which combined is called a geometry. Then from this step, you assign a material to a geometry. A material can be a flat colour, or it could be a texture such as a photo of rock, or wood, or skin. When a geometry and material are combined you have a mesh. A mesh is a complete object that can then be added to a scene. You can move and orientate the whole mesh in your scene as a single object, but you can still access its individual parts if you need to.

Anyways, I can talk more about this another time, lots of work to do. Ciao for now.

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.