A web demo app for configuring the visual look of a retail car using WebGL rendering. The project was created using ThreeJS WebGL library with model formats in glTF. Click here to view Demo Video
This project is supplied without any warranty and intended for demo purposes only, to experiment with WebGL (threeJS) and the visual quality that could be achieved with it. The model files were downloaded from www.tf3dm.com and optimized using Blender for realtime rendering capability.
Make sure the following requirements are met.
- A system with good specs for consistend FPS (Recomends Nvidia 1050 Ti or above)
- Running WebServer Setup (LAMP/WAMP/MAMP)
- Latest Chrome/Firefox with JS enabled
The demo is quite easy to run by following the steps mentioned below
- Make sure WebServer is running.
- Cd into your correspodning WebServer's public folder ('www' by default).
- Clone the repository to public folder
git clone https://github.com/EverCG/WebGL-Car-Configurator.git
- Open your browser and load from localhost eg:
http://localhost/WebGL-Car-Configurator
(add port number if required)
- Click and drag using mouse to orbit around the car.
- Use mouse wheel to zoom-in or zoom-out.
- Select any of the options at the bottom of the screen to customize .
The project depends on the following libraries
Using exported GLTF materials from blender seems to produce incorrect color results, so recreating the materials in javascript based on material names from blender.