Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।
Three.js ব্যবহার করে বেশিরভাগ 3D ওয়েব অভিজ্ঞতা তৈরি করা যায়, এবং এটি কোড করার জন্য আপনার আর প্রয়োজন নেই
Three.js ওপেন ওয়েবের সমস্ত 3D কন্টেন্টের 70% এর বেশি রেন্ডার করে, Apple পণ্যের পেজ থেকে শুরু করে সাধারণ ব্রাউজার গেম পর্যন্ত। 2025 সাল পর্যন্ত, এটি ব্যবহার করে কিছু তৈরি করার অর্থ হল WebGL, শেডার এবং 200 পৃষ্ঠার ডকুমেন্টেশন সাইট শেখা। এখন, Vibe Skills এর AI দক্ষতাগুলি নন-ডেভেলপারদের সপ্তাহান্তে একটি কার্যকর Three.js সিন তৈরি করতে দেয় - কোনো গণিতের ডিগ্রি বা Stack Overflow-এর গভীরে যাওয়ার প্রয়োজন নেই।
এই গাইডটি দেখায় যে কোন AI দক্ষতাগুলি আসল Three.js আউটপুট তৈরি করে, আপনি আসলে কী তৈরি করতে পারেন (গেমের পরিবেশ, পণ্যের ভিউয়ার, হিরো সিন), এবং কীভাবে "আমার একটি ধারণা আছে" থেকে "এটি আমার ডোমেনে লাইভ আছে" পর্যন্ত যেতে হয়, কোনো THREE.PerspectiveCamera কনস্ট্রাক্টর হাতে না স্পর্শ করে।
Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।
কেন Three.js আগে নন-ডেভেলপারদের নাগালের বাইরে ছিল
Three.js হল WebGL-এর জাভাস্ক্রিপ্ট র্যাপার, যা ব্রাউজারের লো-লেভেল 3D গ্রাফিক্স API। এটি সরাসরি ব্যবহার করার জন্য, আপনাকে বুঝতে হত:
- সিন গ্রাফ (ক্যামেরা, আলো, মেশ, এবং সেগুলি কীভাবে নেস্ট করা হয়)
- শেডার (GLSL-এ লেখা ভার্টেক্স এবং ফ্র্যাগমেন্ট প্রোগ্রাম)
- জ্যামিতি গণিত (ম্যাট্রিক্স, কোয়াটারনিয়ন, ওয়ার্ল্ড স্পেস বনাম লোকাল স্পেস)
- পারফরম্যান্স বাজেট (ড্র কল, পলিগন সংখ্যা, টেক্সচার মেমরি)
একটি সাধারণ "হ্যালো কিউব" টিউটোরিয়াল একটি ঘোরানো আকৃতি দেখার আগে 800 লাইনের জাভাস্ক্রিপ্ট নেয়। Active Theory বা Resn-এর মতো এজেন্সির বাস্তব প্রোডাকশন সিন কাস্টম শেডার পাইপলাইন সহ 5,000 থেকে 15,000 লাইন নেয়।
এই বাধা Three.js-কে WebGL বিশেষজ্ঞদের হাতে রেখেছিল যারা প্রতি ঘন্টায় $120 থেকে $250 উপার্জন করে। ডিজাইনার, মার্কেটার, প্রতিষ্ঠাতা এবং শিক্ষার্থীরা কাজকে প্রশংসা করতে পারত কিন্তু কখনই এটি তৈরি করতে পারত না।
2026 সালের পরিবর্তন: Cursor এবং Claude-এর মতো AI কোডিং টুলগুলি এখন প্লেইন ইংরেজিতে একটি সংক্ষিপ্ত বিবরণ পড়তে পারে এবং কার্যকর react-three-fiber সিন আউটপুট করতে পারে। AI দক্ষতাগুলি সেই ওয়ার্কফ্লোকে এক-ক্লিক ইনস্টলে প্যাকেজ করে - কাঠামো, আলো, ক্যামেরা নিয়ন্ত্রণ, পারফরম্যান্স অপ্টিমাইজেশন, সবকিছু প্রি-বেকড।
Claude, Cursor, এবং আরও অনেক কিছুর জন্য শত শত রেডিমেড স্কিল ব্রাউজ করুন।
Three.js + AI দক্ষতা ব্যবহার করে আপনি কী তৈরি করতে পারেন
আপনি হাতে WebGL কোড না লিখে পাঁচটি সুনির্দিষ্ট আউটপুট প্রকার সরবরাহ করতে পারেন। প্রতিটির একটি Vibe Skills বিভাগ রয়েছে যা ওয়ার্কফ্লো বান্ডিল করে।
| আউটপুট প্রকার | বাস্তব উদাহরণ | তৈরির সময় (AI দক্ষতা সহ) | তৈরির সময় (প্রথম থেকে) |
|---|---|---|---|
| গেম পরিবেশ | ব্রাউজার রেসিং গেম, মিনি-প্ল্যাটফর্মার, এস্কেপ রুম | 4-12 ঘন্টা | 2-6 সপ্তাহ |
| পণ্যের ভিউয়ার | 360-ডিগ্রী স্নিকার, হেডফোন কনফিগারেশন, ঘড়ির মুখ | 2-6 ঘন্টা | 1-3 সপ্তাহ |
| 3D হিরো সিন | অ্যানিমেটেড ল্যান্ডিং পেজ ব্যাকগ্রাউন্ড, স্ক্রোল-চালিত 3D | 3-8 ঘন্টা | 1-2 সপ্তাহ |
| ইন্টারেক্টিভ ইনফোগ্রাফিক | ঘোরানো পৃথিবী, বিভক্ত ইঞ্জিন ডায়াগ্রাম, ডেটা গ্লোব | 4-10 ঘন্টা | 2-4 সপ্তাহ |
| AR / ট্রাই-অন ওয়েব ভিউ | গ্লাসের প্রিভিউ, রুম প্লেসমেন্ট, স্কেল মডেল | 6-15 ঘন্টা | 3-6 সপ্তাহ |
সংকোচন প্রায় 10x থেকে 20x। দক্ষতাগুলি বয়লারপ্লেট (সিন সেটআপ, আলো, নিয়ন্ত্রণ, প্রতিক্রিয়াশীল আকার) পরিচালনা করে যাতে আপনি সৃজনশীল দিকনির্দেশনায় মনোযোগ দিতে পারেন।
এখানে সবচেয়ে প্রাসঙ্গিক দুটি Vibe Skills বিভাগ:
- 3D গেমস - Three.js এর মাধ্যমে সম্পূর্ণ প্লেযোগ্য 3D গেম (রেসিং, পাজল, মিনি-প্ল্যাটফর্মার, ব্রাউজার FPS প্রোটোটাইপ)
- ইন্টারেক্টিভ 3D - পণ্যের কনফিগারেশন, 3D হিরো, স্ক্রোল-চালিত সিন, ডেটা ভিজ্যুয়ালাইজেশন
Vibe Skills-এ 5টি AI Three.js দক্ষতা (WebGL প্রয়োজন নেই)
Vibe Skills-এ 3D গেমস বিভাগ-এ বিশেষত নন-ডেভেলপারদের জন্য তৈরি দক্ষতা রয়েছে যারা Three.js আউটপুট চান। প্রতিটিতে react-three-fiber বয়লারপ্লেট, অ্যাসেট পাইপলাইন এবং একটি Cursor-রেডি ওয়ার্কফ্লো ফাইল রয়েছে।
| দক্ষতার প্রকার | এটি কী তৈরি করে | এটির জন্য সেরা |
|---|---|---|
| 3D হিরো সিন বিল্ডার | Next.js কম্পোনেন্ট হিসাবে স্ক্রোল-চালিত Three.js সিন | ল্যান্ডিং পেজ, পোর্টফোলিও সাইট, এজেন্সির হোমপেজ |
| ব্রাউজার রেসিং গেম স্টার্টার | ট্র্যাক, ফিজিক্স, নিয়ন্ত্রণ সহ সম্পূর্ণ রেসিং গেম | গেম প্রোটোটাইপ, ব্র্যান্ড অ্যাক্টিভেশন, হ্যাকাথন |
| পণ্যের কনফিগারেশন | উপাদান/রঙ অদলবদল সহ 360-ডিগ্রী ভিউয়ার | ইকমার্স স্টোর, পণ্যের লঞ্চ, কিকস্টার্টার পেজ |
| 3D গেম পরিবেশ প্যাক | প্রি-বিল্ট সিন (বন, অন্ধকূপ, সাই-ফাই, শহুরে) | ইন্ডি গেম, স্কুল প্রকল্প, গল্প বলার অভিজ্ঞতা |
| ইন্টারেক্টিভ 3D লোগো রিভিল | ক্যামেরা অ্যানিমেশন সহ 3D মডেল হিসাবে লোগো | ওয়েব ইন্ট্রো, ব্র্যান্ড ফিল্ম, কনফারেন্স ওপেনার |
লাইভ প্রিভিউ দেখতে Vibe Skills-এ 3D গেমস দক্ষতাগুলি ব্রাউজ করুন। প্রতিটি দক্ষতার সাথে একটি ভিডিও ডেমো রয়েছে তাই আপনি ইনস্টল করার আগে আসল আউটপুট দেখতে পান।
আউটপুট যেকোনো আধুনিক ফ্রেমওয়ার্কে কাজ করে: Next.js, Astro, Vite, সাধারণ HTML। কোনো ভেন্ডর লক-ইন নেই।
এক সপ্তাহান্তে আপনার প্রথম Three.js সিন তৈরি করুন
আপনার নিজের ডোমেনে শূন্য থেকে একটি লাইভ Three.js সিন পর্যন্ত ব্যবহারিক পথ এখানে।
ধাপ 1: Vibe Skills-এ সঠিক দক্ষতা নির্বাচন করুন
/category/3d-games থেকে শুরু করুন এবং আউটপুট প্রকার অনুসারে ফিল্টার করুন। আপনি যদি একটি হিরো সিন চান, 3D হিরো সিন বিল্ডার নিন। আপনি যদি একটি প্লেযোগ্য গেম চান, ব্রাউজার রেসিং গেম স্টার্টার বা গেম পরিবেশ প্যাক নিন।
লাইভ প্রিভিউ পড়ুন, ডেমো ভিডিও দেখুন, ফ্রেমওয়ার্ক সামঞ্জস্যতা পরীক্ষা করুন (বেশিরভাগ Next.js / Vite-এর জন্য react-three-fiber সরবরাহ করে)। Cursor বা Claude Code-এ দক্ষতা ইনস্টল করুন।
ধাপ 2: Cursor ইনস্টল করুন (বা Claude Code)
উভয় টুল AI দক্ষতা চালাতে পারে। Cursor ভিজ্যুয়াল সম্পাদনার জন্য কোড প্রিভিউ প্যান সহ ভাল। Claude Code টার্মিনাল-চালিত কাজ এবং এজেন্ট ওয়ার্কফ্লোগুলির জন্য ভাল। একটি বেছে নিন - 5 মিনিটে ইনস্টল করুন।
ধাপ 3: সিন তৈরি করুন
আপনার এডিটরে প্রকল্পটি খুলুন, দক্ষতাটি চালু করুন, প্লেইন ইংরেজিতে আপনি যা চান তা বর্ণনা করুন: "গাঢ় নেভি ব্যাকগ্রাউন্ড, হোভারিং এফেক্ট, ধীর অটো-রোটেট সহ স্পিনিং ক্রিস্টাল হিরো সিন।" AI দক্ষতা আলো, ক্যামেরা, নিয়ন্ত্রণ এবং প্রতিক্রিয়াশীল আকার সহ সম্পূর্ণ Three.js কোড আউটপুট করে।
ধাপ 4: আপনার সম্পদগুলি অদলবদল করুন
আপনার নিজের 3D মডেল (.glb বা .gltf Sketchfab, Polyhaven, বা Blender এক্সপোর্ট থেকে), টেক্সচার (Polyhaven বিনামূল্যের CC0) এবং ব্র্যান্ডের রঙগুলি ড্রপ করুন। দক্ষতাটিতে অ্যাসেট স্লট রয়েছে তাই আপনাকে সিনটি পুনরায় কাঠামোবদ্ধ করতে হবে না।
ধাপ 5: মোবাইলের জন্য অপ্টিমাইজ করুন
দক্ষতাটিতে মোবাইল ফলব্যাক রয়েছে: কম পলিগন সংখ্যা, সহজ আলো, দুর্বল GPU-তে সীমিত ফ্রেম রেট। একটি আসল ফোনে পরীক্ষা করুন (Chrome DevTools মোবাইল এমুলেটর GPU সমস্যাগুলি মিস করে)। 2-বছরের পুরনো আইফোনে 60 FPS-কে বেসলাইন হিসাবে লক্ষ্য করুন।
ধাপ 6: ডেপ্লয় করুন
Vercel বা Netlify-এ পুশ করুন। Three.js সিনগুলি স্ট্যাটিক জাভাস্ক্রিপ্ট - কোনো সার্ভার নেই, কোনো GPU ইনস্ট্যান্স নেই, কোনো বিশেষ হোস্টিং নেই। 60 সেকেন্ডের মধ্যে লাইভ URL।
Vibe Skills-এ Three.js দক্ষতাগুলি ব্রাউজ করুন →
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
AI Three.js দক্ষতা ব্যবহার করার জন্য আমার কি WebGL জানতে হবে?
না। Vibe Skills-এর AI দক্ষতাগুলি WebGL-কে সম্পূর্ণভাবে র্যাপ করে। আপনি প্লেইন ইংরেজিতে সিনটি বর্ণনা করেন, দক্ষতাটি কার্যকর react-three-fiber কোড আউটপুট করে, এবং আপনি আপনার নিজস্ব সম্পদগুলি অদলবদল করেন। আপনি সবচেয়ে গভীরে যান রঙের মান এবং মডেল ফাইল পাথ সম্পাদনা করে।
সিনটি কি মোবাইলে মসৃণভাবে চলবে?
হ্যাঁ, যখন দক্ষতাটিতে মোবাইল অপ্টিমাইজেশন অন্তর্ভুক্ত থাকে। সমস্ত Vibe Skills 3D সিন বিল্ডার ডিভাইস-টিয়ার ফলব্যাক সহ আসে: দুর্বল ফোনগুলিতে লো-পলি মেশ, ব্যাকগ্রাউন্ড ট্যাবে সীমিত ফ্রেম রেট, এবং লেজি-লোডেড টেক্সচার। লক্ষ্য হল 2-বছরের পুরনো আইফোনে 60 FPS। শিপ করার আগে পরীক্ষা করুন।
আমার কি র’ Three.js নাকি react-three-fiber ব্যবহার করা উচিত?
react-three-fiber ব্যবহার করুন। এটি Three.js-এর একটি React র্যাপার যা কোডকে ডিক্লারেটিভ এবং 40-60% ছোট করে তোলে। Vibe Skills 3D দক্ষতাগুলি ডিফল্টভাবে react-three-fiber ব্যবহার করে কারণ এটি Next.js, Astro, এবং Vite-এর সাথে পরিষ্কারভাবে কম্পোজ হয়। র’ Three.js শুধুমাত্র পিওর-JS ইঞ্জিন বা চরম অপ্টিমাইজেশনের জন্য মূল্যবান।
আমি কি Blender বা Sketchfab থেকে আমার নিজের 3D মডেল ব্যবহার করতে পারি?
হ্যাঁ। Blender থেকে .glb বা .gltf হিসাবে এক্সপোর্ট করুন, অথবা Sketchfab এবং Polyhaven থেকে .glb ফাইল ডাউনলোড করুন। সেগুলিকে অ্যাসেট ফোল্ডারে ড্রপ করুন, দক্ষতাটিকে ফাইলটি নির্দেশ করুন, কাজ শেষ। 3D সিন দক্ষতাগুলি ব্রাউজ করুন অ্যাসেট স্লট উদাহরণ দেখতে।
একটি Three.js দক্ষতার খরচ একজন ডেভেলপার নিয়োগের তুলনায় কত?
একজন WebGL ফ্রিল্যান্সার প্রতি ঘন্টায় $120 থেকে $250 নেয়, যেখানে একটি মৌলিক হিরো সিন $2,000 থেকে $8,000 এ চলে। একটি Vibe Skills সাবস্ক্রিপশন $39/মাস থেকে শুরু হয় এবং এতে সীমাহীন 3D দক্ষতা অন্তর্ভুক্ত থাকে। ব্রেক-ইভেন পয়েন্ট হল একটি সিন।
আমি কি কোডিং ছাড়াই একটি সম্পূর্ণ গেম তৈরি করতে পারি?
প্রোটোটাইপের জন্য হ্যাঁ, শিপ-রেডি গেমগুলির জন্য বেশিরভাগই হ্যাঁ। Vibe Skills-এর ব্রাউজার রেসিং গেম স্টার্টার এবং গেম এনভায়রনমেন্ট প্যাক কার্যকর ফিজিক্স, নিয়ন্ত্রণ এবং স্কোরিং সরবরাহ করে। আপনি লেভেল, আর্ট এবং সাউন্ড যোগ করেন। প্রোডাকশন পলিশ (মাল্টিপ্লেয়ার, সেভ স্টেট, অ্যানালিটিক্স) এখনও একজন ডেভেলপারের থেকে উপকৃত হয়।
AI-জেনারেটেড Three.js কোড কি পারফরম্যান্ট হবে?
যদি দক্ষতার মধ্যে পারফরম্যান্স প্রি-সেট অন্তর্ভুক্ত থাকে, হ্যাঁ। ড্র কল বাজেট, ফ্রাস্টাম কুলিং, ইনস্ট্যান্সড মেশ, এবং টেক্সচার কম্প্রেশন সরবরাহকারী দক্ষতাগুলি খুঁজুন। Vibe Skills 3D দক্ষতাগুলি ডিফল্টভাবে চারটিই অন্তর্ভুক্ত করে। নতুনদের হাতে-কোড করা সিনগুলি সাধারণত ধীর হয় কারণ অপ্টিমাইজেশানগুলি ডকুমেন্টেশনের গভীরে চাপা থাকে।
3D ওয়েব ডেমো দেখা বন্ধ করুন। নিজের তৈরি করুন।
Three.js এক দশক ধরে ওয়েবে 3D-এর প্রবেশদ্বার ছিল। AI দক্ষতাগুলি গেট ভেঙ্গেছে। আপনার আর WebGL জ্ঞান, একজন ডেভেলপার নিয়োগ, বা 6 মাসের শেখার সময়কালের প্রয়োজন নেই। আপনার একটি স্পষ্ট সিন বর্ণনা, Vibe Skills থেকে একটি দক্ষতা, এবং একটি সপ্তাহান্ত প্রয়োজন।
ডিজাইনাররা 3D হিরো তৈরি করে। প্রতিষ্ঠাতারা পণ্যের ভিউয়ার তৈরি করে। শিক্ষার্থীরা ব্রাউজার গেম তৈরি করে। মার্কেটাররা ইন্টারেক্টিভ ইনফোগ্রাফিক তৈরি করে। বার এখন সৃজনশীল নির্দেশনা, GLSL সিনট্যাক্স নয়।
Vibe Skills-এ Three.js এবং 3D গেমস দক্ষতাগুলি ব্রাউজ করুন →
ওয়েব 3D হচ্ছে। Vibe Skills-এ আপনার প্রথম Three.js দক্ষতা ইনস্টল করুন এবং এই সপ্তাহান্তে একটি সিন তৈরি করুন।