В этом посте мы детально разберём официальный пример three.js с моделью Ferrari 458 Italia. Это не просто красивая 3D-сцена, а отличная учебная база для понимания физических материалов (MeshPhysicalMaterial), HDR-освещения, загрузки сжатых моделей (DRACO) и интерактивного управления свойствами в реальном времени.

Я покажу, как устроен код, какие материалы используются для кузова, стёкол и деталей, а также как работает система смены цвета на лету. Всё это — на основе официального примера с официального сайта three.js.

Источник: threejs.org

Физические материалы — секрет реализма

В основе демки лежит MeshPhysicalMaterial — самый продвинутый материал в three.js. Он поддерживает clearcoat (лаковое покрытие), transmission (прозрачность для стекла) и металличность с шероховатостью.

// Материал для кузова — глянцевый металлик с лаком const bodyMaterial = new THREE.MeshPhysicalMaterial({ color: 0xff0000, metalness: 1.0, roughness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.03 }); // Стекло — прозрачное, с лёгкой металличностью const glassMaterial = new THREE.MeshPhysicalMaterial({ color: 0xffffff, metalness: 0.25, roughness: 0, transmission: 1.0 });
Почему это круто? Параметр clearcoat имитирует слой лака, а transmission делает стекло физически прозрачным, преломляя свет. Это даёт фотореалистичный результат без сложных шейдеров.

HDR-окружение и тональная карта

Сцена использует HDR-карту окружения (venice_sunset_1k.hdr), которая даёт реалистичные отражения и блики. Дополнительно применена ACES Filmic Tonemapping — это обеспечивает кинематографичный контраст и плавные переходы света.

scene.environment = new HDRLoader().load( 'textures/equirectangular/venice_sunset_1k.hdr' ); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 0.85;

Управление цветом в реальном времени

В демке реализована простая, но эффективная система смены цвета кузова, деталей и стекла через HTML-пикеры цвета. Это отличный пример того, как сделать 3D-сцену интерактивной.

const bodyColorInput = document.getElementById( 'body-color' ); bodyColorInput.addEventListener( 'input', function () { bodyMaterial.color.set( this.value ); } );

Загрузка модели с DRACO-сжатием

Модель Ferrari загружается в формате GLTF с использованием DRACO-компрессии. Это позволяет значительно уменьшить размер файла без потери качества геометрии.

const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG ); const loader = new GLTFLoader(); loader.setDRACOLoader( dracoLoader ); loader.load( 'models/gltf/ferrari.glb', function ( gltf ) { ... } );

Анимация колёс и бесконечная дорога

В сцене есть простая анимация: колёса вращаются, а сетка дороги двигается, создавая эффект движения. Это реализовано через requestAnimationFrame (встроенный в three.js цикл).

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 ); }

Легальность и ссылка на источник

Пример предоставлен официальным сайтом three.js под лицензией MIT. Модель Ferrari 458 Italia взята с threejs.org (автор vicent091036) и распространяется по лицензии Creative Commons. Я указываю первоисточники в соответствии с условиями использования.

Оригинал: vicent091036 на threejs.org

Что дальше? Альтернативы и развитие

  • Babylon.js: Ещё один мощный 3D-движок с поддержкой PBR-материалов и физики.
  • Three.js + React (react-three-fiber): Удобная интеграция 3D в React-приложения.
  • Кастомные шейдеры: Для уникальных визуальных эффектов, например, анимация краски «металлик».

Следующий пост будет о 3D модели машины от Babylon.js и как внедрить такую технологию у себя в проекте более подробно и детально.
Следите за обновлениями!