Three.js সেটআপ এবং ইনস্টলেশন

থ্রি.জেএস (Three.js) - Web Development

326

Three.js কি?

Three.js একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। এটি ওয়েব ব্রাউজারে WebGL প্রযুক্তির মাধ্যমে 3D গ্রাফিক্স এবং এনিমেশন রেন্ডার করে। Three.js ডেভেলপারদের জটিল 3D গ্রাফিক্স এবং ভিজ্যুয়াল ইফেক্ট তৈরি করতে সহজ এবং দ্রুত উপায় সরবরাহ করে। আপনি সহজেই থ্রি-ডি মডেলস, লাইটিং, শেডিং, কেমেরা, এনিমেশন, এবং অন্যান্য 3D উপাদান ওয়েব পেজে প্রদর্শন করতে পারেন।

Three.js ব্যবহার করে আপনি ওয়েব ব্রাউজারে 3D সিমুলেশন এবং গেম, ডেটা ভিজ্যুয়ালাইজেশন, এবং আরও অনেক ধরনের 3D অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Three.js ইনস্টলেশন

Three.js এর সাহায্যে 3D গ্রাফিক্স তৈরি করতে শুরু করার জন্য, আপনাকে প্রথমে Three.js ইনস্টল করতে হবে। এখানে আমরা দেখাবো কিভাবে Three.js সেটআপ এবং ইনস্টলেশন করতে হয়।

১. CDN (Content Delivery Network) এর মাধ্যমে ইনস্টলেশন

Three.js ব্যবহার শুরু করার জন্য সবচেয়ে সহজ উপায় হল CDN এর মাধ্যমে লাইব্রেরি ইনস্টল করা। এটি আপনাকে স্থানীয়ভাবে ফাইল ডাউনলোড করার প্রয়োজন ছাড়া সরাসরি লাইব্রেরি ব্যবহারের সুবিধা দেয়।

উদাহরণ:

আপনি 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 Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Your Three.js code goes here
        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);

        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;

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

        animate();
    </script>
</body>
</html>

এই কোডে, Three.js CDN থেকে সরাসরি লোড করা হয়েছে এবং একটি সাধারণ 3D বক্স তৈরি করা হয়েছে যা রোটেট হচ্ছে।

২. npm এর মাধ্যমে ইনস্টলেশন

Three.js ইন্সটল করার আরেকটি জনপ্রিয় উপায় হল npm (Node Package Manager) ব্যবহার করা, বিশেষ করে যখন আপনি JavaScript অ্যাপ্লিকেশন তৈরি করছেন এবং প্রকল্পের ফাইলগুলো পরিচালনা করছেন।

প্রক্রিয়া:

প্রথমে, আপনার প্রোজেক্ট ডিরেক্টরিতে গিয়ে একটি নতুন Node.js প্রোজেক্ট তৈরি করুন:
```
npm init -y
```
এরপর, Three.js ইনস্টল করুন:
```
npm install three
```

ইনস্টলেশন সম্পন্ন হওয়ার পর, আপনি Three.js লাইব্রেরি আপনার JavaScript কোডে ইম্পোর্ট করতে পারবেন:

import * as THREE from 'three';

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);

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;

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

animate();

এখানে, import * as THREE from 'three'; লাইনটি Three.js লাইব্রেরি আপনার JavaScript ফাইলে আমদানি করে। এরপর, আপনি সহজেই আপনার 3D দৃশ্য তৈরি এবং রেন্ডার করতে পারবেন।

৩. Yarn এর মাধ্যমে ইনস্টলেশন

Yarn হল NPM এর একটি বিকল্প যা একইভাবে কাজ করে কিন্তু কিছু উন্নত বৈশিষ্ট্য সরবরাহ করে। Yarn ব্যবহার করে Three.js ইনস্টল করার জন্য আপনাকে নিচের কমান্ডটি চালাতে হবে:

Yarn দিয়ে প্রকল্প তৈরি করুন:
```
yarn init -y
```
Three.js ইনস্টল করুন:
```
yarn add three
```
এরপর, Three.js লাইব্রেরি ব্যবহার করতে একইভাবে কোড লিখুন যেমন NPM-এর ক্ষেত্রে করা হয়েছে।

৪. ব্যাসিক 3D দৃশ্য তৈরি করা

Three.js সেটআপ করার পর, আপনি প্রথম 3D দৃশ্য তৈরি করতে পারেন। এখানে একটি সহজ কোড উদাহরণ দেওয়া হলো, যা একটি রোটেটিং কিউব তৈরি করবে:

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        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);

        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;

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

        animate();
    </script>
