Membuat Object 3D di Website Menggunakan Three.js

Pada artikel kali ini, saya akan membuat object 3D di website menggunakan bantuan Three.js

Three.js merupakan javascript library yang dapat menampilkan object 3D di web browser dengan menggunakan WebGL. Dengan Three.js kita dapat membuat sebuah landing page maupun game 3d berbasis web.

Setup Scene, Camera, dan Renderer

Sebelum membuat scene, kita harus terlebih dahulu membuat file html dengan nama index.html

Kemudian kita akan menggunakan cdn untuk memanggil Three.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Membuat Object 3D Three.js</title>
</head>

<body>

  <h1>Membuat object 3D ThreeJS</h1>

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

  <script></script>
</body>

</html>

Agar object yang kita buat dapat ditampilkan dengan Three.js, kita terlebih dahulu harus mengatur scene, camera, dan renderer.

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

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

Taruh code diatas ke dalam tag script. Berikut penjelasan detail code diatas.

Scene

Scene yang kita buat diatas nantinya akan digunakan sebagai tempat untuk object, camera, dan lights yang akan dirender oleh Three.js

Camera

Three.js menyediakan beberapa camera yang berbeda, tetapi disini kita akan menggunakan PerspectiveCamera.

Pada attribute pertama kita mengisikan bidang pandang dengan nilai 75 derajat. Attribute yang kedua merupakan aspect ratio yang didapatkan dari hasil bagi lebar dibagi tinggi browser.

Attribute ketiga dan keempat merupakan jarak terdekat dan terjauh dari suatu bidang ke camera.

Kita juga mengubah z position dari camera yang defaultnya 0 menjadi 5.

Renderer

Untuk renderer yang kita gunakan yaitu WebGLRenderer. Setalah memanggil WebGLRenderer kita perlu setting ukuran layar browser yang akan di render nantinya. Dibagian terakhir kita menambah renderer ke dalam html yang nantinya akan dibuatkan sebuah canvas.

Setup Lights

Three.js memiliki beberapa lights, kalian bisa membaca dokumentasi dari Three.js untuk melihat beberapa lights yang lainnya. Untuk tutorial kali ini kita akan menggunakan PointLight.

const pointLight = new THREE.PointLight(0xffffff, 2);
pointLight.position.x = 0;
pointLight.position.y = -5;
pointLight.position.z = 7;
scene.add(pointLight);

Pada attribute pertama kita mengisi warna lampu dengan warna putih dan untuk attribute yang kedua kita isi dengan intensitas cahaya. Kita akan mengisi intensitas cahayan menjadi 2 agar tidak terlalu terang.

Setelah itu kita perlu setting position dari lights. Disini kita akan mengubah position x, y, z lights. Dan yang terakhir tambahkan lighst ke dalam scene agar dapat dirender nantinya.

CREATE Object 3D

Kita perlu mendownload terlebih dahulu texture matahari di sini. Setelah itu buat folder dengan nama textures lalu pindahkan hasil download tadi ke dalam folder textures dan jangan lupa untuk mengganti namanya menjadi sun.jpg

const textureLoader = new THREE.TextureLoader();
const sunTexture = textureLoader.load("textures/sun.jpg");

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({
   map: sunTexture,
});
const sun = new THREE.Mesh( geometry, material );
scene.add( sun );

Pertama kita perlu memanggil terlebih dahulu TextureLoader() yang kemudian kita load dengan gambar yang barusan kita download.

Setelah itu kita buat SphereGeometry dengan mengisi radius, widthSegments, dan heightSegments. Kemudian kita gunakan MeshStandardMaterial() untuk map texture yang kita buat tadi.

Dan bagian terakhir kita menggunakan Mesh() untuk menggabungkan geometry dengan material. Setelah itu tambahkan ke dalam scene.

Buat Animation

Agar object yang kita buat dapat bergerak kita membuat sebuah function dengan nama animate.

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

Di dalamnya kita akan merequest animation frame tiap detik.

Setelah itu, kita akan merotasi object matahari dengan menambahkan 0.01 untuk setiap detiknya dan jugan lupa untuk merender kembali scene dan camera.

Bagian terkahirnya kita memanggil animate() dan selamat kita sudah berhasil membuat matahari 3D. Jika ada kesulitas kalian bisa komentar dibawah sini.