Tiga.js untuk pemula: Mencipta pengalaman 3D di web

Tiga.js adalah perpustakaan JavaScript yang mesra pemula yang memudahkan grafik web 3D dengan abstrak kod webgl kompleks ke dalam komponen yang boleh diurus. 1. Ia menggunakan struktur graf adegan di mana tempat kejadian memegang objek, kamera mentakrifkan pandangan, dan penyokong menarik segala-galanya ke kanvas. 2. Unsur utama termasuk mesh (bahan geometri), dan cahaya untuk penglihatan. 3. Animasi dicapai melalui RequestAnimationFrame untuk kemas kini yang lancar. 4. Interaktiviti boleh ditambah melalui pendengar acara atau OrbitControls untuk manipulasi kamera. 5. Amalan terbaik termasuk menggunakan CDN untuk persediaan, menggunakan semula objek dalam gelung, mengendalikan saiz semula tetingkap, dan belajar dari contoh rasmi. Dengan kod minimum, seperti membuat kiub berputar, pengguna dengan cepat dapat membina pengalaman 3D interaktif di web.

Jika anda pernah mahu membawa grafik 3D ke web tanpa menyelam ke kod WebGL yang kompleks, tiga.js adalah titik permulaan yang sempurna. Ia adalah perpustakaan JavaScript yang ringan dan terbuka yang menjadikannya lebih mudah untuk membuat dan memaparkan kandungan 3D dalam penyemak imbas. Bagi pemula, ia menghilangkan banyak kerumitan sementara masih menawarkan alat yang kuat untuk membina pengalaman 3D interaktif.

Inilah yang perlu anda ketahui untuk memulakan dengan tiga.js - tidak ada pengalaman 3D yang diperlukan.

Apa itu tiga.js?

Tiga.js adalah perpustakaan JavaScript yang membungkus WebGL, API peringkat rendah untuk memberikan grafik 3D dalam penyemak imbas. Daripada menulis beratus-ratus baris kod shader, tiga.js memberi anda objek peringkat tinggi seperti adegan , kamera , lampu , dan jejaring yang anda boleh memanipulasi dengan JavaScript mudah.

Fikirkannya seperti ini:

• WebGL = Membina kereta dari awal.
• Tiga.js = Memandu kereta siap sedia dengan papan pemuka yang hebat.

Ia digunakan secara meluas untuk laman web 3D, visualisasi data, permainan, pratonton produk, dan juga pengalaman realiti maya.

Komponen teras adegan tiga.js

Setiap projek tiga.js bergantung pada beberapa elemen penting. Anda memerlukan semuanya untuk memberikan objek 3D yang paling mudah:

• Adegan - bekas untuk semua objek, lampu, dan kamera 3D anda.
• Kamera - Menentukan bagaimana adegan dilihat (seperti kanta kamera maya).
• Renderer - menarik adegan ke kanvas di halaman HTML anda.
• Mesh - gabungan geometri (bentuk) dan bahan (penampilan).
• Cahaya - tanpa cahaya, kebanyakan bahan tidak akan dapat dilihat.

Berikut adalah contoh yang minimum untuk membuat kiub berputar:

 // 1. Sediakan adegan, kamera, dan penerima
const scene = new three.scene ();
const camera = three.perpectiveCamera baru (75, window.innerwidth / window.innerheight, 0.1, 1000);
const renderer = new Three.WebGlRenderer ();
renderer.setSize (window.innerWidth, window.innerHeight);
document.body.appendchild (renderer.domelement);

// 2. Buat kiub
const geometry = new Three.boxGeometry ();
const material = new Three.MeshBasicMaterial ({color: 0x00ff00, wireframe: true});
const cube = three.mesh baru (geometri, bahan);
Scene.add (Cube);

// 3. Letakkan kamera
camera.position.z = 5;

// 4. Gelung animasi
fungsi animate () {
    RequestAnimationFrame (Animate);

    // putar kiub
    cube.rotation.x = 0.01;
    cube.rotation.y = 0.01;

    renderer.render (adegan, kamera);
}
animate ();

Kod ini menetapkan adegan asas dengan kiub hijau wireframe berputar. Sebaik sahaja anda berjalan, anda sudah berada di wilayah 3D.

Konsep utama untuk difahami lebih awal

Untuk melampaui asas -asas, fokus pada idea -idea asas ini:

• Sistem Penyelaras : Tiga.js menggunakan sistem koordinat tangan kanan. X = kanan, y = up, z = ke arah anda (keluar dari skrin).
• Geometri vs bahan :
  • Geometri mentakrifkan bentuk (kiub, sfera, mesh adat).
  • Bahan mentakrifkan bagaimana ia kelihatan (warna, tekstur, kegilaan).
• Jenis pencahayaan :
  • MeshBasicMaterial tidak bertindak balas terhadap cahaya (baik untuk ujian).
  • MeshLambertMaterial dan MeshPhongMaterial DO - Anda memerlukan lampu seperti DirectionalLight atau PointLight .
• Gelung Animasi : Gunakan requestAnimationFrame() untuk mengemas kini tempat kejadian setiap bingkai.

Menjadikannya interaktif

Salah satu bahagian terbaik tiga.js adalah membuat adegan interaktif. Anda boleh bertindak balas terhadap pergerakan tetikus, klik, atau acara tatal.

Sebagai contoh, untuk memutar kiub hanya apabila pengguna mengklik:

 biarkan berputar = palsu;
renderer.domelement.addeventListener ('klik', () => {
    berputar =! berputar;
});

fungsi animate () {
    RequestAnimationFrame (Animate);

    jika (berputar) {
        cube.rotation.y = 0.02;
    }

    renderer.render (adegan, kamera);
}
animate ();

Anda juga boleh menggunakan perpustakaan seperti OrbitControls untuk membolehkan pengguna pan, zum, dan memutar kamera dengan tetikus:

 const controls = new three.orbitControls (kamera, renderer.domelement);

Hanya masukkan fail OrbitControls.js dari folder Contoh dalam repo tiga.js.

Memulakan petua

• Gunakan boilerplate : Mulakan dengan fail html mudah yang merangkumi tiga.js melalui CDN:

   <script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"> </script>

• Semak contoh : Laman web Three.js rasmi penuh dengan demo kerja yang boleh anda pelajari.
• Alat pemaju : mengubah saiz isu? Semak saiz kanvas anda. Gunakan window.addEventListener('resize', ...) untuk menyesuaikan saiz renderer dan nisbah aspek kamera.
• Prestasi : Elakkan membuat objek baru dalam gelung animasi. Gunakan semula vektor dan matriks apabila mungkin.

---

Tiga.js merendahkan halangan kepada pembangunan web 3D dengan cara yang besar. Sebaik sahaja anda memahami struktur graf pemandangan dan bagaimana objek berinteraksi, anda boleh mula membina segala-galanya dari latar belakang animasi ke permainan 3D penuh. Mulakan kecil, sering bereksperimen, dan jangan takut untuk memecahkan perkara - itulah cara anda belajar.

Pada asasnya, dengan hanya beberapa baris kod, anda sudah dalam perjalanan untuk mencipta pengalaman web yang mendalam.

Atas ialah kandungan terperinci Tiga.js untuk pemula: Mencipta pengalaman 3D di web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!