</body>
</html>

এখানে, Three.js এর মাধ্যমে একটি Cube তৈরি করা হয়েছে, যা প্রতি ফ্রেমে রোটেট হয় এবং আপনার ব্রাউজারে রেন্ডার করা হয়।

সারাংশ

Three.js সেটআপ এবং ইনস্টলেশন অনেক সহজ এবং বিভিন্ন পদ্ধতিতে করা যায়। আপনি CDN, npm, বা Yarn ব্যবহার করে Three.js ইনস্টল করতে পারেন। তিনটি প্রধান ধাপ অনুসরণ করে আপনি সহজেই 3D গ্রাফিক্স তৈরি করতে পারবেন:

Three.js ইনস্টলেশন
একটি 3D দৃশ্য তৈরি করা
রেন্ডারিং এবং এনিমেশন ব্যবহার করা

এটি আপনি যেকোনো ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটে 3D গ্রাফিক্স যোগ করতে খুবই কার্যকরী উপায়।

Content added By

Md Zahid Hasan

Three.js এর জন্য পরিবেশ প্রস্তুত করা

253

Three.js কী?

Three.js একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স ওয়েব পেজে প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে এবং আপনি HTML এবং CSS ব্যবহার করে ওয়েব ব্রাউজারে ত্রিমাত্রিক গ্রাফিক্স এবং ভিজ্যুয়াল ইফেক্টস তৈরি করতে পারেন। Three.js এর মাধ্যমে আপনি খুব সহজে 3D স্যিন তৈরি করতে পারেন, যেখানে শেপ, মডেল, লাইটিং, ক্যামেরা, এবং অন্যান্য 3D উপাদানগুলি ব্যবহৃত হয়।

কেন Three.js ব্যবহার করবেন?

সহজ এবং সহজেই শেখা: Three.js এর ব্যবহার এবং ডকুমেন্টেশন খুবই সরল এবং বোঝার জন্য সহজ।
ব্রাউজারে রেন্ডারিং: এটি ব্রাউজারের মধ্যে নেটিভ WebGL এর মাধ্যমে 3D গ্রাফিক্স রেন্ডারিং করতে সক্ষম।
বিভিন্ন প্ল্যাটফর্মে সমর্থন: WebGL এর উপর ভিত্তি করে এটি সমস্ত মডার্ন ব্রাউজারে কাজ করে, এবং এটি ডেস্কটপ এবং মোবাইল উভয় প্ল্যাটফর্মে সমর্থিত।
লাইভ 3D মডেলিং: আপনি Three.js ব্যবহার করে লাইভ 3D মডেল তৈরি করতে পারেন, যা গেম, ইন্টারেক্টিভ ওয়েবসাইট, বা আরও উন্নত 3D ভিজ্যুয়ালাইজেশন তৈরিতে সহায়ক।

Three.js এর জন্য পরিবেশ প্রস্তুত করা

Three.js এর মাধ্যমে 3D গ্রাফিক্স তৈরি করতে প্রথমে আপনাকে কিছু সরঞ্জাম এবং লাইব্রেরি ইনস্টল করতে হবে। পরিবেশ প্রস্তুত করার জন্য নিচে পদক্ষেপগুলি অনুসরণ করুন:

১. Node.js এবং NPM ইনস্টল করা

Three.js ব্যবহার করার জন্য প্রথমেই Node.js ইনস্টল করতে হবে, কারণ এটি প্যাকেজ ম্যানেজার NPM বা Yarn এর সাথে সঙ্গতিপূর্ণ এবং লাইব্রেরি ইনস্টল করার জন্য প্রয়োজনীয়।

Node.js ডাউনলোড এবং ইনস্টল করা:
- Node.js অফিসিয়াল ওয়েবসাইট থেকে LTS ভার্সন ডাউনলোড করুন এবং ইনস্টল করুন।
- ইনস্টলেশন নিশ্চিত করতে টার্মিনালে নিচের কমান্ডটি ব্যবহার করুন:
```
node -v
npm -v
```

২. Three.js ইনস্টল করা

Three.js ব্যবহারের জন্য আপনাকে প্রথমে এটি ইনস্টল করতে হবে। আপনি এটি NPM বা CDN এর মাধ্যমে ইনস্টল করতে পারেন।

NPM ব্যবহার করে Three.js ইনস্টল করা:

আপনার প্রোজেক্ট ফোল্ডারে গিয়ে npm init কমান্ড দিয়ে একটি নতুন Node.js প্রোজেক্ট তৈরি করুন।
এরপর, Three.js ইনস্টল করতে নীচের কমান্ডটি ব্যবহার করুন:
```
npm install three
```

