Get best of the week

Pengantar 3D: Dasar-Dasar Three.js

Kompleksitas Web berubah setiap hari, dan kemampuannya tumbuh sama cepatnya, terutama dengan rendering 3D. Siapa yang baru mulai bergabung dengan tema 3D - selamat datang di kucing.



Ayo pergi dari jauh


WebGL adalah pustaka perangkat lunak untuk JavaScript yang memungkinkan Anda membuat grafik 3D yang berfungsi di peramban. Perpustakaan ini didasarkan pada arsitektur perpustakaan OpenGL. WebGL menggunakan bahasa pemrograman shader GLSL , yang memiliki sintaks mirip C. WebGL menarik karena kode dimodelkan langsung di browser. Untuk ini, WebGL menggunakan objek kanvas yang diperkenalkan dalam HTML5.

Bekerja dengan WebGL, dan dengan shader pada khususnya, adalah proses yang agak memakan waktu. Dalam proses pengembangan, perlu untuk menggambarkan setiap titik, garis, wajah, dan sebagainya. Untuk memvisualisasikan semua ini, kita perlu mendaftarkan sepotong kode yang agak banyak. Untuk meningkatkan kecepatan pengembangan, perpustakaan Three.js dikembangkan .

Three.js adalah perpustakaan JavaScript yang berisi sekumpulan kelas yang telah ditentukan untuk membuat dan menampilkan grafik 3D interaktif di WebGL.

Three.js untuk WebGL sama dengan jQuery untuk JavaScript. Perpustakaan menawarkan sintaks deklaratif, dan abstrak dari sakit kepala yang terkait dengan 3D di browser. Mari ambil gambaran umum dan lihat bagaimana memulai jika Anda baru di dunia 3D.

Lebih lanjut tentang Three.js


Pustaka Three.js, seperti telah disebutkan, membuat bekerja dengan WebGL lebih mudah. Saat menggunakan Three.js, tidak perlu menulis shader (tetapi kemungkinan tetap ada), dan menjadi mungkin untuk beroperasi pada konsep yang sudah dikenal.

Sejumlah besar pengembang bekerja di perpustakaan. Ideologis dan pengembang utama adalah Ricardo Cobello, yang dikenal dengan nama samaran kreatif Mr.Doob .

Pemodelan grafik menggunakan Three.js dapat dibandingkan dengan set, karena kami memiliki kesempatan untuk beroperasi dengan konsep-konsep seperti adegan, cahaya, kamera, objek dan bahan-bahannya.

Tiga paus yang disebut dengan Three.js meliputi:

  • Scene - sejenis platform tempat semua objek yang kita buat ditempatkan;
  • Kamera - sebenarnya - ini adalah "mata" yang akan diarahkan ke tempat kejadian. Kamera mengambil dan menampilkan objek yang terletak di atas panggung;
  • Renderer - visualizer yang memungkinkan Anda untuk menampilkan adegan yang ditangkap oleh kamera.

Three.js memiliki beberapa jenis kamera:

  • Kamera perspektif
  • Kamera stereo
  • Kamera ortografi
  • Kamera kubus

Yang paling umum adalah Perspective Camera dan Orthographic Camera.

Kamera perspektif


Ini adalah mode proyeksi paling umum yang digunakan untuk membuat adegan 3D.

Kamera perspektif dirancang untuk mensimulasikan apa yang dilihat mata manusia. Kamera memahami semua objek dalam proyeksi perspektif, yaitu: semakin jauh objek tersebut dari kita, semakin kecil tampaknya.



Kamera perspektif mengambil 4 argumen:

  • FOV Field Of View (/ ) — , .
  • Aspect ratio — , , . . , , .
  • Near & Far — , . , , , .



Orthographic Camera


Dalam mode proyeksi ini, ukuran objek dalam gambar yang ditampilkan tetap konstan, terlepas dari jaraknya dari kamera. Artinya, ini adalah kamera jarak jauh pada jarak tak terbatas dari objek.

Dalam hal ini, semua garis tegak lurus tetap tegak lurus, semua paralel - paralel. Jika kita menggerakkan kamera, garis dan objek tidak akan terdistorsi.

Ini dapat bermanfaat saat menampilkan adegan 2D dan elemen UI.



Petir


Tanpa pencahayaan di atas panggung, Anda akan mendapatkan kesan bahwa Anda berada di ruangan yang gelap. Selain itu, dengan menyalakan panggung, Anda dapat memberikan realisme yang lebih besar. Secara teknis, setiap pencahayaan dapat diatur ke warna.

