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 ಅನ್ನು ಗಂಟೆಗೆ $120 ರಿಂದ $250 ಗಳಿಸುವ WebGL ತಜ್ಞರ ಕೈಯಲ್ಲಿ ಇರಿಸಿತು. ಡಿಸೈನರ್ಗಳು, ಮಾರ್ಕೆಟರ್ಗಳು, ಸಂಸ್ಥಾಪಕರು ಮತ್ತು ವಿದ್ಯಾರ್ಥಿಗಳು ಕೆಲಸವನ್ನು ಮೆಚ್ಚಿಕೊಳ್ಳಬಹುದಿತ್ತು ಆದರೆ ಅದನ್ನು ಎಂದಿಗೂ ಕಳುಹಿಸಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ.
2026 ರಲ್ಲಿ ಬದಲಾವಣೆ: Cursor ಮತ್ತು Claude ನಂತಹ AI ಕೋಡಿಂಗ್ ಸಾಧನಗಳು ಈಗ ಇಂಗ್ಲಿಷ್ನಲ್ಲಿ ಒಂದು ಬ್ರೀಫ್ ಅನ್ನು ಓದಬಹುದು ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸುವ react-three-fiber ಸೀನ್ ಗಳನ್ನು ಔಟ್ಪುಟ್ ಮಾಡಬಹುದು. AI ಕೌಶಲ್ಯಗಳು ಆ ವರ್ಕ್ಫ್ಲೋವನ್ನು ಒಂದು-ಕ್ಲಿಕ್ ಸ್ಥಾಪನೆಗಳಾಗಿ ಪ್ಯಾಕೇಜ್ ಮಾಡುತ್ತವೆ - ರಚನೆ, ಲೈಟಿಂಗ್, ಕ್ಯಾಮೆರಾ ನಿಯಂತ್ರಣಗಳು, ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್, ಎಲ್ಲವೂ ಪೂರ್ವ-ಬೇಯಿಸಿದವು.
Claude, Cursor, ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ನೂರಾರು ಸಿದ್ಧ-ಸಿದ್ಧ ಕೌಶಲ್ಯಗಳನ್ನು ಬ್ರೌಸ್ ಮಾಡಿ.
AI ಕೌಶಲ್ಯಗಳೊಂದಿಗೆ Three.js ನಿಂದ ನೀವು ಏನು ನಿರ್ಮಿಸಬಹುದು
ನೀವು ವೆಬ್ಜಿಎಲ್ ಅನ್ನು ಕೈಯಿಂದ ಬರೆಯದೆಯೇ ಐದು ಕಾಂಕ್ರೀಟ್ ಔಟ್ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಕಳುಹಿಸಬಹುದು. ಪ್ರತಿಯೊಂದೂ ವರ್ಕ್ಫ್ಲೋವನ್ನು ಬಂಡಲ್ ಮಾಡುವ 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-ವರ್ಷದ iPhone ನಲ್ಲಿ 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-ವರ್ಷದ iPhone ನಲ್ಲಿ 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 ನಲ್ಲಿರುವ ಬ್ರೌಸರ್ ರೇಸಿಂಗ್ ಗೇಮ್ ಸ್ಟಾರ್ಟರ್ ಮತ್ತು ಗೇಮ್ ಪರಿಸರ ಪ್ಯಾಕ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಫಿಸಿಕ್ಸ್, ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸ್ಕೋರಿಂಗ್ ಅನ್ನು ಕಳುಹಿಸುತ್ತವೆ. ನೀವು ಲೆವೆಲ್ಗಳು, ಕಲೆ, ಮತ್ತು ಧ್ವನಿಯನ್ನು ಸೇರಿಸುತ್ತೀರಿ. ಉತ್ಪಾದನಾ ಪ polish (ಮಲ್ಟಿಪ್ಲೇಯರ್, ಸೇವ್ ಸ್ಟೇಟ್, ಅನಲಿಟಿಕ್ಸ್) ಇನ್ನೂ ಡೆವಲಪರ್ನಿಂದ ಲಾಭ ಪಡೆಯುತ್ತದೆ.
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 ಕೌಶಲ್ಯವನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಈ ವಾರಾಂತ್ಯದಲ್ಲಿ ಒಂದು ಸೀನ್ ಅನ್ನು ಕಳುಹಿಸಿ.