CDN এর মাধ্যমে Three.js ইনস্টল করা:

আপনি যদি CDN ব্যবহার করতে চান, তবে আপনার HTML ফাইলে নিচের <script> ট্যাগটি যুক্ত করতে পারেন:

<script src="https://cdn.jsdelivr.net/npm/three@0.137.5/build/three.min.js"></script>

৩. প্রোজেক্টের ফাইল স্ট্রাকচার তৈরি করা

Three.js প্রোজেক্টে বিভিন্ন ফাইল তৈরি করার জন্য একটি সাধারণ স্ট্রাকচার নিচে দেওয়া হল:

my-threejs-project/
├── index.html
├── main.js
├── style.css
└── assets/
    └── model/
        └── my-model.obj

index.html: আপনার HTML ডকুমেন্ট যেখানে 3D গ্রাফিক্স প্রদর্শিত হবে।
main.js: এই ফাইলে আপনি Three.js এর কোড লিখবেন, যেমন স্যিন, ক্যামেরা, লাইট, এবং 3D অবজেক্ট তৈরি করবেন।
style.css: ওয়েব পেজের স্টাইলিং।

৪. প্রথম 3D স্যিন তৈরি করা

Three.js দিয়ে প্রথম 3D স্যিন তৈরি করার জন্য নীচের কোড ব্যবহার করা যেতে পারে। এটি একটি বেসিক স্যিন যেখানে একটি কিউব (Cube) প্রদর্শিত হবে।

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 Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.137.5/build/three.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

main.js:

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

// 2. Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

// 4. Create a Cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 5. Set the camera position
camera.position.z = 5;

// 6. Animation function
function animate() {
    requestAnimationFrame(animate);

    // Rotate the cube for some animation effect
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // Render the scene
    renderer.render(scene, camera);
}

// 7. Start the animation loop
animate();

style.css (optional):

body {
    margin: 0;
    overflow: hidden;
}

canvas {
    display: block;
}

৫. Live Server চালানো

এখন আপনি আপনার প্রোজেক্ট চালানোর জন্য একটি Live Server ব্যবহার করতে পারেন। আপনি VS Code ব্যবহার করছেন তবে তার Live Server extension ইনস্টল করতে পারেন, অথবা আপনি নীচের কোড দিয়ে একটি সহজ HTTP সার্ভার চালাতে পারেন:

Live Server চালানোর জন্য:
```
npm install -g live-server
live-server
```

এটি আপনার প্রোজেক্ট ফোল্ডারে গিয়ে টার্মিনাল থেকে চালাতে হবে এবং এরপর আপনার ব্রাউজারে http://localhost:8080 এ গিয়ে দেখতে পারবেন।

সারাংশ

Three.js ব্যবহার করার জন্য আপনার সিস্টেমে Node.js, NPM বা Yarn ইনস্টল করা থাকতে হবে। এরপর, আপনি Three.js লাইব্রেরি ইনস্টল করে 3D স্যিন তৈরি শুরু করতে পারেন। HTML, CSS, এবং JavaScript এর সমন্বয়ে আপনি একটি সম্পূর্ণ 3D গ্রাফিক্স পরিবেশ তৈরি করতে পারবেন। Three.js এর মাধ্যমে আপনি সহজে ব্রাউজারে 3D গ্রাফিক্স প্রদর্শন করতে পারবেন এবং এর জন্য সঠিক পরিবেশ প্রস্তুত করা অত্যন্ত গুরুত্বপূর্ণ।

Content added By

Md Zahid Hasan

CDN এবং npm ব্যবহার করে Three.js ইন্সটলেশন

302

Three.js কি?

Three.js একটি জনপ্রিয় এবং শক্তিশালী 3D গ্রাফিক্স লাইব্রেরি যা WebGL-এর উপরে তৈরি হয়েছে। এটি ওয়েব ব্রাউজারে ত্রিমাত্রিক গ্রাফিক্স, এনিমেশন, এবং ভিজ্যুয়ালাইজেশন তৈরি করার জন্য ব্যবহৃত হয়। Three.js আপনাকে 3D গ্রাফিক্স এবং শেডিংয়ের জন্য সহজ উপায় প্রদান করে, যা JavaScript কোডের মাধ্যমে ব্রাউজারে বাস্তবায়িত হয়। এটি গ্রাফিক্স তৈরির জন্য বিভিন্ন ফিচার যেমন ক্যামেরা, লাইট, 3D অবজেক্ট, মেটেরিয়াল, এবং রেন্ডারিং টেকনিক্স ব্যবহার করতে দেয়।

