Claude, Cursor എന്നിവയ്ക്കും അതിലേറെയും വേണ്ടി തയ്യാറാക്കിയ നൂറുകണക്കിന് നൈപുണ്യങ്ങൾ ബ്രൗസ് ചെയ്യുക.
Three.js ഉപയോഗിച്ച് മിക്ക 3D വെബ് അനുഭവങ്ങളും നിർമ്മിക്കാം, ഇനി കോഡ് ചെയ്യേണ്ടതില്ല
ഓപ്പൺ വെബിലെ 70% 3D ഉള്ളടക്കവും Three.js ആണ് റെൻഡർ ചെയ്യുന്നത് - 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 ൻ്റെ ഒരു റിയാക്റ്റ് റാപ്പർ ആണ്, ഇത് കോഡ് ഡിക്ലറേറ്റീവ് ആയും 40-60% ചെറുതായും മാറ്റുന്നു. Vibe Skills 3D സ്കില്ലുകൾ react-three-fiber നെ ഡിഫോൾട്ടായി ഉപയോഗിക്കുന്നു, കാരണം ഇത് Next.js, Astro, Vite എന്നിവയുമായി വൃത്തിയായി കോമ്പോസ് ചെയ്യുന്നു. ശുദ്ധമായ JS എഞ്ചിനുകൾക്കോ അമിതമായ ഒപ്റ്റിമൈസേഷനോ വേണ്ടി മാത്രം റോ Three.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 വെബ് ഡെമോകൾ കാണുന്നത് നിർത്തുക. നിങ്ങളുടെ സ്വന്തം പുറത്തിറക്കുക.
ഒരു ദശകത്തോളം വെബിലെ 3D യിലേക്കുള്ള പ്രവേശന കവാടമായിരുന്നു Three.js. AI സ്കില്ലുകൾ ഗേറ്റ് തകർത്തു. നിങ്ങൾക്ക് ഇനി WebGL പരിജ്ഞാനം, ഒരു ഡെവലപ്പർ നിയമനം, അല്ലെങ്കിൽ 6 മാസത്തെ പഠന സമയം എന്നിവ ആവശ്യമില്ല. നിങ്ങൾക്ക് ഒരു വ്യക്തമായ രംഗ വിവരണം, Vibe Skills ൽ നിന്നുള്ള ഒരു സ്കിൽ, കൂടാതെ ഒരാഴ്ച സമയം എന്നിവ ആവശ്യമാണ്.
ഡിസൈനർമാർ 3D ഹീറോകളെ പുറത്തിറക്കുന്നു. സ്ഥാപകർ ഉൽപ്പന്ന ദൃശ്യങ്ങൾ പുറത്തിറക്കുന്നു. വിദ്യാർത്ഥികൾ ബ്രൗസർ ഗെയിമുകൾ പുറത്തിറക്കുന്നു. മാർക്കറ്റർമാർ ഇൻ്ററാക്ടീവ് ഇൻഫോഗ്രാഫിക്സ് പുറത്തിറക്കുന്നു. ബാർ ഇപ്പോൾ ക്രിയാത്മക ദിശയാണ്, GLSL സിൻ്റാക്സ് അല്ല.
Vibe Skills ലെ Three.js, 3D ഗെയിമുകൾ സ്കില്ലുകൾ ബ്രൗസ് ചെയ്യുക →
വെബ് 3D ആകുന്നു. Vibe Skills ൽ നിങ്ങളുടെ ആദ്യ Three.js സ്കിൽ ഇൻസ്റ്റാൾ ചെയ്യുക ഈ വാരാന്ത്യം ഒരു രംഗം പുറത്തിറക്കുക.