Buat halaman arahan 3D WebGL

Membuat halaman arahan WebGL 3D adalah salah satu cara untuk membuat kesan pertama yang hebat dengan audiens Anda. Dengan WebGL, Anda dapat memberikan konten visual berkualitas tinggi di browser. Anda dapat melakukannya tanpa plugin atau persyaratan khusus. Semua browser modern mendukung WebGL, bersama dengan perangkat seluler dan tablet. WebGL memungkinkan Anda untuk membuat adegan 3D yang luar biasa. Ini dapat memberi daya pada pengalaman WebVR, memanipulasi video, render shader grafis dan banyak lagi.

Dalam tutorial ini, Anda akan membuat halaman arahan untuk studio film fiksi, studio relatif. Konsep ini dramatis dan menarik secara visual, sebagai benda misterius mencerminkan dan berputar sebagai respons terhadap interaksi mouse. Partikel-partikel mengungkapkannya, mengubah warna saat mereka bergerak. Anda akan mengerjakan setiap langkah untuk membuat halaman interaktif ini, memungkinkan Anda untuk menghasilkan sendiri untuk proyek Anda (untuk inspirasi lebih lanjut, lihat posting kami yang terbaik Halaman Landing. ).

Anda akan menggunakan hanya fitur yang disertakan dari three.js, perpustakaan rendering 3D yang kuat untuk web. Anda dapat menggunakan gambar Anda sendiri sebagai tekstur untuk membuatnya unik. Anda juga akan belajar tentang memanfaatkan jerat, pencahayaan, dan tekstur untuk meningkatkan detail permukaan, cara menggunakan peta lingkungan, dan cara menambahkan lapisan kedalaman dan minat.

Seharusnya ada lebih dari cukup untuk memulai, dan banyak untuk memicu proyek Anda berikutnya.

Sebelum kamu memulai, Unduh file untuk tutorial ini .

01. Pengaturan HTML dasar

Untuk memulai, Anda perlu tempat untuk melihat adegan 3D Anda. Siapkan file HTML dasar dan sertakan tautan ke three.js. Ini dapat dihosting secara eksternal atau ditambahkan dari Repositori Three.js di sini: . Tambahkan beberapa CSS sederhana untuk membuat halaman layar penuh dan lepaskan bilah gulir. Simpan file Anda ke server web lokal Anda, sehingga Anda dapat menyajikan HTML saat siap untuk diuji. Tambahkan kode berikut untuk memulai.

 ​​& lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; judul & gt; studio relatif & lt; / judul & gt;
& lt; script src = "libs / threen.min.js" & gt; & lt; / script & gt;
& lt; gaya & gt;
html, body {margin: 0; Padding: 0; Overflow: Tersembunyi; }
& lt; / style & gt;
& lt; / head & gt;
& lt; tubuh & gt;
& lt; script & gt;
// kode 3D pergi ke sini
& lt; / skrip & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Tambahkan varian global

Anda akan memerlukan beberapa variabel untuk referensi di seluruh kode lainnya. Atur itu sekarang. Ini akan mencakup array untuk menyimpan partikel, variabel 'T' untuk tetrahedron, mouse, raycaster dan lampu Anda.

Di dalam tag skrip Anda, mulailah dengan menambahkan kode berikut.

 // vars
var num = 30;
objek var = [];
var raycaster = baru tiga.raycaster ();
var mouse = new threen.vector2 ();
var light, t; 

03. Tambahkan adegan, kamera, dan render

Kami harus terlebih dahulu menambahkan adegan yang akan berisi semua objek kami. Kemudian kami menambahkan kamera yang dapat bergerak di dalamnya, panning, memiringkan dan bergerak sesuai kebutuhan. Atribut pertama adalah bidang tampilan. Yang kedua adalah rasio aspek. Anda juga dapat mendefinisikan pesawat dekat dan jauh dalam atribut ketiga dan keempat. Terakhir, tambahkan renderer, yang menangani menggambar adegan ke kanvas.

Di tag skrip tambahkan kode berikut.

 // buat kamera
var camera = New Three.perpectiveCamera
(65, window.innerwidth / window.innerheight,
0,1, 1000);
camera.position.set (0,0,0,0,5);
// Buat adegan
var adegan = baru tiga.Scene ();

// Buat Renderer.
var renderer = baru tiga.webglrenderer (
{antialias: true});
renderer.Setsize (window.innerwidth, jendela.
innerHeight);
dokumen.body.appendchild (renderer.domelement.
);

04. Tambahkan sorotan