Three.js ইন্সটলেশন

Three.js ইন্সটল করার দুটি প্রধান পদ্ধতি রয়েছে:

CDN এর মাধ্যমে।
npm এর মাধ্যমে।

নিচে উভয় পদ্ধতির বিস্তারিত আলোচনা করা হলো।

১. CDN ব্যবহার করে Three.js ইন্সটলেশন

CDN (Content Delivery Network) ব্যবহার করে Three.js ইনস্টল করা একটি সহজ এবং দ্রুত উপায়। এতে আপনাকে কোন ফাইল ডাউনলোড বা লোকালি ইন্সটল করার প্রয়োজন হয় না। শুধু একটি স্ক্রিপ্ট ট্যাগ দিয়ে ব্রাউজারে লাইব্রেরিটি লোড করা হয়।

CDN এর মাধ্যমে Three.js ইন্সটল করা:

প্রথমে, আপনার 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 Example</title>
  <!-- Add Three.js CDN -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script>
</head>
<body>
  <script>
    // Your Three.js code goes here
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

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

    animate();
  </script>
</body>
</html>

এখানে, <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script> লাইনটি Three.js লাইব্রেরি লোড করার জন্য ব্যবহৃত হয়। আপনি এখানে CDN ভার্সন 0.142.0 ব্যবহার করছেন, তবে আপনি অন্য ভার্সনও ব্যবহার করতে পারেন।

২. npm ব্যবহার করে Three.js ইন্সটলেশন

npm (Node Package Manager) ব্যবহার করে Three.js ইন্সটল করা হয় যদি আপনি একটি Node.js প্রোজেক্টে Three.js ব্যবহার করতে চান। এটি তখন কার্যকরী হবে যখন আপনি টুলস, কম্পাইলেশন, এবং প্যাকেজিং করার জন্য Webpack, Parcel, বা Vite ব্যবহার করবেন।

npm এর মাধ্যমে Three.js ইন্সটল করা:

Node.js এবং npm ইন্সটল করা আছে কি না, তা নিশ্চিত করুন। আপনি node -v এবং npm -v কমান্ড দিয়ে এটি চেক করতে পারেন।
আপনার প্রোজেক্ট ডিরেক্টরিতে যান এবং npm ইন্সটল করুন:

mkdir my-threejs-project
cd my-threejs-project
npm init -y

এরপর Three.js প্যাকেজটি ইন্সটল করুন:

npm install three

ইনস্টলেশনের পর, আপনি আপনার JavaScript কোডে Three.js ইম্পোর্ট করতে পারবেন:

import * as THREE from 'three';

// Your Three.js code goes here
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

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

animate();

এখানে, import * as THREE from 'three' ব্যবহার করে আপনি Three.js এর সমস্ত ফিচার এবং মডিউলকে ইম্পোর্ট করছেন। আপনার বিল্ডিং টুলস (যেমন Webpack বা Vite) সঠিকভাবে কনফিগার করতে হবে যাতে আপনি ES6 মডিউল ব্যবহার করতে পারেন।

সারাংশ

Three.js লাইব্রেরি ওয়েব ব্রাউজারে 3D গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। আপনি CDN বা npm ব্যবহারের মাধ্যমে Three.js ইন্সটল করতে পারেন, যেটি আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী নির্বাচিত করা যেতে পারে। CDN ব্যবহার করা সহজ এবং দ্রুত উপায়, বিশেষত ছোট প্রোজেক্টের জন্য, যেখানে আপনি ফাইলগুলোকে সরাসরি লোড করতে চান। অপরদিকে, npm ব্যবহার করা হয় যখন আপনার প্রোজেক্টের বড় স্কেল থাকে এবং আপনি মডিউলার সিস্টেম বা বিল্ড টুলস ব্যবহার করতে চান।

এখন আপনি Three.js ব্যবহার করে ওয়েব ব্রাউজারে শক্তিশালী 3D গ্রাফিক্স তৈরি করতে প্রস্তুত!

Content added By

Md Zahid Hasan

প্রথম Three.js প্রজেক্ট তৈরি করা

424

Three.js কি?

Three.js হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে সাহায্য করে। এটি WebGL-এর উপরে একটি এপিআই (API) তৈরি করেছে, যা ব্রাউজারে 3D গ্রাফিক্স রেন্ডারিং সহজ এবং অ্যাক্সেসযোগ্য করে তোলে। Three.js-এর মাধ্যমে আপনি ত্রি-মাত্রিক মডেল, দৃশ্য, ক্যামেরা, আলো, এবং আরও অনেক কিছু তৈরি করতে পারেন এবং সেগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারেন।

