- Three.js / WebGL
- Node.js / NPM
- Webpack Bundler
- 3D Hard-Surface Modelling
The model was constructed in Blender3D, a free 3D graphics application. It is based on a toy I recieved as part of a promotional package during a chance encounter with the Oscar Meyer Weinermobile on a Texas highway in 1999. I photographed the toy from various angles to use as reference images in Blender. Most of the model is built from scratch, with the exception of the car seats and dashboard.
Importing the Model
As my model was build and textured in Blender, the material system differs from that of WebGL. By exporting my model to GLTF format and bringing it into Three.js's online editor, I was able to apply the necessary adjustments to materials that didn't translate well from Blender. Most notably, my window material did not retain it's transparency when exported. I was able to easily adjust this and other material proerties in the Three.js editor.
In order to display the model in a browser, a GLTF Loader needed to be imported from the library's add-ons directory. I used NPM to install the add-on and initialized it in an ES6 module. By referencing my model and running the bundler, I was now able to render my model in the browser and view it, using VS Code's live server plugin to simulate a web server environment.
Presentation & Deployment
To display my scene at responsive sizes, an ES6 module was written to resize the render area to fit the viewport size. I designed a simple header to superimpose over the scene. Fine adjustments were made to the lighting and camera configuration to enhance the scene.
The application was then deployed to my web server using CPanel's Node.js deployment utility.