01 Memulai Three JS

Mengenal dan memulai Three JS

1. Install Vite, Three JS, dan lil-gui

pnpm add vite three lil-gui

2. Setup Struktur Folder

├── package.json
├── readme.md
├── src
│   ├── index.html
│   ├── script.js
│   └── style.css
├── static
│   └── door.jpg
└── vite.config.js

struktur folder sementara seperti ini saja untuk awalan belajar.

INFO

• style.css biar kosong aja untuk sekarang
• static adalah folder untuk menyimpan asset, Vite udah auto detect folder ini, jadi kalau panggil file dari folder ini tidak perlu lagi memanggil /static di bagian src-nya

3. Import Three JS

Di file JavaScript utama script/js, import si Three JS nya kaya gini:

import * as THREE from 'three'

4. Setup index.html

Isi index.html sederhana saja hanya untuk membuat canvas dan memanggil script.js

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<title>First Three.js Project</title>
 
<link rel="stylesheet" href="./style.css">
 
</head>
 
<body>
 
<canvas class="webgl"></canvas>
 
<script type="module" src="./script.js"></script>
 
</body>
 
</html>

4. Memanggil canvas dan Render ThreeJS di canvas

Panggil canvas di script.js terus render ThreeJS di canvas tersebut:

// Canvas
const canvas = document.querySelector('canvas.webgl)
 
// Render
const renderer = new THREE.WebGLRenderer({
	canvas: canvas
})

INFO

Kita fokus saja di script.js

5. Hasil akhir script.js

Kita fokus di script.js, ini adalah halaman isi awalnya sekarang

import * as THREE from 'three'
 
// Canvas
const canvas = document.querySelector('canvas.webgl)
 
// Render
const renderer = new THREE.WebGLRenderer({
	canvas: canvas
})

Itu saja cara memulai projek Three JS yang paling basic. Selanjutnya adalah 4 elemen utama di dalam Three JS.