কেন Three.js ব্যবহার করবেন?

Three.js ব্যবহার করার কিছু প্রধান কারণ হলো:

সহজ এবং দ্রুত 3D গ্রাফিক্স তৈরির জন্য: Three.js একটি খুবই শক্তিশালী 3D লাইব্রেরি, যা সহজেই 3D গ্রাফিক্স তৈরি এবং কাস্টমাইজ করতে সাহায্য করে।
WebGL এর উপর ভিত্তি করে কাজ করে: Three.js WebGL কে সরল এবং সহজে ব্যবহারযোগ্য করে তোলে, যা সাধারণত জটিল এবং সময়সাপেক্ষ হতে পারে।
বিভিন্ন 3D মডেলিং ফরম্যাট সমর্থন করে: Three.js অনেক ধরনের 3D ফাইল ফরম্যাট যেমন OBJ, GLTF, FBX ইত্যাদি সমর্থন করে।

এখন চলুন, Three.js ব্যবহার করে একটি সাধারণ 3D প্রজেক্ট তৈরি করা শিখি।

প্রথম Three.js প্রজেক্ট তৈরি করা

ধাপ ১: Three.js ইনস্টল করা

প্রথমে, Three.js লাইব্রেরি আপনার প্রজেক্টে যোগ করতে হবে। আপনি CDN অথবা NPM প্যাকেজ ম্যানেজার ব্যবহার করে এটি ইনস্টল করতে পারেন।

CDN ব্যবহারের মাধ্যমে:

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

এটি আপনার HTML ফাইলে <head> ট্যাগে যোগ করুন।

NPM ব্যবহারের মাধ্যমে:

npm install three

যদি আপনি Node.js প্রকল্পে কাজ করেন, তাহলে npm বা yarn ব্যবহার করে Three.js ইনস্টল করুন।

ধাপ ২: একটি HTML ফাইল তৈরি করা

এখন, আপনি একটি HTML ফাইল তৈরি করবেন যেখানে আপনার 3D দৃশ্য রেন্ডার করা হবে।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Three.js Project</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
  <script>
    // Three.js কোড এখানে থাকবে
  </script>
</body>
</html>

ধাপ ৩: প্রথম 3D দৃশ্য তৈরি করা

এখন আমরা 3D সীন তৈরি করব, যা একটি কিউব (Cube) প্রদর্শন করবে। আমাদের কিছু প্রধান উপাদান দরকার:

Scene: 3D অবজেক্ট রাখার জন্য একটি কন্টেইনার।
Camera: দৃশ্য দেখতে একটি ক্যামেরা।
Renderer: 3D দৃশ্য রেন্ডার করতে একটি রেন্ডারার।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Three.js Project</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
  <script>
    // Step 1: Scene, Camera, and Renderer Setup

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

    // Create a camera
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // Create a WebGLRenderer
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement); // Add the renderer to the DOM

    // Step 2: Create a Cube

    // Create a geometry (cube) and material
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

    // Combine geometry and material to create a cube
    const cube = new THREE.Mesh(geometry, material);

    // Add the cube to the scene
    scene.add(cube);

    // Step 3: Position the camera
    camera.position.z = 5;

    // Step 4: Create an animation loop
    function animate() {
      requestAnimationFrame(animate); // Call animate again for the next frame

      // Rotate the cube to make it spin
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      // Render the scene with the camera
      renderer.render(scene, camera);
    }

    animate(); // Start the animation loop
  </script>
</body>
</html>

এখানে, একটি cube তৈরি করা হয়েছে এবং animate() ফাংশনের মাধ্যমে এটি ঘোরানো হচ্ছে। WebGLRenderer ব্যবহার করে 3D দৃশ্যটি রেন্ডার করা হচ্ছে।

ধাপ ৪: ব্রাউজারে প্রজেক্ট দেখুন

এখন, আপনার HTML ফাইলটি ব্রাউজারে ওপেন করুন এবং আপনি একটি ঘোরানো 3D কিউব দেখতে পাবেন।

Three.js এর সাথে আরও কি করতে পারেন?

