Three.js এবং Pre-built Geometries
Three.js হল একটি শক্তিশালী এবং জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব ব্রাউজারে 3D গ্রাফিক্স প্রদর্শন করতে সহায়তা করে। এটি WebGL-এর উপর ভিত্তি করে কাজ করে, যা ব্রাউজারে 3D গ্রাফিক্স রেন্ডারিংয়ের জন্য ব্যবহৃত হয়। Three.js-এর মাধ্যমে আপনি 3D অবজেক্ট তৈরি, মডেলিং, অ্যানিমেশন এবং ইন্টারেকটিভ অভিজ্ঞতা তৈরি করতে পারেন।
Pre-built Geometries হল এমন 3D অবজেক্ট যা Three.js সরবরাহ করে, এবং আপনি সহজেই এগুলি ব্যবহার করে জটিল 3D মডেল তৈরি করতে পারেন। Three.js বেশ কিছু সাধারণ geometries (যেমন Box, Sphere, Cone, Cylinder) সরবরাহ করে, যেগুলি দিয়ে আপনি সহজে 3D অবজেক্ট তৈরি করতে পারেন।
এই গাইডে, আমরা Pre-built Geometries (Box, Sphere, Cone, Cylinder) তৈরি করার উপায় দেখব।
১. Box Geometry
Box Geometry একটি সাধারণ সবার পরিচিত অবজেক্ট, যা একটি বাক্স বা কিউব তৈরি করে। এটি চারটি মাত্রা (width, height, depth) ব্যবহার করে একটি 3D বাক্স তৈরি করতে সাহায্য করে।
উদাহরণ:
// সিন প্লেন সেটআপ করা
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);
// BoxGeometry তৈরি করা
const geometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1 বাক্স
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();
এখানে, BoxGeometry ব্যবহার করে একটি সোজা বাক্স তৈরি করা হয়েছে, যা রোটেট হচ্ছে।
২. Sphere Geometry
Sphere Geometry একটি গোলাকার অবজেক্ট তৈরি করতে ব্যবহৃত হয়। এটি দুটি আর্গুমেন্ট (radius এবং width/height segments) গ্রহণ করে, যা গোলকের আকার এবং বিস্তারিত নির্ধারণ করে।
উদাহরণ:
// সিন প্লেন সেটআপ করা
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);
// SphereGeometry তৈরি করা
const geometry = new THREE.SphereGeometry(1, 32, 32); // গোলাকার অবজেক্ট, radius 1, 32 segments
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // ব্লু রঙের মেটিরিয়াল
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// ক্যামেরার অবস্থান
camera.position.z = 5;
// রেন্ডারিং এবং অ্যানিমেশন
function animate() {
requestAnimationFrame(animate);
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
এখানে, SphereGeometry দিয়ে একটি গোলাকার অবজেক্ট তৈরি করা হয়েছে, যা রোটেট হচ্ছে।
৩. Cone Geometry
Cone Geometry একটি শঙ্কু আকৃতির অবজেক্ট তৈরি করতে ব্যবহৃত হয়। এটি radius, height, এবং radialSegments এর মতো আর্গুমেন্ট নেয়।
উদাহরণ:
// সিন প্লেন সেটআপ করা
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);
// ConeGeometry তৈরি করা
const geometry = new THREE.ConeGeometry(1, 2, 32); // শঙ্কু, radius 1, height 2, 32 segments
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // রেড রঙের মেটিরিয়াল
const cone = new THREE.Mesh(geometry, material);
scene.add(cone);
// ক্যামেরার অবস্থান
camera.position.z = 5;
// রেন্ডারিং এবং অ্যানিমেশন
function animate() {
requestAnimationFrame(animate);
cone.rotation.x += 0.01;
cone.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
এখানে, ConeGeometry ব্যবহার করে একটি শঙ্কু তৈরি করা হয়েছে এবং সেটি রোটেট হচ্ছে।
৪. Cylinder Geometry
Cylinder Geometry একটি সিলিন্ডার আকৃতির অবজেক্ট তৈরি করতে ব্যবহৃত হয়। এটি radiusTop, radiusBottom, height, এবং radialSegments আর্গুমেন্ট নেয়।
উদাহরণ:
// সিন প্লেন সেটআপ করা
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);
// CylinderGeometry তৈরি করা
const geometry = new THREE.CylinderGeometry(1, 1, 2, 32); // সিলিন্ডার, radius 1, height 2, 32 segments
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // ইয়েলো রঙের মেটিরিয়াল
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);
// ক্যামেরার অবস্থান
camera.position.z = 5;
// রেন্ডারিং এবং অ্যানিমেশন
function animate() {
requestAnimationFrame(animate);
cylinder.rotation.x += 0.01;
cylinder.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
এখানে, CylinderGeometry দিয়ে একটি সিলিন্ডার তৈরি করা হয়েছে, যা রোটেট হচ্ছে।
সারাংশ
Three.js এর Pre-built Geometries (Box, Sphere, Cone, Cylinder) হল এমন টুলস যা আপনাকে সহজে 3D অবজেক্ট তৈরি করতে সহায়তা করে। আপনি সহজে এই Geometries ব্যবহার করে বিভিন্ন 3D শেপ তৈরি করতে পারেন এবং সেগুলির উপর অ্যানিমেশন, রোটেশন, এবং অন্যান্য ইন্টারেকটিভ অপারেশন প্রয়োগ করতে পারেন। Three.js আপনার ওয়েব অ্যাপ্লিকেশনকে 3D গ্রাফিক্সের মাধ্যমে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
Read more
