As part of the nvisionaries Science Fair, technical lead Tyler Gottlieb took a leap outside the box to stretch his imagination and skills with a 3D web application utilizing three.js, React, webpack, and Blender.
Tyler was sick of the standard bootstrapped or material designed website and wanted to experiment with using 3-dimensional tools and scenes within the browser to create a web experience that would fascinate users.
“I want people to wonder how it’s even possible to create the things I conjure.” -Tyler Gottlieb, Technical Lead (Milwaukee Region)
This 3D website is a React app using three.js, a JavaScript library that provides the necessary helper methods to fully create and interact with a 3D model in HTML. In order to build a 3D application, you need to code in a camera, a scene, and a renderer. Once you have the scene set up, you can add as many objects as you like to it.
3D models can be created and customized through tools like Blender, Inkscape, Autodesk, and Adobe Modeler or sourced from a number of online resources. A technique known as texture baking allows you to take a high poly, very complex 3D model with lots of vertices and smooth out the vertices while retaining the information of where they were. This allows for a high-def look and feel without the need for high-def computing power. The developer can control how and when animations are triggered or the speed at which they’re played, adjust the light source, and more to create an interactive experience.
This application was made possible via WebGL (Web Graphics Library), a JavaScript API that can render high-performance interactive 3D and 2D graphics within compatible web browsers without the use of plugins. Adobe Flash had limitations with browser compatibility that were a blocker for this type of development for many years, but today WebGL allows the user to have highly interactive performance without lag. This has been a gamechanger for allowing users to interact in a browser with game engines and 3D compatible tools.
Any industry with a physical product could utilize an application like this to provide an interactive model for customers to experience before purchase. A 3D website offers a novel and exciting in-browser experience to users, using technology to inspire and delight.
Meet the nvisionary
|
Name: Tyler Gottlieb |
|
Are you a creative technologist with a passion for experimenting with emerging technology? Learn more about joining our team and becoming an nvisionary!