Three.js এবং 3D Text
Three.js হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা WebGL এর উপর ভিত্তি করে 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি সহজভাবে 3D কন্টেন্ট ওয়েব পৃষ্ঠায় প্রদর্শন করতে সহায়তা করে এবং ব্যবহারকারীদের ইন্টারঅ্যাক্টিভ এবং ডাইনামিক 3D পরিবেশ প্রদান করে। Three.js ব্যবহার করে আপনি 3D মডেল, লাইট, ক্যামেরা, ম্যাটেরিয়াল, টেক্সচার, এবং 3D টেক্সট তৈরি করতে পারেন।
3D Text ওয়েব পেজে যুক্ত করা একটি আকর্ষণীয় উপায় যা আপনার অ্যাপ্লিকেশন বা ওয়েবসাইটের ইন্টারফেসকে আরও আকর্ষণীয় ও ইন্টারঅ্যাক্টিভ করে তোলে। Three.js এর সাহায্যে আপনি 3D টেক্সট এবং ফন্টগুলোকে সহজভাবে কাস্টমাইজ করতে পারেন, যেমন তাদের আকার, রঙ, মেটালিক লুক, লাইটিং ইত্যাদি।
3D Text তৈরি করার জন্য Three.js সেটআপ
থ্রি.জেএস-এ 3D টেক্সট তৈরি করতে, আপনাকে প্রথমে একটি FontLoader ব্যবহার করে একটি ফন্ট লোড করতে হবে এবং তারপর সেই ফন্ট ব্যবহার করে 3D টেক্সট তৈরি করতে হবে।
১. Three.js ফন্ট লোডার সেটআপ
প্রথমে, আপনি FontLoader ব্যবহার করে একটি ফন্ট লোড করবেন এবং তারপর তা TextGeometry এ ব্যবহার করবেন।
প্রথমে, Three.js ইনস্টল করুন (যদি না করে থাকেন):
npm install three
২. 3D টেক্সট তৈরি করার কোড উদাহরণ
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);
// Font loader setup
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function (font) {
// 3D Text Geometry
const textGeometry = new THREE.TextGeometry('Hello, 3D World!', {
font: font,
size: 10,
height: 2,
});
// 3D Text Material
const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// Create 3D Text Mesh
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
scene.add(textMesh);
// Positioning the text
textMesh.position.set(-30, 0, 0);
// Rendering setup
camera.position.z = 50;
function animate() {
requestAnimationFrame(animate);
textMesh.rotation.x += 0.01;
textMesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
});
কোড ব্যাখ্যা:
- FontLoader: এই লোডারের সাহায্যে আপনি একটি ফন্ট ফাইল লোড করতে পারেন (এখানে আমরা
helvetiker_regular.typeface.jsonফন্ট ব্যবহার করেছি)। - TextGeometry: এটি একটি জিওমেট্রি তৈরি করে যা 3D টেক্সট তৈরি করে। এর সাথে আপনি ফন্ট, সাইজ এবং হাইট কনফিগার করতে পারেন।
- MeshBasicMaterial: এটি 3D টেক্সটের জন্য রঙ এবং অন্যান্য বৈশিষ্ট্য নির্ধারণ করে।
- Mesh: এটি জিওমেট্রি এবং মেটিরিয়াল একত্রিত করে একটি বাস্তব 3D অবজেক্ট তৈরি করে, যা আপনি দৃশ্য (scene) তে যোগ করতে পারেন।
৩. 3D টেক্সটের কাস্টমাইজেশন
আপনি 3D টেক্সটের বৈশিষ্ট্য কাস্টমাইজ করতে পারবেন বিভিন্ন প্যারামিটার ব্যবহার করে যেমন:
- Size: টেক্সটের আকার।
- Height: টেক্সটের ডেপথ বা পুরুত্ব।
- CurveSegments: টেক্সটের কোণার স্নিগ্ধতা।
- BevelEnabled: টেক্সটের কোণ মসৃণ করার জন্য bevel ব্যবহার করা।
- BevelThickness: bevel এর গাঢ়তা কাস্টমাইজ করা।
কাস্টমাইজড 3D টেক্সট উদাহরণ:
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function (font) {
// কাস্টমাইজড 3D টেক্সট
const textGeometry = new THREE.TextGeometry('Customized Text!', {
font: font,
size: 8,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 2,
bevelSize: 0.5,
});
const textMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
scene.add(textMesh);
// Camera adjustment
textMesh.position.set(-40, 10, 0);
camera.position.z = 100;
const animate = function () {
requestAnimationFrame(animate);
textMesh.rotation.x += 0.01;
textMesh.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
});
এখানে, bevelEnabled এবং bevelThickness সহ অন্যান্য প্যারামিটার ব্যবহার করে টেক্সটের প্রোফাইল পরিবর্তন করা হয়েছে।
৪. 3D Font লোডিং এবং অন্যান্য ফন্ট ফাইল
Three.js-এ আপনি বিভিন্ন ধরনের .json ফন্ট ফাইল ব্যবহার করতে পারেন। আপনি এই ফন্ট ফাইলগুলিকে FontLoader এর মাধ্যমে লোড করতে পারেন। কিছু সাধারণ 3D ফন্ট ফাইলের উৎস:
- Three.js Example Fonts: Three.js Fonts
- Google Fonts: আপনি Google Fonts থেকেও
.jsonফন্ট ফাইল ডাউনলোড করতে পারেন এবং Typefaces ব্যবহার করতে পারেন।
৫. 3D টেক্সটের লাইটিং এবং শেডিং
3D টেক্সটের উপর আপনি lighting এবং shading প্রয়োগ করে আরও বাস্তবসম্মত ইফেক্ট তৈরি করতে পারেন।
// Lighting setup
const light = new THREE.PointLight(0xFFFFFF);
light.position.set(10, 10, 10);
scene.add(light);
// Material for realistic effects
const textMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 50 });
এখানে, PointLight এবং MeshPhongMaterial ব্যবহার করে 3D টেক্সটের উপর শেডিং এবং রিফ্লেকশন প্রভাব যুক্ত করা হয়েছে।
সারাংশ
Three.js ব্যবহার করে আপনি 3D টেক্সট তৈরি এবং কাস্টমাইজ করতে পারেন। FontLoader এবং TextGeometry এর মাধ্যমে 3D টেক্সট তৈরি এবং সেটি কাস্টমাইজ করা যায়। আপনি টেক্সটের আকার, রঙ, bevel, সাইজ ইত্যাদি পরিবর্তন করতে পারবেন। এছাড়াও, lighting এবং shading ব্যবহার করে টেক্সটের বাস্তবসম্মত দৃশ্য তৈরি করা সম্ভব। Three.js ব্যবহার করে 3D টেক্সট এবং ফন্টসকে ওয়েব পেজে ইন্টারঅ্যাক্টিভভাবে যুক্ত করা যেতে পারে, যা ইউজার এক্সপেরিয়েন্স উন্নত করতে সহায়তা করে।
Read more
