Ferrari 458 Italia in 3D: Materials, Lighting & Real-Time Color Control with three.js
In this post, we'll take a deep dive into the official three.js example featuring the Ferrari 458 Italia model. This isn't just a visually impressive 3D scene — it's an excellent learning resource for understanding MeshPhysicalMaterial, HDR lighting, DRACO-compressed model loading, and real-time property control.
I'll break down how the code works, what materials are used for the body, glass, and details, and how the real-time color control system is implemented — all based on the official example from threejs.org.
Physical Materials — The Secret to Realism
At the heart of this demo is MeshPhysicalMaterial — three.js's most advanced material. It supports clearcoat (clear lacquer layer), transmission (transparency for glass), and fine-tuned metalness with roughness control.
// Body material — glossy metallic with clearcoat
const bodyMaterial = new THREE.MeshPhysicalMaterial({
color: 0xff0000,
metalness: 1.0,
roughness: 0.5,
clearcoat: 1.0,
clearcoatRoughness: 0.03
});
// Glass — transparent with slight metalness
const glassMaterial = new THREE.MeshPhysicalMaterial({
color: 0xffffff,
metalness: 0.25,
roughness: 0,
transmission: 1.0
});
clearcoat parameter simulates a lacquer layer, while transmission makes glass physically transparent, refracting light realistically. This delivers photorealistic results without complex custom shaders.
HDR Environment & Tone Mapping
The scene uses an HDR environment map (venice_sunset_1k.hdr), which provides realistic reflections and highlights. Additionally, ACES Filmic Tone Mapping is applied for cinematic contrast and smooth light transitions.
scene.environment = new HDRLoader().load( 'textures/equirectangular/venice_sunset_1k.hdr' );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.85;
Real-Time Color Control
The demo features a simple yet effective real-time color picker system for the body, details, and glass. This is a great example of making 3D scenes interactive and user-friendly.
const bodyColorInput = document.getElementById( 'body-color' );
bodyColorInput.addEventListener( 'input', function () {
bodyMaterial.color.set( this.value );
} );
Loading Models with DRACO Compression
The Ferrari model is loaded in GLTF format using DRACO compression. This significantly reduces file size without sacrificing geometric quality — crucial for fast loading on the web.
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );
loader.load( 'models/gltf/ferrari.glb', function ( gltf ) { ... } );
Wheel Animation & Infinite Road
The scene includes a simple animation loop: wheels rotate and the ground grid moves to simulate motion. This is handled through the built-in three.js requestAnimationFrame loop.
function animate() {
const time = - performance.now() / 1000;
for ( let i = 0; i < wheels.length; i ++ ) {
wheels[ i ].rotation.x = time * Math.PI * 2;
}
grid.position.z = - ( time ) % 1;
renderer.render( scene, camera );
}
Legality & Source Attribution
This example is provided by the official three.js website under the MIT license. The Ferrari 458 Italia model is sourced from threejs.org (author: vicent091036) and is distributed under a Creative Commons license. I provide proper attribution in accordance with the usage terms.
What's Next? Alternatives & Further Development
- Babylon.js: Another powerful 3D engine with PBR materials and physics support.
- three.js + React (react-three-fiber): Seamless 3D integration in React applications.
- Custom Shaders: For unique visual effects like animated metallic paint.