BabylonJS ব্যবহার করে প্রথম 3D অবজেক্ট তৈরি করার জন্য, আমরা দুটি সাধারণ অবজেক্ট—Sphere (গোলক) এবং Cube (বক্স)—তৈরি করব। এদের মাধ্যমে আপনি 3D মডেল তৈরি এবং প্রদর্শন করার প্রক্রিয়া শিখতে পারবেন।
১. প্রজেক্ট ফোল্ডার তৈরি
প্রথমে, আপনার একটি নতুন প্রজেক্ট ফোল্ডার তৈরি করুন এবং সেখানে একটি index.html ফাইল তৈরি করুন।
২. HTML ফাইল তৈরি
নিচে একটি সিম্পল HTML কোড দেওয়া হলো, যা BabylonJS দিয়ে একটি Sphere এবং একটি Cube তৈরি করবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS - 3D Objects</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);
// BabylonJS দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি করা (ব্যবহারকারীকে দৃশ্য ঘুরিয়ে দেখানোর জন্য)
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস তৈরি করা
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// গোলক (Sphere) তৈরি করা
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
sphere.position.x = -3; // গোলকটিকে X-axis এ সরে নিয়ে আসা
// বক্স (Cube) তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.x = 3; // বক্সটিকে X-axis এ সরে নিয়ে আসা
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে, BabylonJS আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- Canvas এবং Engine: প্রথমে আমরা একটি
<canvas>ট্যাগ ব্যবহার করে BabylonJS-এর জন্য রেন্ডারিং ক্যানভাস তৈরি করেছি। তারপরBABYLON.Engineব্যবহার করে রেন্ডারিং ইঞ্জিন তৈরি করা হয়েছে। - Scene:
BABYLON.Sceneতৈরি করা হয়েছে যেখানে সব 3D অবজেক্ট এবং ক্যামেরা থাকবে। - Camera:
ArcRotateCameraক্যামেরা ব্যবহার করা হয়েছে, যা ব্যবহারকারীকে 3D দৃশ্য ঘুরিয়ে দেখতে সাহায্য করবে। - Light:
HemisphericLightব্যবহার করা হয়েছে, যা দৃশ্যে সাধারণ আলো যোগ করে। এটি একটি হালকা পরিবেশ সৃষ্টি করে। - Sphere (গোলক):
BABYLON.MeshBuilder.CreateSphereব্যবহার করে একটি গোলক তৈরি করা হয়েছে। গোলকটির ব্যাসার্ধ ২ নির্ধারণ করা হয়েছে এবং এটিকে X-অ্যাক্সিসে কিছুটা সরে দেওয়া হয়েছে যাতে এটি দৃশ্যে দৃশ্যমান হয়। - Box (বক্স):
BABYLON.MeshBuilder.CreateBoxব্যবহার করে একটি বক্স তৈরি করা হয়েছে। বক্সটিকেও X-অ্যাক্সিসে কিছুটা সরে দেওয়া হয়েছে যাতে গোলক ও বক্স একে অপরের কাছে থাকে, কিন্তু তারা একে অপরের ওপর নেই। - Render Loop:
engine.runRenderLoopদিয়ে দৃশ্যটি রেন্ডার করা হচ্ছে এবং প্রতি ফ্রেমে দৃশ্যটি আপডেট হবে। - Resize Event: ব্রাউজারের আকার পরিবর্তন হলে দৃশ্যটি ঠিকমতো রিসাইজ করার জন্য
engine.resize()ব্যবহার করা হয়েছে।
৩. ব্রাউজারে প্রজেক্ট পরীক্ষা করা
এখন আপনি আপনার index.html ফাইলটি ওয়েব ব্রাউজারে খুলুন। আপনি একটি গোলক (Sphere) এবং একটি বক্স (Cube) দেখতে পাবেন, এবং আপনি মাউস দিয়ে এগুলি ঘুরিয়ে দেখতে পারবেন।
অতিরিক্ত বৈশিষ্ট্য যোগ করা
আপনার প্রথম 3D অবজেক্টে আরও বৈশিষ্ট্য যোগ করতে পারেন:
১. অ্যানিমেশন:
আপনি গোলক বা বক্সের জন্য অ্যানিমেশন যোগ করতে পারেন, যেমন রোটেশন বা মুভমেন্ট।
// গোলকটির রোটেশন অ্যানিমেশন
scene.registerBeforeRender(function () {
sphere.rotation.y += 0.01;
});
২. টেক্সচার যোগ করা:
গোলক বা বক্সে টেক্সচার যোগ করলে তা আরও বাস্তবসম্মত দেখাবে। নিচের কোড দিয়ে একটি টেক্সচার যোগ করা যেতে পারে:
var texture = new BABYLON.Texture("https://www.babylonjs.com/assets/textures/wood.jpg", scene);
sphere.material = new BABYLON.StandardMaterial("sphereMaterial", scene);
sphere.material.diffuseTexture = texture;
৩. ব্যাকগ্রাউন্ড যোগ করা:
দৃশ্যে একটি ব্যাকগ্রাউন্ড যোগ করতে পারেন:
scene.clearColor = new BABYLON.Color4(0.8, 0.8, 1, 1); // আকাশি রং
সারাংশ
এটি ছিল আপনার প্রথম BabylonJS প্রজেক্ট, যেখানে আমরা দুটি সাধারণ 3D অবজেক্ট—Sphere (গোলক) এবং Box (বক্স)—তৈরি করেছি। আপনি এই কোডের মাধ্যমে বুঝতে পারলেন কিভাবে BabylonJS ব্যবহার করে 3D মডেল তৈরি এবং রেন্ডার করা যায়। এই বেসিক ধারণার মাধ্যমে আপনি আরও জটিল 3D সেন্টার এবং গেম ডেভেলপমেন্টে এগিয়ে যেতে পারবেন।
Read more