Contoh pencahayaan:

  • Ambient Light — , ; , .
  • Directional Light — , . , , , , ; , .
  • Point Light — , . ( ).
  • Spot Light - lampu ini dipancarkan dari satu titik dalam satu arah, sepanjang kerucut, meluas saat Anda menjauh dari sumber cahaya.



Membuat objek di atas panggung


Objek yang dibuat di atas panggung disebut Mesh.

Mesh adalah kelas yang mewakili objek berdasarkan mesh poligonal segitiga.

Kelas ini membutuhkan 2 argumen:

  • Geometri - menggambarkan bentuk (posisi simpul, wajah, jari-jari, dll.)
  • Bahan - menggambarkan penampilan objek (warna, tekstur, transparansi, dll.)

Mari kita coba membuat 2 bentuk sederhana: kubus dan bola.

Pertama, buka situs three.js , unduh versi terbaru perpustakaan. Kemudian kita menghubungkan perpustakaan di kepala bagian atau awal tubuh bagian dokumen kami, dan Anda selesai:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>First Three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
      </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script>
      //  Javascript .
    </script>
  </body>
</html>

Selanjutnya, agar kita dapat menampilkan objek yang dibuat, perlu membuat adegan, menambahkan kamera dan mengkonfigurasi render.

Tambahkan adegan:
var scene = new THREE.Scene();

Tambahkan kamera perspektif:

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Kamera mengambil 4 parameter, yang disebutkan di atas:

  • sudut pandang atau FOV, dalam kasus kami ini adalah sudut standar 75;
  • parameter kedua adalah rasio aspek atau rasio aspek;
  • parameter ketiga dan keempat adalah jarak minimum dan maksimum dari kamera, yang akan jatuh ke rendering.

Tambahkan dan konfigurasikan render:

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Apa yang kami lakukan: pertama-tama buat objek render, lalu atur ukurannya sesuai dengan ukuran area yang terlihat, dan akhirnya tambahkan ke halaman untuk membuat elemen kanvas kosong yang akan kami kerjakan.

Setelah membuat render, kami menunjukkan tempat untuk menampilkan tag kanvas . Dalam kasus kami, kami menambahkannya ke tag tubuh .

Untuk membuat kubus itu sendiri, pertama-tama kita atur geometri:

var geometry = new THREE.BoxGeometry( 10, 10, 10);

Sebuah kubus dibuat menggunakan kelas BoxGeometry . Ini adalah kelas yang berisi simpul dan wajah kubus. Kami mentransfer ukuran:

  • lebar : lebar kubus, ukuran sisi sepanjang sumbu x
  • tinggi : tinggi kubus yaitu ukuran sisi y
  • kedalaman : kedalaman kubus yaitu ukuran sisi pada sumbu Z

Untuk mewarnai kubus, atur bahan:

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

Dalam kasus kami, MeshBasicMaterial diatur dan parameter warna 0x00ff00 dilewati , mis. warna hijau. Bahan ini pada dasarnya digunakan untuk memberikan warna yang seragam pada sosok itu. Kelemahannya adalah angka tersebut menghilang secara mendalam. Tapi bahan ini cukup berguna saat merender gambar rangka menggunakan parameter {wireframe: true} .

Sekarang kita membutuhkan objek Mesh yang mengambil geometri dan menerapkan materi ke dalamnya:

var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 25;

Tambahkan Mesh ke adegan dan pindahkan kamera ke belakang, karena semua objek setelah metode scene.add () ditambahkan secara default dengan koordinat (0,0,0), karena kamera dan kubus akan berada pada titik yang sama.

Untuk menghidupkan kubus, kita perlu menggambar semuanya di dalam render loop menggunakan requestAnimationFrame :

function render() {
        requestAnimationFrame( render );
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;      
  renderer.render( scene, camera );
}
render();

requestAnimationFrame adalah permintaan ke browser yang Anda inginkan untuk menghidupkan sesuatu. Kami melewatinya fungsi untuk memanggil, yaitu, fungsi render ().

Di sini kita mengatur parameter kecepatan rotasi. Akibatnya, loop membuat adegan kami 60 kali per detik dan menyebabkan kubus berputar.


Sekarang mari kita menggambar bola:

var geometry = new THREE.SphereGeometry(1, 32, 32);

Untuk membangun bola, kelas SphereGeometry digunakan , yang menangani:

  • radius (nilai default adalah 1)
  • widthSegments - jumlah segmen horisontal (segitiga). Nilai minimum adalah 3, nilai default adalah 8
  • heightSegments - jumlah segmen vertikal. Nilai minimum adalah 2, nilai default adalah 6

