Setup Local Development untuk three.js Menggunakan Webpack

by

Pada tips dan trick kali ini kita akan membahas setup local development environment untuk three.js.

Jika Anda mengikuti tutorial instalasi three.js sebagai node module, tidak disertakan langkah-langkah penggunaan webpack atau module bundler.

Jika Anda menggunakan three.js sebagai node module, saat aplikasi dijalankan akan menemui error karena permasalah import module three.js tidak dikenal.

Untuk dapat mengikuti tutorial ini, diharapkan sudah paham npm (node package manager).

Instalasi Module Yang Diperlukan

Pertama, buat direktori project, pada tutorial digunakan learnthree. Buka command prompt, lalu masuk ke direktori learnthree.

Jalankan npm init -y untuk membuat file package.json.

Install module yang dibutuhkan

  • npm install webpack webpack-cli –save-dev.
  • npm install three.
  • npm install express. Ini optional, pada tutorial digunaka express sebagai webserver.

Struktur File HTML dan Javascript

Selanjutnya buat 2 direktori

  • src: untuk source file yang akan dibundling oleh webpack.
  • dist: untuk file hasil bundling yang dapat diakses oleh public.

Pada direktori dist, buat file index.html, isi dengan html sederhana seperti berikut

<!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>Three</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

Pada direktori src, tambahkan file appthree.js (nama file bebas). Isi dengan code dibawah (code diambil dari github three.)

import * as THREE from 'three';

let camera, scene, renderer;
let geometry, material, mesh;

init();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;

	scene = new THREE.Scene();

	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();

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

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setAnimationLoop( animation );
	document.body.appendChild( renderer.domElement );

}

function animation( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}

Setup File Express

Jika Anda menggunakan express sebagai web server, tambahkan 2 file berikut pada root directory project:

  • app.js : akan berisi code spesifik dengan express
  • server.js : akan berisi code untuk starting point web.

Perhatian, walaupun project kecil, namun suatu kebiasaan yang disarankan untuk memisahkan file untuk code express dengan code lainnya. Oleh karena itu dibuat 2 file diatas.

Isi file app.js

const express = require('express');
const app = express();

//use for serve static file inside directory
app.use(express.static(`${__dirname}/dist`));

module.exports = app;

Isi file server.js

const app = require('./app');

const port = 3000;

app.listen(port, ()=>{
    console.log(`App running on port${port}`);
});

Konfigurasi Webpack

Walaupun project kecil, dengan menggunakan file konfigurasi webpack, akan memudahkan kita dalam proses development.

Pada root directory project, buat file webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/threeapp.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Konfigurasi package.json File

Sangat umum bagi developer berbasiskan npm menggunakan package.json untuk mengatur script saat menjalankan server.

Kita akan gunakan package.json untuk menjalankan webpack dalam melakukan module bundling dan menjalankan web server.

Buka file package.json, lalu tambahkan code berikut pada script.

"start" : "node server.js",
"build": "webpack"

Berikut isi akhir file package.json

{
  "name": "learnthree",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start" : "node server.js",
    "build": "webpack"    
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    "express": "^4.17.1",
    "three": "^0.129.0"
  }
}

Nah, Anda sudah siap membuat web three.js Anda.

File yang Anda akan ubah adalah file di direktori src. Sementara hasil akhir bundling akan disimpan di direktori dist.

Anda bisa mengubah-ubah isi file index.html, namun pastikan nama file javascript yang diinclude adalah main.js. Anda bisa mengubah nama file javascript pada webpack.config.js

Untuk melakukan package bundling, gunakan perintah npm run build.

Untuk menjalakan web server, gunakan npm start.

Sebagai informasi tambahan, berikut struktur file akhir pada directory project learnthree (atau apapun nama project yang Anda gunakan).

learnthree
 - dist
   - index.html
   - main.js
 - node_modules
 - src
   - threeapp.js
 - app.js
 - package-lock.json
 - package.json
 - server.js
 - webpack.config.js

Jika tidak ada kendala, jika Anda ketikan alamat pada browser : localhost:3000 akan tampil seperti berikut:

Sharing is caring:

Leave a Comment