Lights and Shadows: আলোর ব্যবহার এবং শ্যাডো প্রভাব যোগ করা।
Textures and Materials: টেক্সচার এবং ম্যাটেরিয়াল ব্যবহার করে দৃশ্য আরও সুন্দর করা।
3D Models: FBX, GLTF, OBJ ফরম্যাটের 3D মডেল ইমপোর্ট করা।
Camera Controls: ক্যামেরার জন্য ব্যবহারকারী নিয়ন্ত্রণ (OrbitControls) যোগ করা।
Animation: 3D অবজেক্টের অ্যানিমেশন তৈরি করা।

সারাংশ

এটি ছিল আপনার প্রথম Three.js প্রজেক্ট তৈরি করার একটি সহজ উদাহরণ। Three.js ব্যবহার করে আপনি খুব সহজে 3D গ্রাফিক্স তৈরি করতে পারেন এবং ওয়েব পেজে ইন্টারেক্টিভ 3D দৃশ্য যোগ করতে পারেন। প্রাথমিক পর্যায়ে, আপনি একটি 3D কিউব তৈরি করেছেন এবং এটি ঘোরানো দেখেছেন। পরবর্তী ধাপে আপনি আরো উন্নত কনসেপ্ট যেমন আলোর ব্যবহার, শ্যাডো, টেক্সচার, 3D মডেলিং এবং ক্যামেরা নিয়ন্ত্রণ শিখতে পারেন।

Content added By

Md Zahid Hasan

Three.js এর ফোল্ডার এবং ফাইল স্ট্রাকচার

354

Three.js এর পরিচিতি

Three.js হল একটি জনপ্রিয় এবং শক্তিশালী 3D জাভাস্ক্রিপ্ট লাইব্রেরি যা WebGL এর উপর ভিত্তি করে তৈরি। এটি ডেভেলপারদের ব্রাউজারে 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করার জন্য একটি সহজ এবং কার্যকরী উপায় প্রদান করে। Three.js এর সাহায্যে আপনি খুব সহজেই 3D দৃশ্য (scene), ক্যামেরা (camera), লাইটিং (lighting), এবং গ্রাফিক্স রেন্ডারিং (rendering) করতে পারেন। এটি ইউজার ইন্টারঅ্যাকশন, এনিমেশন এবং 3D মডেল ইমপোর্ট/এক্সপোর্ট করার জন্য বেশ কার্যকর।

Three.js এর একটি প্রধান সুবিধা হল এটি WebGL কে সরল এবং ব্যবহারকারী-বান্ধব API দিয়ে আবৃত করে, যার ফলে 3D গ্রাফিক্স ডেভেলপমেন্ট আরও সহজ হয়ে ওঠে। এক্ষেত্রে, থ্রি.জেএস প্যাকেজের স্ট্রাকচার বুঝে তা সঠিকভাবে ব্যবহার করা গুরুত্বপূর্ণ।

Three.js এর ফোল্ডার এবং ফাইল স্ট্রাকচার

Three.js এর একটি সাধারণ প্রোজেক্ট ফোল্ডার এবং ফাইল স্ট্রাকচার কিছুটা এই রকম হতে পারে:

my-threejs-project/
│
├── index.html             # প্রজেক্টের প্রধান HTML ফাইল
├── src/                   # সোর্স কোড
│   ├── app.js             # অ্যাপ্লিকেশন লজিকের ফাইল
│   ├── scene.js           # 3D scene, camera, light এবং objects সেটআপ
│   └── utils.js           # সহায়ক ইউটিলিটি ফাংশন (যেমন math, calculations)
│
├── assets/                # মিডিয়া ফাইলের জন্য ফোল্ডার (মডেল, টেক্সচার, ইমেজ, অডিও)
│   ├── textures/          # টেক্সচার ফাইল
│   └── models/            # 3D মডেল ফাইল (যেমন .obj, .glb)
│
├── libs/                  # বাহ্যিক লাইব্রেরি এবং প্যাকেজ
│   └── three.min.js       # Three.js লাইব্রেরি
│
├── styles/                # CSS ফাইল এবং স্টাইলশিট
│   └── style.css          # ওয়েবসাইটের জন্য মূল স্টাইল
│
├── dist/                  # বিল্ট (build) ফাইলের জন্য ফোল্ডার
│   └── bundle.js          # ওয়েবপ্যাক বা অন্য বিল্ড টুল দ্বারা বানানো জাভাস্ক্রিপ্ট ফাইল
│
└── package.json           # npm প্যাকেজ ম্যানেজমেন্ট ফাইল

Three.js প্রোজেক্টের প্রধান ফোল্ডার এবং ফাইল