Ngomong-ngomong, semakin Anda menentukan jumlah segitiga, semakin halus permukaan bola itu.

Selanjutnya, kami mencoba menggunakan bahan lain - MeshNormalMaterial - bahan multicolor yang membandingkan vektor normal dalam warna RGB:

var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 3;

Ada banyak jenis bahan. Beberapa bahan dapat digabungkan dan diterapkan secara bersamaan ke satu gambar. Baca lebih lanjut di sini .

Langkah terakhir adalah mengatur siklus rendering:

function render() {
	requestAnimationFrame( render );
	sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render( scene, camera );
}
render();

Dan kami mendapatkan yang berikut:


Mari kita coba membuat figur yang lebih kompleks, dan menerapkan material yang lebih kompleks.

Sebagai contoh, ambil material MeshPhongMaterial , yang memperhitungkan iluminasi. Karena itu, pertama-tama kita perlu menambahkan beberapa cahaya ke tempat kejadian. Di bawah ini kami menambahkan SpotLight dengan warna kuning dan mengatur posisinya pada sumbu koordinat:

var scene = new THREE.Scene();
var spotLight = new THREE.SpotLight(0xeeeece);
spotLight.position.set(1000, 1000, 1000);
scene.add(spotLight);
var spotLight2 = new THREE.SpotLight(0xffffff);
spotLight2.position.set( -200, -200, -200);
scene.add(spotLight2);

SpotLight , seperti yang disebutkan di atas, memancar dari satu titik dalam satu arah, sepanjang kerucut, mengembang saat Anda menjauh dari sumber cahaya. Selain warna, lampu sorot dapat mengambil argumen: intensitas, jarak, sudut, penumbra, pembusukan , dan juga bayangan.

Anda dapat membaca tentang jenis cahaya lain dan kemampuannya di sini .

Sekarang tentukan bentuk itu sendiri:

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

Kelas TorusGeometry dirancang untuk membangun tori atau "rol". Kelas ini menggunakan parameter berikut:

  • radius, standarnya adalah 1;
  • diameter pipa, standar 0,4;
  • radialSegments atau jumlah segmen segitiga, default ke 8;
  • tubularSegments atau jumlah segmen wajah, standarnya adalah 6

Tambahkan bahan:

var material = new THREE.MeshPhongMaterial( {
color: 0xdaa520,
specular: 0xbcbcbc,
 } );

Bahan ini ditujukan untuk permukaan yang mengkilap. Kami memberinya warna emas, dan menambahkan properti specular , yang memengaruhi kilau material dan warnanya. Warna default adalah 0x111111 - abu-abu gelap.

Render, dan inilah yang akhirnya kami dapatkan:


Sedikit lagi tentang fitur Three.js


Untuk memasukkan Three.js dalam sebuah proyek, Anda hanya perlu menjalankan npm install three .

Jika Anda menggabungkan file menggunakan Webpack atau Browserify , yang memungkinkan Anda untuk mengimplementasikan memerlukan ('modul') di browser, menggabungkan semua dependensi Anda, Anda memiliki opsi untuk mengimpor modul ke file sumber Anda dan terus menggunakannya dalam mode normal:

var THREE = require('three');

var scene = new THREE.Scene();
...

Dimungkinkan juga untuk menggunakan impor sintaks ES6 :

import * as THREE from 'three';

const scene = new THREE.Scene();
...

Atau, jika Anda ingin mengimpor hanya bagian-bagian tertentu dari pustaka Three.js, misalnya Adegan :

import { Scene } from 'three';

const scene = new Scene();
...

Kesimpulan


Dengan bantuan hampir beberapa baris kode, kami membuat 2 bentuk sederhana, dan satu lagi sedikit lebih rumit. Secara alami, Three.js memiliki lebih banyak fitur. Three.js memiliki banyak bentuk di dalam kotak, bahan, jenis pencahayaan, dll. Ini hanya sebagian kecil dari dasar-dasarnya.

Perpustakaan Three.js memungkinkan Anda membuat dan menciptakan hal-hal yang benar-benar sehat. Berikut adalah beberapa contoh tempel:

Contoh 1
Contoh 2
Contoh 3

Jika Anda ingin mulai belajar 3D dalam JavaScript, Anda dapat menemukan semua yang Anda butuhkan di sini atau di sini .

More articles:


All Articles