Three.js এবং Build Tools: একটি সংক্ষিপ্ত পরিচিতি
Three.js হল একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। এটি ওয়েব ব্রাউজারে 3D গ্রাফিক্স এবং এনিমেশন প্রদর্শন করার জন্য WebGL (Web Graphics Library) ব্যবহার করে। Three.js-এর সাহায্যে আপনি ইন্টারঅ্যাকটিভ 3D কনটেন্ট তৈরি করতে পারেন, যা ব্রাউজারে সরাসরি রেন্ডার হয়।
যেহেতু Three.js একটি ভারী লাইব্রেরি হতে পারে এবং এর কোড অনেকটা স্কেলেবল ও ডাইনামিক হতে পারে, তাই Build Tools যেমন Webpack বা Parcel ব্যবহার করা হয় অ্যাপ্লিকেশনের বিভিন্ন জাভাস্ক্রিপ্ট, CSS, এবং অন্যান্য ফাইলগুলিকে একত্রিত করে একটি বন্ডল তৈরি করতে, যা অপটিমাইজড এবং প্রোডাকশন পরিবেশে ব্যবহারের জন্য প্রস্তুত থাকে।
১. Webpack ব্যবহার করে Three.js Bundling
Webpack হল একটি জনপ্রিয় JavaScript module bundler যা বিভিন্ন ফাইল এবং মডিউল একত্রিত করে একটি ফাইল বা ছোট ছোট ফাইলগুলোতে বিভক্ত করে। এটি কোড স্প্লিটিং, মডিউল রেজোলিউশন এবং বিভিন্ন অপটিমাইজেশন প্রক্রিয়া করতে সাহায্য করে।
Webpack সেটআপের জন্য পদক্ষেপসমূহ
প্রথমে Webpack ইনস্টল করা:
- প্রথমে, একটি নতুন Node.js প্রোজেক্ট তৈরি করুন এবং Webpack এবং অন্যান্য প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করুন:
mkdir threejs-webpack-project cd threejs-webpack-project npm init -y npm install --save three npm install --save-dev webpack webpack-cli webpack-dev-serverWebpack কনফিগারেশন ফাইল তৈরি করা:
- আপনার প্রোজেক্টের রুট ডিরেক্টরিতে একটি
webpack.config.jsফাইল তৈরি করুন:
const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, devtool: 'source-map', devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000, }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, ], }, };এখানে
entryনির্দেশ করছে যে আপনার প্রোজেক্টের শুরু ফাইল কোথায় (এখানেsrc/index.js), এবংoutputনির্দেশ করছে বন্ডলড ফাইলটি কোথায় সংরক্ষণ হবে।- আপনার প্রোজেক্টের রুট ডিরেক্টরিতে একটি
Index.js ফাইল তৈরি করা:
src/index.jsফাইলে আপনার Three.js কোড লিখুন। উদাহরণস্বরূপ, একটি বেসিক 3D সcene তৈরি করা:
import * as THREE from 'three'; // Scene, Camera, Renderer Setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Cube Geometry const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; // Animation Loop function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate();Webpack Build Script:
package.jsonফাইলে, Webpack build এবং dev server এর জন্য স্ক্রিপ্ট যোগ করুন:
"scripts": { "build": "webpack --mode production", "start": "webpack serve --mode development" }- Build এবং Run করা:
npm run buildকমান্ড দিয়ে প্রোডাকশন ফাইল তৈরি করুন এবংnpm startদিয়ে ওয়েবপ্যাক ডেভ সার্ভার চালু করুন।
২. Parcel ব্যবহার করে Three.js Bundling
Parcel একটি ওয়েব অ্যাপ্লিকেশন বান্ডলার যা প্রোজেক্টের ফাইলগুলো অটোমেটিকভাবে বন্ডল করে এবং কোড ফাইলগুলোকে দ্রুতভাবে প্রোডাকশন রেডি বানায়। এটি সহজে কনফিগার করা যায় এবং Webpack এর তুলনায় সহজ ব্যবহারের জন্য পরিচিত।
Parcel সেটআপের জন্য পদক্ষেপসমূহ
Parcel ইনস্টল করা:
- প্রথমে Parcel ইনস্টল করুন:
npm install --save-dev parcelIndex.html এবং JavaScript ফাইল তৈরি করা:
- একটি
index.htmlফাইল তৈরি করুন এবং এতে আপনার স্ক্রিপ্ট যোগ করুন:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Three.js with Parcel</title> </head> <body> <script src="./src/index.js"></script> </body> </html>- একটি
- Index.js ফাইল তৈরি করা:
src/index.jsফাইলে Three.js কোড লিখুন, যা উপরের Webpack উদাহরণের মতোই হবে।
Parcel Run:
- আপনার প্রোজেক্টের রুট ডিরেক্টরিতে গিয়ে Parcel দিয়ে আপনার প্রোজেক্ট চালান:
npx parcel index.html- Parcel Build:
- প্রোডাকশন ফাইল তৈরি করতে,
parcel build index.htmlকমান্ড ব্যবহার করুন।
- প্রোডাকশন ফাইল তৈরি করতে,
সারাংশ
Webpack এবং Parcel দুটি শক্তিশালী টুল যা Three.js এর মতো বৃহৎ লাইব্রেরি এবং অ্যাপ্লিকেশন গুলির জন্য খুবই কার্যকরী। Webpack আপনাকে শক্তিশালী কনফিগারেশন এবং কাস্টমাইজেশন প্রদান করে, যেখানে Parcel সহজ এবং দ্রুত সেটআপের জন্য পরিচিত, যার ফলে কম কনফিগারেশন দিয়ে আপনাকে কাজ করতে সাহায্য করে।
এগুলি ব্যবহৃত হলে, আপনার Three.js অ্যাপ্লিকেশন আরও অপটিমাইজড এবং দ্রুত হয়ে উঠবে, কারণ আপনি কোড সঠিকভাবে বন্ডল করতে পারবেন এবং আপনার ফাইল সাইজ কমিয়ে আনতে সক্ষম হবেন।
Read more