index.html:
এই ফাইলটি ওয়েব পেজের মূল HTML ফাইল, যেখানে আপনার Three.js স্লটগুলো লোড হয়। সাধারণত এখানে স্ট্যাটিক HTML, CSS এবং জাভাস্ক্রিপ্ট লিংক করা থাকে।
src/:
এই ফোল্ডারে সোর্স কোড থাকে। এর মধ্যে সাধারণত থাকে:
- app.js: এটি আপনার প্রোজেক্টের লজিক এবং ফাংশনালিটি ধারণ করে। এখানে সাধারণত 3D সাউন্ড, এনিমেশন, ইউজার ইন্টারঅ্যাকশন (যেমন কী-বোর্ড/মাউস ইভেন্টস) পরিচালনা করা হয়।
- scene.js: এই ফাইলটি 3D scene, ক্যামেরা, এবং লাইট সেটআপ করার জন্য ব্যবহৃত হয়।
- utils.js: এই ফাইলে সহায়ক ফাংশনগুলি থাকে, যেমন গণনা, গণনা ফাংশন এবং অন্যান্য ইউটিলিটি কোড।
assets/:
এই ফোল্ডারে মিডিয়া ফাইল যেমন টেক্সচার, 3D মডেল এবং অন্যান্য ফাইল রাখা হয়।
- textures/: বিভিন্ন ধরনের টেক্সচার ফাইল যেমন .jpg, .png, .tiff ইত্যাদি।
- models/: 3D মডেল ফাইল যেমন .obj, .glb, .fbx ইত্যাদি।
libs/:
এই ফোল্ডারে বাহ্যিক লাইব্রেরি এবং প্যাকেজ রাখা হয়। এখানে সাধারণত থ্রি.জেএস লাইব্রেরি three.min.js থাকে, কিন্তু আপনি প্রয়োজন অনুসারে অন্য লাইব্রেরিও এখানে রাখতে পারেন।
styles/:
এই ফোল্ডারে সিএসএস ফাইলগুলি থাকে, যা আপনার ওয়েবপেজের স্টাইল নিয়ন্ত্রণ করে। এই ফোল্ডারে style.css ফাইল থাকে যেখানে থ্রি.জেএস প্রোজেক্টের স্টাইল এবং লেআউট কন্ট্রোল করা হয়।
dist/:
এই ফোল্ডারে আপনার প্রোজেক্টের বিল্ট ফাইল রাখা হয়। যেমন, ওয়েবপ্যাক বা অন্যান্য বিল্ড টুল ব্যবহার করে বানানো bundle.js ফাইল থাকে এখানে।
package.json:
এটি একটি গুরুত্বপূর্ণ ফাইল যা NPM প্যাকেজ ম্যানেজারের মাধ্যমে নির্ধারণ করে যে কোন ডিপেনডেন্সি বা লাইব্রেরি প্রোজেক্টে ব্যবহার করা হচ্ছে এবং অন্যান্য প্রজেক্ট কনফিগারেশন বিষয়ক তথ্য ধারণ করে।

Three.js প্রোজেক্ট ফোল্ডার স্ট্রাকচারের ব্যাখ্যা

index.html ফাইলে, সাধারণত ব্রাউজারে তিনটি মৌলিক উপাদান লোড করা হয়:
- Three.js লাইব্রেরি: আপনার প্রোজেক্টে 3D গ্রাফিক্স রেন্ডারিং সক্ষম করতে হবে।
- CSS ফাইল: ওয়েব পেজের ডিজাইন এবং স্টাইলিং।
- JavaScript ফাইল: এটি আপনার স্যুট অ্যাপ্লিকেশন লজিক যেমন ক্যামেরা, 3D দৃশ্য এবং লাইট সিস্টেম পরিচালনা করবে।
src/scene.js:
এই ফাইলটি থ্রি.জেএস-এ 3D অবজেক্ট এবং লাইট সিস্টেমের জন্য ব্যবহৃত হয়। এখানে আপনি 3D অ্যানিমেশন এবং রেন্ডারিং কনফিগারেশন করতে পারেন।
assets/ ফোল্ডারের মধ্যে মিডিয়া ফাইল যেমন টেক্সচার এবং 3D মডেল রাখা হয়, যেগুলো রেন্ডারিং এবং গ্রাফিক্সের জন্য প্রয়োজন।
libs/ ফোল্ডারে আপনার প্রোজেক্টে ব্যবহার করা অন্যান্য লাইব্রেরি যেমন dat.GUI, GLTFLoader বা অন্য কোন থার্ড-পার্টি লাইব্রেরি রাখা হতে পারে।

Three.js এর ডিরেক্টরি স্ট্রাকচার ব্যবহার করার সুবিধা

