Ferrari 458 Italia 3D: three.js da materiallar, yorug'lik va real vaqt rang boshqaruvi
Ushbu postda biz three.js ning rasmiy Ferrari 458 Italia misolini chuqur tahlil qilamiz. Bu shunchaki chiroyli 3D sahna emas — bu MeshPhysicalMaterial, HDR yorug'lik, DRACO siqilgan modellarni yuklash va real vaqtda xususiyatlarni boshqarishni tushunish uchun ajoyib o'quv qo'llanma.
Men kod qanday ishlashini, kuzov, oyna va detallar uchun qanday materiallar ishlatilganini, shuningdek, real vaqt rang boshqaruvi tizimi qanday amalga oshirilganini — barchasini threejs.org dagi rasmiy misol asosida tushuntirib beraman.
Fizik materiallar — Realizm siri
Ushbu demo markazida MeshPhysicalMaterial — three.js ning eng ilg'or materiali turibdi. U clearcoat (lak qatlami), transmission (oyna uchun shaffoflik) va metalness bilan roughness ni nozik sozlashni qo'llab-quvvatlaydi.
// Kuzov materiali — yaltiroq metallik, lak bilan
const bodyMaterial = new THREE.MeshPhysicalMaterial({
color: 0xff0000,
metalness: 1.0,
roughness: 0.5,
clearcoat: 1.0,
clearcoatRoughness: 0.03
});
// Oyna — shaffof, engil metallik bilan
const glassMaterial = new THREE.MeshPhysicalMaterial({
color: 0xffffff,
metalness: 0.25,
roughness: 0,
transmission: 1.0
});
clearcoat parametri lak qatlamini taqlid qiladi, transmission esa oynani fizik jihatdan shaffof qilib, yorug'likni ko'rsatadi. Bu murakkab shaderlarsiz fotorealistik natijaga olib keladi.
HDR muhit va ton xaritasi
Sahna HDR muhit xaritasidan (venice_sunset_1k.hdr) foydalanadi, bu realistik aks ettirish va porlashlarni ta'minlaydi. Bundan tashqari, ACES Filmic Ton Mapping qo'llanilgan — bu kinematografik kontrast va yorug'likning silliq o'tishini beradi.
scene.environment = new HDRLoader().load( 'textures/equirectangular/venice_sunset_1k.hdr' );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.85;
Real vaqt rang boshqaruvi
Demo oddiy, ammo samarali real vaqt rang tanlash tizimiga ega: kuzov, detallar va oyna rangi HTML rang tanlagichlari orqali o'zgartiriladi. Bu 3D sahnalarni interaktiv va qulay qilishning ajoyib namunasidir.
const bodyColorInput = document.getElementById( 'body-color' );
bodyColorInput.addEventListener( 'input', function () {
bodyMaterial.color.set( this.value );
} );
DRACO siqish bilan modellarni yuklash
Ferrari modeli GLTF formatida DRACO siqish bilan yuklanadi. Bu geometriya sifatini yo'qotmasdan fayl hajmini sezilarli darajada kamaytiradi — vebda tez yuklash uchun juda muhim.
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );
loader.load( 'models/gltf/ferrari.glb', function ( gltf ) { ... } );
G'ildirak animatsiyasi va cheksiz yo'l
Sahna oddiy animatsiya tsiklini o'z ichiga oladi: g'ildiraklar aylanadi va yer panjarasi harakatlanib, harakat effektini yaratadi. Bu three.js ning requestAnimationFrame tsikli orqali boshqariladi.
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 );
}
Qonuniylik va manbaga havola
Ushbu misol three.js rasmiy sayti tomonidan MIT litsenziyasi ostida taqdim etilgan. Ferrari 458 Italia modeli threejs.org (muallif: vicent091036) dan olingan va Creative Commons litsenziyasi asosida tarqatilgan. Men foydalanish shartlariga muvofiq mualliflik huquqini ko'rsataman.
Keyingi qadam qaysi biri? Alternativalar va rivojlanish
- Babylon.js: PBR materiallar va fizikani qo'llab-quvvatlovchi yana bir kuchli 3D dvigatel.
- three.js + React (react-three-fiber): React ilovalarida 3D ni muammosiz integratsiya qilish.
- Maxsus shaderlar: Animatsion metall bo'yoq kabi noyob vizual effektlar uchun.