Selanjutnya, Anda perlu menambahkan cahaya ke tempat kejadian. Three.js hadir dengan berbagai lampu termasuk titik, terarah, ambient dan lampu sorot. Gunakan sorotan untuk ini. Ini akan memberi Anda posisi dan properti terarah, dan memungkinkan Anda untuk melemparkan bayangan jika Anda mau.

Tambahkan kode berikut di sebelah untuk menambahkan Spotlight.

 // Buat Cahaya Tempat
Light = New Three.Spotlight (0xCCDDFF, .8);
Light.Position.Set (0,0,5);
adegan.add (cahaya); 

05. Tambahkan loop animasi

Loop animasi, kadang-kadang disebut 'render loop', disebut idealnya 60 kali per detik. Film berjalan pada 24 frame per detik (fps) dan ini cukup cepat untuk menipu mata untuk melihat gerakan konstan tanpa gangguan. Dalam animasi komputer, kami bertujuan untuk setidaknya 30 fps, tetapi idealnya 60fps. Ini memastikan kinerja visual yang sangat mulus bahkan jika frame dijatuhkan secara berkala.

Kami mengikat loop animasi ini ke Fungsi PermintaanMasiFrame, yang melakukan dua hal. Pertama, ini memastikan browser siap untuk membuat frame berikutnya. Ini juga berarti animasi dapat menjeda rendering ketika pengguna tidak lagi melihat tab browser itu,

Tambahkan kode ini untuk membuat adegan dalam loop animasi:

 var animate = fungsi () {
PermintaanImationFrame (Animate);
renderer.render (adegan, kamera);
};

// mulai loop animasi
Animate (); 

06. Muat tekstur darat

Selanjutnya, Anda akan membuat tanah untuk adegan itu. Untuk memulai, Anda perlu memuat gambar untuk digunakan. Tekstur untuk hal-hal seperti permukaan tanah dan dinding dapat dibuat dengan mengambil foto Anda sendiri dan dengan hati-hati memotong tepi penyesuaian Photoshop CC. . Pastikan mereka bisa ubin dengan baik. Untuk memulai dengan cepat, ada perpustakaan yang bagus secara online juga, lihat yang terbaik Tekstur gratis .

Anda dapat memilih apa pun yang akan ubin. Ini berarti ujung-ujungnya akan berbaur bersama secara mulus jika Anda meletakkannya berdampingan. Anda dapat memilih sesuatu seperti ubin atau batu untuk ini. Perhatikan bahwa Anda menggunakan opsi Bungkus Tekstur untuk mengulangi pembungkus untuk ini. Contoh ini menggunakan pengulangan 12x12. Sesuaikan ini agar sesuai dengan gambar Anda setelah Anda menguji adegan.

 // Muatkan tekstur tanah
Var Texture = New Three.TextureLoader ().
memuat ("aset / batu.jpg");
Texture.Wraps = Texture.Wrapt = Tiga.
Mengulangi;
Texture.Repeat.Set (12,12);

07. Buat bahan tanah

Three.js mencakup berbagai jenis bahan untuk Anda gunakan. Bahan dianggap sebagai kulit yang menutupi objek 3D. Anda dapat menggunakan bahan dasar yang tidak bereaksi terhadap bahan shader ringan atau phong atau lambert yang melakukannya. Anda dapat menggunakan bahan shader kustom Anda sendiri juga. Untuk tanah ini, gunakan bahan fisik. Ini memiliki tampilan yang sangat realistis, bereaksi terhadap cahaya dengan sangat baik. Gunakan tekstur yang Anda sarat sebagai peta difus, dan juga sebagai bumpmap jika Anda tidak memiliki tekstur tertentu untuk itu.

 // Buat bahan darat
Bahan = BARU tiga.meshphysicalmaterial ({Peta: Tekstur, Bumpmap: Texture}); 

08. Buat jala tanah

Ketika kita menggabungkan bahan (kulit) dengan geometri yang mendefinisikan bentuk objek 3D, kita membuat mesh. Untuk tanah, Anda memerlukan rencana sederhana. Bahan shader dan tekstur akan menciptakan ilusi detail permukaan yang kompleks.

Tambahkan kode berikut untuk membuat mesh ground Anda, putar ke sudut yang bagus dan posisikan ke bawah kamera. Pastikan untuk menjalankan kode Anda setelah ini untuk melihat tampilannya. Sesuaikan kode apa pun yang Anda butuhkan untuk memanggilnya.

 // Buat Mesh Ground
var geometry = baru tiga.planebuffergeometry
(100.100);
var ground = new thread.mesh (geometry,
bahan);
ground.rotation.z = math.pi / 180 * -45;
ground.rotation.x = math.pi / 180 * -90;
ground.position.y = -2.0;
adegan.add (ground); 

