Cara Memasukkan Object 3D Blender Ke Website

Pada artikel kali ini, kita akan mencoba cara untuk memasukkan object 3D blender ke website.

Blender merupakan software yang dapat memudahkan kita dalam mebuat object 3D. Ternyata object 3D yang kita buat di blender dapat digunakan di website.

Tentunya kita perlu bantuan Three.js untuk dapat memasukkan object 3D blender ke dalam website.

Download 3D Object

Tetapi di tutorial kali ini kita tidak akan membuat object 3D dari awal. Kita hanya mengambil object 3D gratis di sketchfab.

Kita akan mendownload object 3D dengan format glTF. Disini saya akan mencari mobil 3D. Kalian bisa mencari object 3D sesuka kalian asalkan dengan format glTF.

Kita akan membuat folder dengan nama car3d. Kemudian buka folder tersebut menggunakan text editor visual studio code dan pastikan install 2 extensions berikut Live Sass Compiler dan Live Server.

Di dalam folder car3d buat file index.html, script.js dan buat folder img. Atau bisa melihat struktur folder dibawah sini.

Buka file index.html, kemudian kita akan membuat struktrur html sederhana dan didalamnya kita akan memanggil three.js dan GLTFLoader menggunakan cdn.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Object Blender dengan Three.js</title>
</head>
<body>
    <canvas class="webgl"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/examples/js/loaders/GLTFLoader.js"></script>
    <script src="./script.js"></script>
</body>
</html>

Setup Scene, Camera, dan Renderer

Selanjutnya buka file script.js dan kita mulai dengan setup three.js dari scene, camera, dan renderer.

Disini kita akan menggunakan perspectivecamera dengan position x, y, dan z yaitu 0, 0, 1. Kemudian kita akan merender bagian canvas yang ada di sturktur html.

Kita juga mengisi parameter alpha di bagian WebGLRenderer untuk mengubah background color menjadi putih.

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

// Camera
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 1;
scene.add(camera);

// Renderer
const canvas = document.querySelector("canvas.webgl");

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  alpha: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

Setup GLTFLoader

Setelah kita mensetup scene, camera dan renderer, kemudian kita akan menggabungkan scene.gltf ke dalam three.js dengan menggunakan bantuan GLTFLoader()

Kita juga memperbesar, merotasi , serta mengubah x position dari object. Di bagian akhir kita menambahkan object 3d tersebut ke dalam scene.

// loader
const gltfLoader = new THREE.GLTFLoader();

// Car
gltfLoader.load("img/scene.gltf", (gltf) => {
  gltf.scene.scale.set(4, 4, 5);
  gltf.scene.rotation.set(0.3, -0.6, 0);
  gltf.scene.position.x = 0.25;

  scene.add(gltf.scene);
});

Setup Lights

Untuk lights yang kita gunakan kali ini yaitu AmbientLight dengan warna putih dan intensitas 1.

Kita atur terlebih dahulu posisi dari lights yang akan digunakan. Setelah selesai kita tambahkan ke dalam scene.

// Lights
const pointLight = new THREE.AmbientLight(0xffffff, 1);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 4;
scene.add(pointLight);

Setup Resize dan Animation

Di bagian akhir kita perlu update camera dan renderer kita sesuai dengan ukuran browser. Di tambah lagi kita juga perlu animation untuk setiap frame seperti dibawah ini.

// Resize
window.addEventListener("resize", () => {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

// Animation
const animation = () => {
  // Render
  renderer.render(scene, camera);

  // Call animation again on the next frame
  window.requestAnimationFrame(animation);
};

animation();

Dan selamat kita berhasil menambahkan object 3d dari blender ke dalam website. Jika ada kesulitan kalian bisa komentar di bawah sini.

Download 3D Object

Setup Scene, Camera, dan Renderer

Setup GLTFLoader

Setup Lights

Setup Resize dan Animation

Leave a Comment Cancel Reply