সংগঠিত কোড: থ্রি.জেএস প্রোজেক্টের ফোল্ডার এবং ফাইল স্ট্রাকচার ব্যবস্থাপনার মাধ্যমে কোড আরও সুসংগঠিত হয়, যেটি ডেভেলপারদের মধ্যে সহযোগিতা এবং কোড রিভিউ সহজ করে তোলে।
স্কেলেবিলিটি: প্রোজেক্টটি বড় হলে, ফাইল স্ট্রাকচার সহজে স্কেল করা যায় এবং নতুন ফিচার বা ফাইল যোগ করা সহজ হয়।
সহজ ব্যবস্থাপনা: মিডিয়া ফাইল, স্ক্রিপ্ট, লাইব্রেরি এবং স্টাইল আলাদা আলাদা ফোল্ডারে রাখা হলে প্রকল্পের বিভিন্ন অংশ নিয়ন্ত্রণ করা সহজ হয়।

সারাংশ

Three.js এর ফোল্ডার এবং ফাইল স্ট্রাকচার আপনাকে আপনার 3D প্রোজেক্টের কোড আরও সুসংগঠিত এবং রক্ষণাবেক্ষণযোগ্য রাখতে সহায়তা করে। এই স্ট্রাকচারের মধ্যে আপনি assets/, src/, libs/, styles/, dist/ ফোল্ডার ব্যবহার করে আপনার প্রোজেক্টে থাকা সবকিছুকে সঠিকভাবে শ্রেণীবদ্ধ করতে পারেন, যা কোড ডেভেলপমেন্টের গতি বাড়ায় এবং ভবিষ্যতে কোনো পরিবর্তন করা সহজ করে তোলে।

Content added By

Md Zahid Hasan

Three.js পরিচিতি Three.js এর বেসিক ধারণা Geometries এবং Materials Lights এবং Shadows Camera এর প্রকারভেদ এবং নিয়ন্ত্রণ

Three.js সেটআপ এবং ইনস্টলেশন

Three.js কি?

Three.js ইনস্টলেশন

১. CDN (Content Delivery Network) এর মাধ্যমে ইনস্টলেশন

উদাহরণ:

২. npm এর মাধ্যমে ইনস্টলেশন

প্রক্রিয়া:

৩. Yarn এর মাধ্যমে ইনস্টলেশন

৪. ব্যাসিক 3D দৃশ্য তৈরি করা

Example:

সারাংশ

Three.js এর জন্য পরিবেশ প্রস্তুত করা

Three.js কী?

কেন Three.js ব্যবহার করবেন?

Three.js এর জন্য পরিবেশ প্রস্তুত করা

১. Node.js এবং NPM ইনস্টল করা

২. Three.js ইনস্টল করা

NPM ব্যবহার করে Three.js ইনস্টল করা:

CDN এর মাধ্যমে Three.js ইনস্টল করা:

৩. প্রোজেক্টের ফাইল স্ট্রাকচার তৈরি করা

৪. প্রথম 3D স্যিন তৈরি করা

৫. Live Server চালানো

সারাংশ

CDN এবং npm ব্যবহার করে Three.js ইন্সটলেশন

Three.js কি?

Three.js ইন্সটলেশন

১. CDN ব্যবহার করে Three.js ইন্সটলেশন

CDN এর মাধ্যমে Three.js ইন্সটল করা:

২. npm ব্যবহার করে Three.js ইন্সটলেশন

npm এর মাধ্যমে Three.js ইন্সটল করা:

সারাংশ

প্রথম Three.js প্রজেক্ট তৈরি করা

Three.js কি?

কেন Three.js ব্যবহার করবেন?

প্রথম Three.js প্রজেক্ট তৈরি করা

ধাপ ১: Three.js ইনস্টল করা

ধাপ ২: একটি HTML ফাইল তৈরি করা

ধাপ ৩: প্রথম 3D দৃশ্য তৈরি করা

ধাপ ৪: ব্রাউজারে প্রজেক্ট দেখুন

Three.js এর সাথে আরও কি করতে পারেন?

সারাংশ

Three.js এর ফোল্ডার এবং ফাইল স্ট্রাকচার

Three.js এর পরিচিতি

Three.js এর ফোল্ডার এবং ফাইল স্ট্রাকচার

Three.js প্রোজেক্টের প্রধান ফোল্ডার এবং ফাইল

Three.js প্রোজেক্ট ফোল্ডার স্ট্রাকচারের ব্যাখ্যা

Three.js এর ডিরেক্টরি স্ট্রাকচার ব্যবহার করার সুবিধা

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!