09. Muat tujuan

Selanjutnya, Anda akan menambahkan objek 3D Central untuk minat fokal. Ini adalah bintang adegan Anda, jadi pilih tekstur yang ingin Anda bahas. Catatan: Anda akan membuat objek ini sangat reflektif, sehingga tekstur yang Anda muat di sini adalah tampilan yang lebih halus daripada tanah.

 // beban tekstur objek
Var Texture = New Three.TextureLoader ().
memuat ("aset / rock_01_diffusion.jpg"); 

10. Buat peta lingkungan

Selanjutnya, buat lingkungan di sekitar objek Anda yang akan tercermin pada permukaannya. Anda juga bisa menambahkan ini ke adegan sebagai adegan. Properti Background jika Anda mau. Untuk memuat lingkungan, Anda menggunakan cubetextureRoader. Gambar yang Anda gunakan harus enam gambar yang menguliti bagian dalam kubus Anda untuk membentuk gambar yang mulus, yang disebut Cube Maps.

 var envmap = New Three.CubetextureRoader ()
.setpath ('aset /')
.Lue ('' px.jpg ',' nx.jpg ',' py.jpg ',' NY.
jpg ',' pz.jpg ',' nz.jpg ']); 

11. Tambahkan Tetrahedon

Three.js hadir dengan banyak geometri default yang dapat Anda gunakan untuk adegan Anda. Salah satu yang lebih dingin adalah tetrahedron. Dibutuhkan radius dan parameter 'detail' untuk menentukan jumlah wajah objek.

Tambahkan satu ke adegan Anda, dengan kode berikut.

 // Buat Tetrahedron
var geometry = Tiga Baru.
TetrahedronBufferGeometry (2,0);
Bahan var = Baru tiga.MeshFhyficalalal
({Peta: Tekstur, Envmap: Envmap,
Metaliam: 1.0, kekasaran: 0,0});
t = baru tiga.mesh (geometri, material);
t.rotation.x = math.pi / 180 * -10;
adegan.add (t);

12. Tambahkan target rotasi dan kamera

Untuk memastikan kamera selalu melihat objek utama Anda, Anda menggunakan fungsi kamera.Lookat. Anda juga dapat menambahkan beberapa rotasi sekitar ke objek Anda juga.

Perbarui kode fungsi animate Anda agar terlihat seperti ini.

 PermintaanMasiFrame (Animate);
t.rotation.y - = 0,005;
camera.lookat (t.position);
renderer.render (adegan, kamera); 

13. Tambahkan loop partikel

Selanjutnya, tambahkan beberapa partikel sekitar ke tempat kejadian. Ini akan berbaur dengan baik dengan loop video latar depan yang akan Anda tambahkan nanti, serta interaktif. Tambahkan loop yang sederhana 'untuk' untuk menahan kode yang akan Anda gunakan untuk membuat beberapa partikel.

 untuk (i = 0; i & lt; = num; i ++) {
// Kode Partikel akan pergi ke sini
} 

14. Buat Mesh Partikel

Hal pertama yang harus dilakukan adalah membuat objek partikel. Anda bisa melakukan ini dengan bola, sprite, atau objek apa pun yang Anda inginkan. Untuk saat ini, coba jadikan mereka bola sederhana.

Di dalam loop Anda, tambahkan kode berikut.

 // Buat Mesh Baru
var geometry = New Three.Spherebuffergeometry (0,1,6,6);
var materi = tiga baru
var partikel = baru tiga.mesh (geometri, material);

15. Setel posisi acak dan jarak

Partikel-partikel akan mengorbit objek pusat dan harus diposisikan secara acak sehingga mereka mengisi ruang dengan baik dan memiliki tampilan organik. Tambahkan kode berikut untuk mengatur posisi tidak teratur dan kemudian menetapkan jarak konstan untuk setiap partikel.

 // atur posisi acak
Particle.Position.Set (Math.Random () * 100.0 -
50.0,0.0, Math.Random () * - 10.0);
// calc disnace sebagai konstan dan ditugaskan
untuk Obyek
var a = baru tiga.vector3 (0, 0, 0);
var b = partikel.posisi;
var d = a.distanceto (b);
partikel.distance = d;

16. Atur sudut untuk orbit

Untuk membuat animasi orbit lebih cepat, tambahkan konstanta sudut untuk orbit, dan simpan sebagai properti partikel. Tambahkan kode berikut untuk menentukan sudut konten acak ini.

 // Tetapkan 2 sudut acak tetapi konstan
Di Radians.
Partikel.radians = math.random () * 360 * matematika.
PI / 180; // sudut awal
partikel.radians2 = math.random () * 360 * matematika.
PI / 180; // sudut awal

17. Tambahkan partikel ke adegan dan koleksi

Terakhir, tambahkan partikel ke adegan dan ke array objek yang Anda definisikan sebelumnya. Ini akan membuat oleating semua partikel nanti.

 // tambahkan objek ke adegan
adegan.add (partikel);
// Masukkan ke dalam koleksi
objek.push (partikel);

18. Tambahkan animasi ke partikel

Selanjutnya, Anda perlu memperbarui posisi dan rotasi objek partikel Anda. Orbit ini dengan jarak konstan dari pusat adegan. Tambahkan kode berikut ke fungsi animate Anda.

 untuk (i = 0; i & lt; = num; i ++) {
var o = objek [i];
oRotation.y + =. 01;
If (i% 2 == 0) {
o.radian + =. 005; oRadians2 + =. 005;
} lain {
o.radians - =. 005; oRadians2 - =. 005;
}
o.position.x = (math.cos (o.radians) *
o.distance);
o.position.z = (Math.sin (o.radians) *
o.distance);
o.position.y = (Math.sin (o.radians2) *
o.Distance * .5);
}

19. Tambahkan judul

Selanjutnya, tambahkan judul di tengah layar - nama untuk memperkenalkan merek Anda. Surat-spasi untuk judul memberikan tampilan sinematik yang hebat. Gunakan font / gaya apa pun yang Anda suka, tetapi lihat referensi judul film untuk inspirasi. Lihat daftar kami Font gratis Untuk daftar font favorit kami yang dapat diunduh.

Pertama tambahkan elemen DOM untuk judul Anda. Tambahkan ini setelah tag skrip sebelum tag tubuh penutupan.

 & lt; h1 & gt; studio relatif & lt; / h1 & gt;

Tambahkan gaya berikut untuk judul Anda ke tag gaya Anda di bagian atas file Anda.

H1 {Warna: Putih; Posisi: absolut; TOP: 50%;
Z-index: 100; Lebar: 100%; Teks-Align: Center;
Transformasi: Terjemahkan (0, -100%); Font-Family:
'Raleway', Sans-Serif; Font-weight: 100;
Surat-spasi: 40px; Teks-transformasi:
huruf besar; Ukuran font: 16px; }

20. Tambahkan loop video

Trik yang bagus untuk menciptakan kedalaman untuk pendaratan Anda adalah dengan menambahkan loop video kecil. Anda dapat menggunakan asap, debu atau partikel. Ini banyak tersedia secara online, atau bagian dari sejumlah besar paket video dan pembuatan film. Tambahkan tag video berikut setelah tag H1 Anda. Perhatikan bahwa Anda ingin mengaturnya untuk 'dimatikan' dan autoplay. Ini juga akan memungkinkan video bermain di perangkat seluler juga secara online.

 ​​& lt; video id = "videobacker" loop src = "aset /
Snow.mp4 "Autoplay Muted & GT; & LT; / VIDEO & GT;

Untuk menata video, tambahkan CSS berikut ke gaya Anda di kepala halaman Anda.

 ​​#VideoBacker {Background-size: Cover;
Object-Fit: Tutup; Z-index: 9; Opacity: .3;
Posisi: absolut; TOP: 0px; Kiri: 0px;
Lebar: 100VW; Tinggi: 100VH; Transisi: 1S.
Opacity Eance-out;

21. Tambahkan tinju huruf

Untuk benar-benar memberikan halaman pendaratan Anda gaya sinematik, tambahkan beberapa kotak huruf ke halaman.

Mulailah dengan menambahkan elemen div untuk ini.

 ​​& lt; div class = 'bar-top' & gt; & lt; / div & gt;
& lt; div class = 'bar-bottom' & gt; & lt; / div & gt;

Kemudian perbarui gaya Anda untuk menambahkan gaya untuk dua bar hitam ini. Anda dapat menyesuaikan gaya ini dengan selera dan kebutuhan Anda juga.

 ​​.bar-top {latar belakang-warna: hitam;
Tinggi: 100px; Posisi: absolut; TOP: 0;
Kiri: 0; Z-index: 100; Lebar: 100VW;}
.bar-bawah {latar belakang-warna: hitam;
Tinggi: 100px; Posisi: absolut; Bawah: 0;
Kiri: 0; Z-index: 100; Lebar: 100VW;} 

Artikel ini awalnya muncul dalam masalah 287 dari desainer web. Beli Masalah 287. atau berlangganan di sini .

Baca lebih lajut:

• Komponen Web: Panduan Ultimate
• Cara Membuat Efek Parallax Layered
• Cara menambahkan animasi ke SVG melalui CSS