Vibe Skills

Claude, Cursor, ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ನೂರಾರು ಸಿದ್ಧ-ಸಿದ್ಧ ಕೌಶಲ್ಯಗಳನ್ನು ಬ್ರೌಸ್ ಮಾಡಿ.

3D ಹೀರೋ ವಿಭಾಗಗಳಿಗೆ ಅತ್ಯುತ್ತಮ AI ಕೌಶಲ್ಯಗಳು: 2026 ಏಕೆ ಅದನ್ನು ಮುಖ್ಯವಾಹಿನಿಯಾಗುವ ವರ್ಷ

2026 ರಲ್ಲಿ 3D ಹೀರೋ ವಿಭಾಗಗಳಿಗಾಗಿ ಅತ್ಯುತ್ತಮ AI ಕೌಶಲ್ಯಗಳು Three.js ದೃಶ್ಯವನ್ನು ರಚಿಸುತ್ತವೆ, ಅದು ನಿಮ್ಮ ಬ್ರಾಂಡ್ ಸ್ವತ್ತುಗಳನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, 2 ಗಂಟೆಗಳಿಗಿಂತ ಕಡಿಮೆ ಅವಧಿಯಲ್ಲಿ ರವಾನಿಸುತ್ತದೆ ಮತ್ತು $5,000 - $20,000 ಫ್ರೀಲಾನ್ಸ್ ಒಪ್ಪಂದವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. 3D ಲ್ಯಾಂಡಿಂಗ್ ಪುಟ ಹೀರೋ ಒಮ್ಮೆ ತ್ರೈಮಾಸಿಕ ಎಂಜಿನಿಯರಿಂಗ್ ಯೋಜನೆಯಾಗಿತ್ತು. ಇದು ಈಗ ಶುಕ್ರವಾರ ಮಧ್ಯಾಹ್ನ.

Linear, Stripe, Vercel, Arc, Rive, Liveblocks, ಮತ್ತು Cursor ಎಲ್ಲವೂ 2023 ಮತ್ತು 2026 ರ ನಡುವೆ ತಮ್ಮ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟಗಳನ್ನು ಸಂವಾದಾತ್ಮಕ 3D ಗೆ ಸ್ಥಳಾಂತರಿಸಿದವು. Stripe ಮತ್ತು Vercel ನಲ್ಲಿನ ಪರಿವರ್ತನೆ ತಂಡಗಳು ಮರು ವಿನ್ಯಾಸದ ನಂತರ ಸ್ಕ್ರೋಲ್ ಆಳ ಮತ್ತು ಸೈನ್ಅಪ್ ದರದಲ್ಲಿ ದ್ವಿ-ಅಂಕಿಯ ಏರಿಕೆಗಳನ್ನು ವರದಿ ಮಾಡಿದೆ. ಮಾದರಿಯು ಈಗ ಪ್ರೀಮಿಯಂ SaaS ಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಆಗಿದೆ, ಮತ್ತು ಫ್ಲಾಟ್ ಹೀರೋ ಈಗ ಆಫ್-ಟ್ರೆಂಡ್ ಓದುತ್ತದೆ.

ಈ ಮಾರ್ಗದರ್ಶಿ Vibe Skills ನಲ್ಲಿ ನಾವು 2026 ರಲ್ಲಿ ಶಿಫಾರಸು ಮಾಡುವ ಐದು ಸಂವಾದಾತ್ಮಕ 3D ಹೀರೋ ಕೌಶಲ್ಯಗಳು, ಪ್ರತಿಯೊಂದೂ ಏನು ರವಾನಿಸುತ್ತದೆ ಮತ್ತು ಈ ವಾರ ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ನಿಜವಾದ 3D ಹೀರೋವನ್ನು ಹೇಗೆ ಇರಿಸುವುದು ಎಂಬುದನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ.

Vibe Skills

ಕೌಶಲ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸಿ

ಉಚಿತವಾಗಿ ಪ್ರಾರಂಭಿಸಿ

3D ಹೀರೋಗಳು ಈಗ ಡೀಫಾಲ್ಟ್ ಆಗಿ "ಪ್ರೀಮಿಯಂ" ಅನ್ನು ಏಕೆ ಸೂಚಿಸುತ್ತವೆ

3D ಹೀರೋ ಹೊಸ "ನಾವು ಗಂಭೀರ ಕಂಪನಿ" ಸಂಕೇತವಾಗಿದೆ. ಐದು ವರ್ಷಗಳ ಹಿಂದೆ ಆ ಸಂಕೇತವು ಕಸ್ಟಮ್ ವಿವರಣೆಯಾಗಿತ್ತು. ಮೂರು ವರ್ಷಗಳ ಹಿಂದೆ ಅದು ಲೋಟಿ ಅನಿಮೇಷನ್ ಆಗಿತ್ತು. 2026 ರಲ್ಲಿ ಇದು ಸಂದರ್ಶಕರು ತಿರುಗಿಸಬಹುದಾದ, ಸ್ಕ್ರಬ್ ಮಾಡಬಹುದಾದ ಅಥವಾ ಸ್ಕ್ರಾಲ್‌ನೊಂದಿಗೆ ಪ್ರಚೋದಿಸಬಹುದಾದ ಸಂವಾದಾತ್ಮಕ 3D ದೃಶ್ಯವಾಗಿದೆ.

WebGL ನ ವೆಚ್ಚ ಕುಸಿದ ಕಾರಣ ಬದಲಾವಣೆ ಸಂಭವಿಸಿತು. react-three-fiber Three.js ಅನ್ನು React ಬರೆಯುವಂತೆ ಮಾಡಿದೆ. drei 90% ಪ್ರಕರಣವನ್ನು (ಕಕ್ಷೆ ನಿಯಂತ್ರಣಗಳು, ಪರಿಸರ ನಕ್ಷೆಗಳು, GLTF ಲೋಡರ್‌ಗಳು, ಉದಾಹರಣೆ ಮೆಶ್‌ಗಳು) ಏಕ-ಸಾಲು ಘಟಕಗಳಲ್ಲಿ ಪ್ಯಾಕ್ ಮಾಡಿದೆ. Spline ವಿನ್ಯಾಸಕರಿಗೆ ಕೋಡ್ ಇಲ್ಲದೆ ದೃಶ್ಯಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಟ್ಟಿತು. "ನಾವು 3D ಹೊಂದಿರಬೇಕೇ" ನಿಂದ "ನಮಗೆ 3D ಏಕೆ ಇಲ್ಲ" ಗೆ ಬಾರ್ ಬದಲಾಯಿತು.

ಪ್ರಸ್ತುತ ಗಡಿಯಿಂದ ಕೆಲವು ಉಲ್ಲೇಖ ಬಿಂದುಗಳು:

Linear ತನ್ನ ಮುಖಪುಟ ಹೀರೋದಲ್ಲಿ ಕರ್ಸರ್ ಚಲನೆಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ 3D ಸಂಚಯ ಗ್ರಾಫ್ ಅನ್ನು ಬಳಸುತ್ತದೆ
Stripe ನೀವು ಸ್ಕ್ರೋಲ್ ಮಾಡುವಾಗ ವಿಭಾಗ-ಪ್ರತಿ ಸ್ಕ್ರೋಲ್ ಅನಿಮೇಟ್ ಮಾಡುವ ನಿಯತಾಂಕ 3D ರಿಬ್ಬನ್ ಅನ್ನು ರವಾನಿಸುತ್ತದೆ
Vercel ಸಂಚರಣೆಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಉದಾಹರಣೆ ಕಣ ಕ್ಷೇತ್ರವನ್ನು ನಡೆಸುತ್ತದೆ
Arc ಹೀರೋ ಆಗಿ ಸಂಪೂರ್ಣ 3D ಬ್ರೌಸರ್ ಪೂರ್ವವೀಕ್ಷಣೆಯನ್ನು ನಿರ್ಮಿಸಿದೆ
Rive ಮೇಲಿನ ಮಡಚುವಿಕೆಯಲ್ಲಿ WebGL ನಲ್ಲಿ ವೆಬ್‌ಎಲ್ ಜಿಎಲ್ ನಲ್ಲಿ ನಿಜವಾದ ಉತ್ಪನ್ನ ಫೈಲ್‌ಗಳನ್ನು ತಿರುಗಿಸುತ್ತದೆ

ಸಂದರ್ಶಕರು ಯಾವಾಗಲೂ 3D ಅನ್ನು ಪ್ರಜ್ಞಾಪೂರ್ವಕವಾಗಿ ಗಮನಿಸುವುದಿಲ್ಲ. ಪುಟವು ** ದುಬಾರಿಯಾಗಿದೆ ** ಎಂದು ಅವರು ಗಮನಿಸುತ್ತಾರೆ. ಆ ಭಾವನೆಯು ಸೈನ್ಅಪ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ.

ಪರಿವರ್ತನೆ ಡೇಟಾ ಇದನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಕಡಿಮೆ-ಪಾಲಿ 3D ಹೀರೋಗಾಗಿ ಫ್ಲಾಟ್ ವಿವರಣೆಯನ್ನು ವಿನಿಮಯ ಮಾಡಿಕೊಂಡ ಅನೇಕ SaaS ತಂಡಗಳು 5 - 14% ಸಮಯ-ಆನ್-ಪುಟದ ಏರಿಕೆಗಳು ಮತ್ತು 2 - 6% ಪ್ರಯೋಗ ಸೈನ್ಅಪ್ ಏರಿಕೆಗಳನ್ನು ವರದಿ ಮಾಡಿದೆ. ಏರಿಕೆ ಮ್ಯಾಜಿಕ್ ಅಲ್ಲ. ಇದು ಸುಂದರವಾದ ಪಿಚ್ ಡೆಕ್‌ನಂತೆಯೇ ಯಾಂತ್ರಿಕತೆ: ಪುಟವು ಕಾಳಜಿ ವಹಿಸುವ ಜನರಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ ಎಂದು ಓದುತ್ತದೆ, ಆದ್ದರಿಂದ ಉತ್ಪನ್ನವು ಅದೇ ರೀತಿಯಲ್ಲಿ ಓದುತ್ತದೆ.

ತಡೆವೊಡ್ಲು ವೆಚ್ಚವಾಗಿತ್ತು. ಫ್ರೀಲಾನ್ಸ್ ವಿಶೇಷತೆಯಿಂದ ಕಸ್ಟಮ್ Three.js ಹೀರೋ $5,000 - $20,000 ರನ್ ಆಗುತ್ತದೆ ಮತ್ತು 3 - 6 ವಾರಗಳು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. AI ಕೌಶಲ್ಯಗಳು ಅದನ್ನು 2 ಗಂಟೆಗಳು ಮತ್ತು ಒಂದು ಚಂದಾದಾರಿಕೆ ಗೆ ಕುಸಿಯುತ್ತವೆ.

Vibe Skills

ಕೌಶಲ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸಿ

ಉಚಿತವಾಗಿ ಪ್ರಾರಂಭಿಸಿ

ಉತ್ತಮ 3D ಲ್ಯಾಂಡಿಂಗ್ ಪುಟ ಹೀರೋದ ಅಂಗರಚನಾಶಾಸ್ತ್ರ

3D ಹೀರೋ ಕೇವಲ "ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ಒಂದು ಮಾದರಿ" ಅಲ್ಲ. ಪರಿವರ್ತಿಸುವ ಹೀರೋಗೆ ಐದು ಪದರಗಳಿವೆ, ಮತ್ತು ಔಟ್ಪುಟ್ ನಿಜವಾಗಿಯೂ Linear-ಗ್ರೇಡ್ ಕೆಲಸದಂತೆ ಭಾಸವಾಗಬೇಕಾದರೆ AI ಕೌಶಲ್ಯವು ಎಲ್ಲ ಐದರನ್ನೂ ರವಾನಿಸಬೇಕಾಗುತ್ತದೆ.

ಪದರ	ಅದು ಏನು ಮಾಡುತ್ತದೆ	ಅದು ಏಕೆ ಮುಖ್ಯ	ಸಾಮಾನ್ಯ ತಪ್ಪು
ಮಾದರಿ	ಪರದೆಯ ಮೇಲೆ 3D ವಸ್ತು (ಲೋಗೋ, ಉತ್ಪನ್ನ, ಅಮೂರ್ತ ಆಕಾರ)	ಹುಕ್. ಸಂದರ್ಶಕರು ಮೊದಲು ನೋಡುವದು.	ಜೆನೆರಿಕ್ ಆಗಿ ಕಾಣುವ ಸ್ಟಾಕ್ ಮಾದರಿಯನ್ನು ಬಳಸುವುದು
ಬೆಳಕು	ಪರಿಸರ ನಕ್ಷೆಗಳು + ಕೀ/ಫಿಲ್ ಲೈಟ್ಗಳು	ಮೇಲ್ಮೈಯನ್ನು ನಿಜವಾದ ವಸ್ತುವಾಗಿ ಮಾರಾಟ ಮಾಡುತ್ತದೆ	ಆಳವನ್ನು ಕೊಲ್ಲುವ ಫ್ಲಾಟ್ ಸುತ್ತಮುತ್ತಲಿನ ಬೆಳಕು
ಅನಿಮೇಷನ್	ತಿರುಗುವಿಕೆ, ಸ್ಕ್ರೋಲ್-ಟೈಡ್ ಚಲನೆ, ಹೋವರ್ ಪ್ರತಿಕ್ರಿಯೆ	ದೃಶ್ಯವನ್ನು ಸ್ಥಿರವಾಗಿರದಂತೆ ಜೀವಂತವಾಗಿ ಭಾಸವಾಗುವಂತೆ ಮಾಡುತ್ತದೆ	ಸ್ಕ್ರೀನ್‌ಸೇವರ್‌ನಂತೆ ಕಾಣುವ ಆಟೋ-ಸ್ಪಿನ್ ಲೂಪ್‌ಗಳು
ಇಂಟರಾಕ್ಟಿವಿಟಿ	ಕರ್ಸರ್ ಪ್ಯಾರಲಾಕ್ಸ್, ಕ್ಲಿಕ್ ಪ್ರಚೋದಕಗಳು, ಸ್ಕ್ರೋಲ್ ಸ್ಕ್ರಬ್	ಸಂದರ್ಶಕರನ್ನು ದೃಶ್ಯಕ್ಕೆ ಎಳೆಯುತ್ತದೆ	ಯಾವುದೇ ಸಂವಾದಾತ್ಮಕತೆ ಇಲ್ಲ, ಆದ್ದರಿಂದ ಅದು ವೀಡಿಯೊದಂತೆ ಓದುತ್ತದೆ
ಮೊಬೈಲ್ ಫಾಲ್‌ಬ್ಯಾಕ್	ಸ್ಪರ್ಶ ಸಾಧನಗಳಲ್ಲಿ ಸ್ಥಿರ ಚಿತ್ರ ಅಥವಾ ಕಡಿಮೆ-ಪಾಲಿ ಆವೃತ್ತಿ	60% ಟ್ರಾಫಿಕ್ ಮೊಬೈಲ್ ಆಗಿದೆ - WebGL ಬ್ಯಾಟರಿಯನ್ನು ಹರಿಸುತ್ತದೆ	ಮೊಬೈಲ್‌ನಲ್ಲಿ ಪೂರ್ಣ ದೃಶ್ಯವನ್ನು ರವಾನಿಸುವುದು ಮತ್ತು LCP ಅನ್ನು ಕೆಡವುವುದು

ನಿಜವಾದ 3D ಹೀರೋ ಕೌಶಲ್ಯವು ಎಲ್ಲ ಐದು ಪದರಗಳನ್ನು ರವಾನಿಸುತ್ತದೆ. ಕೆಟ್ಟದು ಒಂದು ಮಾದರಿಯನ್ನು ರವಾನಿಸಿ ಅದನ್ನು ಮುಗಿದಿದೆ ಎಂದು ಕರೆಯುತ್ತದೆ.

ಮೊಬೈಲ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಅತಿ ದೊಡ್ಡ ಅಂಧ ಸ್ಥಳವಾಗಿದೆ. ಮಧ್ಯಮ ಶ್ರೇಣಿಯ Android ಫೋನ್‌ನಲ್ಲಿ Three.js 1.2 ಸೆಕೆಂಡ್‌ನಿಂದ 4.8 ಸೆಕೆಂಡ್‌ಗಳವರೆಗೆ ಅತಿ ದೊಡ್ಡ ವಿಷಯದ ಚಿತ್ರಣ (LCP) ಸ್ಕೋರ್ ಅನ್ನು ಕೆಡವುತ್ತದೆ, ಇದನ್ನು Google "ಬ poor ರು" ಎಂದು ಧ್ವಜ ಹಾಕುತ್ತದೆ. ಸರಿಪಡಿಸುವುದು ಮೂರು ಮಾದರಿಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ:

ಸ್ಥಿರ ಪೋಸ್ಟರ್: ದೃಶ್ಯವನ್ನು ಉತ್ತಮ-ಗುಣಮಟ್ಟದ JPG/WEBP ಗೆ ರೆಂಡರ್ ಮಾಡಿ, ಅದನ್ನು ಮೊಬೈಲ್ ಹೀರೋ ಆಗಿ ರವಾನಿಸಿ, pointer:fine ನಲ್ಲಿ ಮಾತ್ರ ಲೈವ್ ದೃಶ್ಯವನ್ನು ಬದಲಾಯಿಸಿ
ಕಡಿಮೆ-ಪಾಲಿ ರೂಪಾಂತರ: ಮೊಬೈಲ್‌ನಲ್ಲಿ ಪರಿಸರ ನಕ್ಷೆ ಇಲ್ಲದೆ ಮಾದರಿಯ 200-ತ್ರಿ ಆವೃತ್ತಿಯನ್ನು ರವಾನಿಸಿ
ನಿಧಾನ-ಆರೋಹಣ: ಬಳಕೆದಾರರು ಹೀರೋವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಿದ ನಂತರ ಮಾತ್ರ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಆರೋಹಿಸಿ, ಆದ್ದರಿಂದ ಆರಂಭಿಕ ಚಿತ್ರಣವು ಸ್ಥಿರ ಪೋಸ್ಟರ್ ಆಗಿದೆ

ಪ್ರತಿ Vibe Skills 3D ಹೀರೋ ಕೌಶಲ್ಯವು ಮೊಬೈಲ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಆಲೋಚನೆಯ ನಂತರ ಅಲ್ಲ, ಒಳಗೊಂಡಿರುತ್ತದೆ.

Vibe Skills ನಲ್ಲಿ 3D ಹೀರೋ ವಿಭಾಗಗಳಿಗಾಗಿ 5 AI ಕೌಶಲ್ಯಗಳು

2026 ರಲ್ಲಿ ನಾವು ಶಿಫಾರಸು ಮಾಡುವ ಐದು ಸಂವಾದಾತ್ಮಕ 3D ಹೀರೋ ಕೌಶಲ್ಯಗಳು ಇವು. ಎಲ್ಲವೂ Vibe Skills ನಲ್ಲಿ ಸಂವಾದಾತ್ಮಕ 3D ವರ್ಗದಲ್ಲಿ ವಾಸಿಸುತ್ತವೆ ಮತ್ತು Next.js, Remix, ಅಥವಾ Astro ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಇರಿಸಲು ಸಿದ್ಧವಾಗಿರುವ react-three-fiber ಘಟಕಗಳಾಗಿ ರವಾನಿಸುತ್ತವೆ.

1. Linear-ಶೈಲಿಯ ತೇಲುವ ವಸ್ತು ಹೀರೋ

"ಮೇಲಿನ ಮಡಚುವಿಕೆಯ ಮೇಲೆ ತೇಲುವ ಏಕ ಹೀರೋ ವಸ್ತು" ಮಾದರಿ. ಲೋಗೋ ಅಥವಾ ಉತ್ಪನ್ನ ಗುರುತು ಹಾಕಿ, ಕೌಶಲ್ಯವು ಅದನ್ನು GLTF ಆಗಿ ರಿಗ್ ಮಾಡುತ್ತದೆ, ಬ್ರಷ್ ಮಾಡಿದ-ಲೋಹ ಅಥವಾ ಗಾಜಿನ ವಸ್ತುವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ರಿಮ್ ಬೆಳಕನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು ಮೌಸ್ ಸ್ಥಾನದಿಂದ ವಸ್ತುವನ್ನು 6 ಡಿಗ್ರಿಗಳಷ್ಟು ಓರೆಯಾಗಿಸುವ ಕರ್ಸರ್ ಪ್ಯಾರಲಾಕ್ಸ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.

ಇದಕ್ಕಾಗಿ ಅತ್ಯುತ್ತಮ: SaaS ಮುಖಪುಟಗಳು, ಡೆವ್ ಉಪಕರಣಗಳು, ಫಿನ್‌ಟೆಕ್, Linear ಅಥವಾ Arc ನಂತೆ ಭಾಸವಾಗಲು ಬಯಸುವ ಯಾವುದಾದರೂ. ಔಟ್ಪುಟ್: <Hero3D /> React ಘಟಕ, GLTF ಮಾದರಿ, 1 ಮೊಬೈಲ್ ಪೋಸ್ಟರ್ JPG. ರವಾನಿಸಲು ಸಮಯ: ಇನ್ಪುಟ್ನಿಂದ ನಿಯೋಜನೆಗೆ 90 ನಿಮಿಷಗಳು.

2. Stripe-ಶೈಲಿಯ ನಿಯತಾಂಕ ರಿಬ್ಬನ್

ಉತ್ಪನ್ನದ ಮೊದಲು ಚಲನೆಯನ್ನು ಮಾರಾಟ ಮಾಡುವ ಅನಿಮೇಟೆಡ್ ರಿಬ್ಬನ್ / ಅಲೆ / ಹರಿವಿನ ಮಾದರಿ. ಕೌಶಲ್ಯವು ನಿಯತಾಂಕ ಮೆಶ್ (ಸೈನ್/ಕರ್ಲ್ ಶಬ್ದ ಚಾಲಿತ) ಅನ್ನು ರಚಿಸುತ್ತದೆ, ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳಲ್ಲಿ ಗ್ರೇಡಿಯಂಟ್ ವಸ್ತುವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಸಂದರ್ಶಕರು ಪುಟದಲ್ಲಿ ಕೆಳಗೆ ಚಲಿಸುವಾಗ ರಿಬ್ಬನ್ ರೂಪಾಂತರಗೊಳ್ಳುವಂತೆ ಅನಿಮೇಷನ್ ಹಂತವನ್ನು ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನಕ್ಕೆ ಜೋಡಿಸುತ್ತದೆ.

ಇದಕ್ಕಾಗಿ ಅತ್ಯುತ್ತಮ: ಪಾವತಿಗಳು, ಮೂಲಸೌಕರ್ಯ, API ಉತ್ಪನ್ನಗಳು, "ಚಲನೆ" ರೂಪಕದ ಭಾಗವಾಗಿರುವ ಯಾವುದೇ ಪಿಚ್. ಔಟ್ಪುಟ್: ಸ್ಕ್ರೋಲ್-ಟೈಡ್ ಯುನಿಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ <RibbonHero /> ಘಟಕ, ಮೊಬೈಲ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಒಂದು ಸ್ಥಿರ ಗ್ರೇಡಿಯಂಟ್ ಫ್ರೇಮ್ ಆಗಿದೆ.

3. ಕಣ ಕ್ಷೇತ್ರ ಹೀರೋ

ಕರ್ಸರ್ ಅಥವಾ ಸ್ಕ್ರೋಲ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಉದಾಹರಣೆ ಕಣ / ಡಾಟ್ ಕ್ಷೇತ್ರ. ಕೌಶಲ್ಯವು 5,000 - 50,000 ಉದಾಹರಣೆ ಮೆಶ್‌ಗಳನ್ನು (ಸಾಧನ ಶ್ರೇಣಿಯ ಪ್ರಕಾರ ನಿರ್ಬಂಧಿಸಲಾಗಿದೆ) ಇರಿಸುತ್ತದೆ, ಅವುಗಳನ್ನು ಶಬ್ದ ಕ್ಷೇತ್ರದಿಂದ ಓಡಿಸುತ್ತದೆ ಮತ್ತು ಕಣಗಳು ಪಾಯಿಂಟರ್ ಸುತ್ತಲೂ ಭಾಗವಾಗುವಂತೆ ಕರ್ಸರ್-ಆಕರ್ಷಕವನ್ನು ಸೇರಿಸುತ್ತದೆ.

ಇದಕ್ಕಾಗಿ ಅತ್ಯುತ್ತಮ: AI ಉತ್ಪನ್ನಗಳು, ಡೇಟಾ ಉಪಕರಣಗಳು, ಮೂಲಸೌಕರ್ಯ ಬ್ರಾಂಡ್‌ಗಳು, "ಪ್ರಮಾಣ" ಅಥವಾ "ಬುದ್ಧಿಮತ್ತೆ" ಸಂದೇಶವಾಗಿರುವ ಯಾವುದಾದರೂ. ಔಟ್ಪುಟ್: <ParticleHero /> ಸ್ವಯಂ-ಗುಣಮಟ್ಟದ ಅಳವಡಿಕೆಯೊಂದಿಗೆ (60fps ಅನ್ನು ಹಿಡಿದಿಡಲು ದುರ್ಬಲ GPU ಗಳಲ್ಲಿ ಕಣಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ).

4. ಉತ್ಪನ್ನ 3D ತಿರುಗುವಿಕೆ ಹೀರೋ

"ಮೇಲಿನ ಮಡಚುವಿಕೆಯಲ್ಲಿ ನಿಮ್ಮ ನಿಜವಾದ ಉತ್ಪನ್ನವನ್ನು 3D ಯಲ್ಲಿ ತಿರುಗಿಸಿ" ಮಾದರಿ. ಕೌಶಲ್ಯವು ನೀವು ಒದಗಿಸಿದ GLTF ಅನ್ನು (ಅಥವಾ ಚಿತ್ರ-ಂದ-3D ಮೂಲಕ ಏಕ ಉತ್ಪನ್ನ ರೆಂಡರ್‌ನಿಂದ ಕಡಿಮೆ-ಪಾಲಿ ಆವೃತ್ತಿಯನ್ನು ರಚಿಸುತ್ತದೆ), ಸ್ಟುಡಿಯೋ ಬೆಳಕನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಸಂದರ್ಶಕರು ತಿರುಗಿಸಲು ಅಥವಾ ನಿಷ್ಕ್ರಿಯವಾಗಿ ಸ್ವಯಂ-ಆರ್ಬಿಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.

ಇದಕ್ಕಾಗಿ ಅತ್ಯುತ್ತಮ: ಹಾರ್ಡ್‌ವೇರ್ ಬ್ರಾಂಡ್‌ಗಳು, ಭೌತಿಕ ಉತ್ಪನ್ನಗಳು, ಇ-ಕಾಮರ್ಸ್, ಫ್ಯಾಷನ್, ವಿನ್ಯಾಸ ಸಾಧನ ಪೂರ್ವವೀಕ್ಷಣೆಗಳು. ಔಟ್ಪುಟ್: <OrbitControls /> 60 ಡಿಗ್ರಿ ಕ್ಲಾಂಪ್‌ಗಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಿದ <ProductHero />, ಪೂರ್ಣ ಮೊಬೈಲ್ ಸನ್ನೆ ಬೆಂಬಲ.

5. ಸ್ಕ್ರೋಲ್-ಚಾಲಿತ ದೃಶ್ಯ ಹೀರೋ

ಐದರಲ್ಲಿ ಅತ್ಯಂತ ಮಹತ್ವಾಕಾಂಕ್ಷಿ. ಬಹು-ಹಂತದ 3D ದೃಶ್ಯ, ಅಲ್ಲಿ ಪ್ರತಿ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನವು ಕ್ಯಾಮೆರಾ ಕೋನ, ಬೆಳಕು ಮತ್ತು ಸಕ್ರಿಯ ವಸ್ತುವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. Apple ಉತ್ಪನ್ನ ಪುಟಗಳು, Vercel ನ Edge Functions ಪುಟ ಮತ್ತು Liveblocks ನ Yjs ಪುಟದಿಂದ ಬಳಸಲಾಗುತ್ತದೆ.

ಇದಕ್ಕಾಗಿ ಅತ್ಯುತ್ತಮ: ಉತ್ಪನ್ನ ಬಿಡುಗಡೆಗಳು, ವೈಶಿಷ್ಟ್ಯ ಆಳವಾದ ಡೈವ್‌ಗಳು, ಮೇಲಿನ ಮಡಚುವಿಕೆಯಲ್ಲಿ 3-ಹಂತದ ಕಥೆಯನ್ನು ಹೇಳುವ ಯಾವುದಾದರೂ. ಔಟ್ಪುಟ್: <ScrollScene /> ಘಟಕ react-three-fiber + @react-three/drei + Lenis ಸುಗಮ ಸ್ಕ್ರೋಲ್ ಮೇಲೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, JSON ನಲ್ಲಿ ನೀವು ಸಂಪಾದಿಸಬಹುದಾದ ಹೆಸರಿನ ಕ್ಯಾಮೆರಾ ವೇಪಾಯಿಂಟ್‌ಗಳೊಂದಿಗೆ.

Vibe Skills ನಲ್ಲಿ ಎಲ್ಲಾ ಸಂವಾದಾತ್ಮಕ 3D ಕೌಶಲ್ಯಗಳನ್ನು ಬ್ರೌಸ್ ಮಾಡಿ

2 ಗಂಟೆಗಳಿಗಿಂತ ಕಡಿಮೆ ಅವಧಿಯಲ್ಲಿ 3D ಹೀರೋವನ್ನು ಹೇಗೆ ರವಾನಿಸುವುದು

"ನಾವು 3D ಹೀರೋ ಬಯಸುತ್ತೇವೆ" ಯಿಂದ "ಇದು ಉತ್ಪಾದನೆಯಲ್ಲಿ ಲೈವ್ ಆಗಿದೆ" ವರೆಗೆ ಸಂಪೂರ್ಣ ಕಾರ್ಯಗತ. 1 ನೇ ಹಂತವು ಯಾವಾಗಲೂ Vibe Skills ನಲ್ಲಿ ಸರಿಯಾದ ಕೌಶಲ್ಯವನ್ನು ಆರಿಸುವುದು - Three.js ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್ ಬರೆಯುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸಬೇಡಿ.

ಹಂತ 1: Vibe Skills ನಲ್ಲಿ ಸರಿಯಾದ ಕೌಶಲ್ಯವನ್ನು ಆರಿಸಿ

Vibe Skills ನಲ್ಲಿ ಸಂವಾದಾತ್ಮಕ 3D ವರ್ಗಕ್ಕೆ ಹೋಗಿ ಮತ್ತು ಮಾದರಿಯನ್ನು ನಿಮ್ಮ ಉತ್ಪನ್ನಕ್ಕೆ ಹೊಂದಿಸಿ. SaaS ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಉತ್ಪನ್ನವು Linear-ಶೈಲಿಯ ತೇಲುವ ವಸ್ತುವನ್ನು ಆರಿಸುತ್ತದೆ. API/ಇನ್ಫ್ರಾ ಉತ್ಪನ್ನವು Stripe-ಶೈಲಿಯ ರಿಬ್ಬನ್ ಅನ್ನು ಆರಿಸುತ್ತದೆ. ಹಾರ್ಡ್‌ವೇರ್ ಉತ್ಪನ್ನವು ಉತ್ಪನ್ನ ತಿರುಗುವಿಕೆಯನ್ನು ಆರಿಸುತ್ತದೆ. AI ಉತ್ಪನ್ನವು ಕಣ ಕ್ಷೇತ್ರವನ್ನು ಆರಿಸುತ್ತದೆ.

ನಿಮಗೆ ಖಚಿತವಿಲ್ಲದಿದ್ದರೆ, Linear-ಶೈಲಿಯ ತೇಲುವ ವಸ್ತು ಕೌಶಲ್ಯವು ಕಡಿಮೆ-ಅಪಾಯದ ಡೀಫಾಲ್ಟ್ ಆಗಿದೆ. ಇದು 70% SaaS ಲ್ಯಾಂಡಿಂಗ್ ಪುಟಗಳಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಹಂತ 2: ಇನ್ಪುಟ್ಗಳನ್ನು ಒದಗಿಸಿ

Vibe Skills ನಲ್ಲಿನ ಪ್ರತಿ 3D ಹೀರೋ ಕೌಶಲ್ಯವು ಅದೇ ಆರು ಇನ್ಪುಟ್ಗಳನ್ನು ಕೇಳುತ್ತದೆ:

ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳು (ಪ್ರಾಥಮಿಕ + 1 ಉಚ್ಚಾರಣೆ, ಹೆಕ್ಸ್ ಕೋಡ್‌ಗಳು)
ಲೋಗೋ ಅಥವಾ ಹೀರೋ ಗುರುತು (SVG ಆದ್ಯತೆ, PNG ಸ್ವೀಕರಿಸಲಾಗಿದೆ)
ಉತ್ಪನ್ನ ಸ್ವತ್ತು (GLTF, OBJ, ಅಥವಾ 3D ಫೈಲ್ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ ಉತ್ಪನ್ನ ರೆಂಡರ್ JPG)
ಮೂಡ್ ಉಲ್ಲೇಖ (ನಿಮಗೆ ಇಷ್ಟವಾದ 3D ಭಾವನೆಯ ಸೈಟ್‌ಗಳ 1 - 3 URL ಗಳು)
ತಂತ್ರಜ್ಞಾನ ಸ್ಟಾಕ್ (Next.js, Remix, Astro, ಸಾಮಾನ್ಯ Vite, ಇತ್ಯಾದಿ)
ಮೊಬೈಲ್ ತಂತ್ರ (ಸ್ಥಿರ ಪೋಸ್ಟರ್, ಕಡಿಮೆ-ಪಾಲಿ, ಅಥವಾ ನಿಧಾನ-ಆರೋಹಣ)

ನೀವು GLTF ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಕೌಶಲ್ಯವು ಏಕ ಉತ್ಪನ್ನ ರೆಂಡರ್‌ನಿಂದ ಕಡಿಮೆ-ಪಾಲಿ ಆವೃತ್ತಿಯನ್ನು ಸ್ವಯಂ-ರಚಿಸುತ್ತದೆ. ನೀವು ಉತ್ಪನ್ನ ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಅದು ನಿಮ್ಮ ಲೋಗೋವನ್ನು ಬಳಸುತ್ತದೆ.

ಹಂತ 3: ರಚಿಸಿ ಮತ್ತು ಪೂರ್ವವೀಕ್ಷಿಸಿ

ಕೌಶಲ್ಯವು ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಉತ್ಪಾದಿಸುತ್ತದೆ:

ಒಂದು react-three-fiber ಘಟಕ (<Hero3D /> ಅಥವಾ ಅಂತಹುದೇ)
GLTF ಮಾದರಿ ಫೈಲ್
ಒಂದು ಮೊಬೈಲ್ ಪೋಸ್ಟರ್ JPG/WEBP
సరైన GLTF ಲೋಡರ್ ನಿರ್ವಹಣೆಗಾಗಿ next.config.js ಪ್ಯಾಚ್
ಸ್ಥಾಪನೆ ಆದೇಶದೊಂದಿಗೆ README

Vibe Skills ನ ಲೈವ್ ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಪೂರ್ವವೀಕ್ಷಿಸಿ. ಒಂದು ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಿ, ಒಂದು ಆಸ್ತಿಯನ್ನು ವಿನಿಮಯ ಮಾಡಿ, ಫಲಿತಾಂಶವನ್ನು ನೋಡಿ.

ಹಂತ 4: ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಇರಿಸಿ

pnpm add three @react-three/fiber @react-three/drei

ಘಟಕವನ್ನು ನಿಮ್ಮ components/ ಫೋಲ್ಡರ್‌ಗೆ ನಕಲಿಸಿ, GLTF ಅನ್ನು public/3d/ ಗೆ ನಕಲಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಹೀರೋ ವಿಭಾಗಕ್ಕೆ ಘಟಕವನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ. ಕೌಶಲ್ಯವು ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಕಾರಗಳನ್ನು ರವಾನಿಸುತ್ತದೆ ಮತ್ತು ಟ್ರೀ-ಶೇಕ್ ಮಾಡಬಹುದಾಗಿದೆ.

ಹಂತ 5: ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಶೀಲಿಸಿ

ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ ಎರಡರಲ್ಲೂ Lighthouse ಅನ್ನು ರನ್ ಮಾಡಿ. ಕೌಶಲ್ಯದ ಮೊಬೈಲ್ ಫಾಲ್‌ಬ್ಯಾಕ್ LCP ಅನ್ನು 2.5 ಸೆಕೆಂಡ್‌ಗಳ ಅಡಿಯಲ್ಲಿ ಇಡಬೇಕು. ನೀವು ಹಿಂಜರಿಕೆ ಕಂಡರೆ, "ನಿಧಾನ-ಆರೋಹಣ" ನಿಂದ "ಸ್ಥಿರ ಪೋಸ್ಟರ್" ಗೆ ಮೊಬೈಲ್ ತಂತ್ರವನ್ನು ಬದಲಾಯಿಸಿ.

ಹಂತ 6: ರವಾನಿಸಿ

ಹಂತ 1 ರಿಂದ ನಿಯೋಜನೆಗೆ ಒಟ್ಟು ಕಳೆದ ಸಮಯ: ಮೊದಲ ಬಾರಿಗೆ ಬಳಕೆದಾರರಿಗೆ 90 - 120 ನಿಮಿಷಗಳು. ನೀವು ಒಂದನ್ನು ಹಿಂದೆ ರವಾನಿಸಿದ್ದರೆ 30 - 45 ನಿಮಿಷಗಳು.

ಆಗಾಗ್ಗೆ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

3D ಹೀರೋ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಕೆಟ್ಟದೇ?

ಸರಿಯಾಗಿ ನಿರ್ಮಿಸಿದರೆ ಇಲ್ಲ. Vibe Skills ನಲ್ಲಿನ ಕೌಶಲ್ಯಗಳು ಮೊಬೈಲ್ ಪೋಸ್ಟರ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮತ್ತು ನಿಧಾನ-ಆರೋಹಣ ಕ್ಯಾನ್ವಾಸ್‌ನೊಂದಿಗೆ ರವಾನಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ಹೀರೋ ಮೊದಲ ಚಿತ್ರಣವನ್ನು ನಿರ್ಬಂಧಿಸುವುದಿಲ್ಲ. ಸರಿಯಾಗಿ ನಿರ್ಮಿಸಿದ 3D ಹೀರೋ ಸ್ಥಾಪನೆಯ ನಂತರದ ನೈಜ-ಜೀವನದ Lighthouse ಸ್ಕೋರ್‌ಗಳು ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಲ್ಲಿ 90+ ಮತ್ತು ಮೊಬೈಲ್‌ನಲ್ಲಿ 80+ ನಲ್ಲಿ 2.5 ಸೆಕೆಂಡ್‌ಗಳ ಅಡಿಯಲ್ಲಿ LCP ಯೊಂದಿಗೆ ಲ್ಯಾಂಡ್ ಆಗುತ್ತವೆ.

Three.js ಗಾಗಿ JS ಬಂಡಲ್ ಎಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ?

Three.js + react-three-fiber + drei ನಿಮ್ಮ ಬಂಡಲ್‌ಗೆ ಅಂದಾಜು 120 - 180 KB gzipped ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಇದು ದೊಡ್ಡ ಲೋಟಿ ಅನಿಮೇಷನ್‌ಗೆ ಹೋಲಿಸಬಹುದು ಮತ್ತು ಹೆಚ್ಚಿನ ವಿಶ್ಲೇಷಣಾ SDK ಗಳಿಗಿಂತ ಚಿಕ್ಕದಾಗಿದೆ. 3D ಯನ್ನು ಬಳಸುವ ಪುಟವನ್ನು ಸಂದರ್ಶಕರು ತಲುಪಿದಾಗ ಮಾತ್ರ ಲೋಡ್ ಆಗುವಂತೆ ಹೀರೋ ಘಟಕದ ಹಿಂದೆ ಅದನ್ನು ಕೋಡ್-ವಿಭಜಿಸಿ.

ನನಗೆ 3D ಮಾದರಿ ಫೈಲ್ ಅಗತ್ಯವಿದೆಯೇ ಅಥವಾ AI ಕೌಶಲ್ಯವು ಒಂದನ್ನು ಮಾಡುತ್ತದೆಯೇ?

ಎರಡೂ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ನೀವು GLTF, OBJ, ಅಥವಾ FBX ಫೈಲ್ ಹೊಂದಿದ್ದರೆ, ಕೌಶಲ್ಯವು ಅದನ್ನು ನೇರವಾಗಿ ಬಳಸುತ್ತದೆ. ನೀವು ಉತ್ಪನ್ನ ರೆಂಡರ್ ಅಥವಾ ನಿಮ್ಮ ಲೋಗೋವನ್ನು ಮಾತ್ರ ಹೊಂದಿದ್ದರೆ, ಕೌಶಲ್ಯವು ಚಿತ್ರ-ಂದ-3D (ಸಾಮಾನ್ಯವಾಗಿ 200 - 2,000 ತ್ರಿಕೋನಗಳು, ವೆಬ್‌ಗಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲಾಗಿದೆ) ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮಗಾಗಿ ಕಡಿಮೆ-ಪಾಲಿ GLTF ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಸಂವಾದಾತ್ಮಕ 3D ಕೌಶಲ್ಯಗಳನ್ನು ಬ್ರೌಸ್ ಮಾಡಿ ಯಾವ ಕೌಶಲ್ಯಗಳು ಚಿತ್ರ-ಂದ-3D ಅನ್ನು ಒಳಗೊಂಡಿವೆ ಎಂಬುದನ್ನು ನೋಡಲು.

ಮೊಬೈಲ್ ಬಗ್ಗೆ ಏನು? 3D ಬ್ಯಾಟರಿಯನ್ನು ಹರಿಸುವುದಿಲ್ಲವೇ?

Vibe Skills ನಲ್ಲಿನ ಕೌಶಲ್ಯಗಳು ಇದನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ. ಸ್ಪರ್ಶ ಸಾಧನಗಳಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯು ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಸ್ಥಿರ ಪೋಸ್ಟರ್ ಆಗಿದೆ, ಲೈವ್ 3D ದೃಶ್ಯವು ಹೋವರ್ ಮೇಲೆ ಮಾತ್ರ ಆರೋಹಿಸುತ್ತದೆ (ಇದು ಸ್ಪರ್ಶದಲ್ಲಿ ಎಂದಿಗೂ ಬೆಂಕಿ ಹಚ್ಚುವುದಿಲ್ಲ) ಅಥವಾ ಬಳಕೆದಾರರು ಮಡಚುವಿಕೆಯ ಕೆಳಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿದ ನಂತರ. ನೀವು 30fps ನಲ್ಲಿ ಮೊಬೈಲ್‌ನಲ್ಲಿ ರನ್ ಆಗುವ ಮತ್ತು ಅತ್ಯಲ್ಪ ಬ್ಯಾಟರಿ ವೆಚ್ಚದ ಕಡಿಮೆ-ಪಾಲಿ ರೂಪಾಂತರವನ್ನು ಸಹ ಆಯ್ಕೆ ಮಾಡಬಹುದು.

ನಾನು Three.js ಬರೆಯುವ ಬದಲು Spline ದೃಶ್ಯಗಳನ್ನು ಬಳಸಬಹುದೇ?

ಹೌದು. Vibe Skills ನಲ್ಲಿನ ಎರಡು ಸಂವಾದಾತ್ಮಕ 3D ಕೌಶಲ್ಯಗಳು ನೀವು ಕೋಡ್-ರಹಿತ ಸಂಪಾದಕವನ್ನು ಬಯಸಿದರೆ Spline ಸ್ವರೂಪಕ್ಕೆ ರಫ್ತು ಮಾಡುತ್ತವೆ. ಹಿಂಜರಿಕೆ ಬಂಡಲ್ ಗಾತ್ರವಾಗಿದೆ - Spline ನ ರನ್‌ಟೈಮ್ 120 - 180 KB ವಿರುದ್ಧ 300 - 500 KB gzipped ಆಗಿದೆ. ವೇಗವಾಗಿ ರವಾನಿಸುವ ಮಾರ್ಕೆಟಿಂಗ್ ಸೈಟ್‌ಗಾಗಿ, ಕಚ್ಚಾ Three.js ಗೆಲ್ಲುತ್ತದೆ. ವಿನ್ಯಾಸಕ-ಮಾಪನಾಂಕಣದ ಪುನರಾವರ್ತನೆ ಲೂಪ್‌ಗಾಗಿ, Spline ಗೆಲ್ಲುತ್ತದೆ.

AI-ರಚಿಸಿದ 3D ಹೀರೋ ಜೆನೆರಿಕ್ ಆಗಿ ಕಾಣುತ್ತದೆಯೇ?

ಇಲ್ಲ - Vibe Skills ನಲ್ಲಿನ ಕೌಶಲ್ಯಗಳನ್ನು ಉತ್ಪಾದನಾ SaaS ಸೈಟ್‌ಗಳಿಗಾಗಿ 3D ಹೀರೋಗಳನ್ನು ರವಾನಿಸಿದ ಚಲನೆಯ ವಿನ್ಯಾಸಕರು ನಿರ್ಮಿಸಿದ್ದಾರೆ. AI ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಸ್ವತ್ತುಗಳು, ಬಣ್ಣಗಳು ಮತ್ತು ವಿಷಯವನ್ನು ತುಂಬುತ್ತದೆ, ಆದರೆ ದೃಶ್ಯ ವ್ಯವಸ್ಥೆ, ಬೆಳಕಿನ ಸೆಟಪ್ ಮತ್ತು ಅನಿಮೇಷನ್ ವಕ್ರರೇಖೆಗಳು ಕೈಯಿಂದ ಮಾಡಲ್ಪಟ್ಟಿವೆ. ಖರೀದಿಸುವ ಮೊದಲು ನಿಜವಾದ ಔಟ್ಪುಟ್ ಅನ್ನು ಪೂರ್ವವೀಕ್ಷಿಸಲು ಸಂವಾದಾತ್ಮಕ 3D ವರ್ಗವನ್ನು ಬ್ರೌಸ್ ಮಾಡಿ.

ಇದು Three.js ಫ್ರೀಲಾನ್ಸರ್ ಅನ್ನು ನೇಮಿಸಿಕೊಳ್ಳುವುದಕ್ಕೆ ಹೇಗೆ ಹೋಲಿಸುತ್ತದೆ?

ಒಂದು ಫ್ರೀಲಾನ್ಸ್ Three.js ವಿಶೇಷತೆಯು $80 - $200/ಗಂಟೆ ರನ್ ಆಗುತ್ತದೆ ಮತ್ತು ಒಂದು ಹೀರೋ ವಿಶಿಷ್ಟವಾಗಿ 30 - 80 ಗಂಟೆಗಳು ತ takes ುತ್ತದೆ, ಪರಿಷ್ಕರಣೆಗಳನ್ನು ಒಳಗೊಂಡಂತೆ. ಅದು ಒಂದು ಹೀರೋಗೆ $2,400 - $16,000 ಆಗಿದೆ, 3 - 6 ವಾರಗಳ ತಿರುವು ಸಮಯದೊಂದಿಗೆ. Vibe Skills ಚಂದಾದಾರಿಕೆಯು $39/ತಿಂಗಳು ದಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು 90 ನಿಮಿಷಗಳಲ್ಲಿ ಹೀರೋವನ್ನು ರವಾನಿಸುತ್ತದೆ. ಕೌಶಲ್ಯವು ಮೊದಲ ಹೀರೋನಲ್ಲಿ ಹಿಂದಿರುಗಿಸುತ್ತದೆ ಮತ್ತು ನೀವು ರವಾನಿಸುವ ಪ್ರತಿ ಉತ್ಪನ್ನ ಪುಟ, ಪ್ರತಿ ಪ್ರಚಾರ ಲ್ಯಾಂಡಿಂಗ್ ಮತ್ತು ಪ್ರತಿ ಮೈಕ್ರೊಸೈಟ್‌ನಾದ್ಯಂತ ಹಿಂದಿರುಗುತ್ತಲೇ ಇರುತ್ತದೆ.

ಸ್ಥಾಪನೆಯ ನಂತರ ನಾನು ರಚಿಸಿದ ಘಟಕವನ್ನು ಸಂಪಾದಿಸಬಹುದೇ?

ಹೌದು. ಔಟ್ಪುಟ್ ಪ್ಲೈನ್ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ + react-three-fiber ಆಗಿದೆ. ನೀವು ಫೈಲ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಬಣ್ಣಗಳನ್ನು ಸಂಪಾದಿಸಿ, ವಸ್ತುಗಳನ್ನು ವಿನಿಮಯ ಮಾಡಿ, ಅನಿಮೇಷನ್ ವಕ್ರರೇಖೆಗಳನ್ನು ಮರು-ಟ್ಯೂನ್ ಮಾಡಿ, ಕ್ಯಾಮೆರಾ FOV ಅನ್ನು ಬದಲಾಯಿಸಿ. ಕೌಶಲ್ಯವು ಸ್ವಚ್ಛ, ಕಾಮೆಂಟ್ ಮಾಡಿದ ಕೋಡ್ ಅನ್ನು ರವಾನಿಸುತ್ತದೆ, ಕಪ್ಪು ಪೆಟ್ಟಿಗೆಯಲ್ಲ.

ತ್ವರಿತ CTA: 3D ಹೀರೋಗಳನ್ನು ಮೊದಲಿನಿಂದ ನಿರ್ಮಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ

2026 ರಲ್ಲಿ 3D ಹೀರೋ ಈಗ ಪ್ರೀಮಿಯಂ SaaS ಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಆಗಿದೆ, 2022 ರಲ್ಲಿ ಲೋಟಿ ಅನಿಮೇಷನ್ ಡೀಫಾಲ್ಟ್ ಆಗಿದ್ದ ರೀತಿಯಲ್ಲಿಯೇ. 3D ಹೀರೋಗಳನ್ನು ರವಾನಿಸುವ ತಂಡಗಳು ಎಲ್ಲರೂ Three.js ವಿಶೇಷತೆಗಳನ್ನು ನೇಮಿಸಿಕೊಳ್ಳುತ್ತಿಲ್ಲ - ಅವರು 2 ಗಂಟೆಗಳಿಗಿಂತ ಕಡಿಮೆ ಅವಧಿಯಲ್ಲಿ ಸಂಪೂರ್ಣ ಸ್ಟಾಕ್ (ಮಾದರಿ, ಬೆಳಕು, ಅನಿಮೇಷನ್, ಸಂವಾದಾತ್ಮಕತೆ, ಮೊಬೈಲ್ ಫಾಲ್‌ಬ್ಯಾಕ್) ಅನ್ನು ರವಾನಿಸುವ AI ಕೌಶಲ್ಯಗಳನ್ನು ಸ್ಥಾಪಿಸುತ್ತಿದ್ದಾರೆ.

ನೀವು 3D ಹೀರೋವನ್ನು ಫ್ರೀಲಾನ್ಸ್ ಉಲ್ಲೇಖವು $8k ಆಗಿತ್ತು ಅಥವಾ ಎಂಜಿನಿಯರಿಂಗ್ ಟಿಕೆಟ್ Q3 ರಿಂದ ಹಿಜಾಜಿನಲ್ಲಿತ್ತು ಎಂಬ ಕಾರಣದಿಂದ ಮುಂದೂಡಿದ್ದರೆ, ನೀವು ಅದನ್ನು ಇಂದು ಮಧ್ಯಾಹ್ನ ರವಾನಿಸಬಹುದು.

Vibe Skills ನಲ್ಲಿ 3D ಹೀರೋ ಕೌಶಲ್ಯಗಳನ್ನು ಬ್ರೌಸ್ ಮಾಡಿ →

$8,000 ಫ್ರೀಲಾನ್ಸ್ ಉಲ್ಲೇಖ ಮತ್ತು 6-ವಾರಗಳ ಸಮಯಾವಧಿಯನ್ನು ಬಿಟ್ಟುಬಿಡಿ. Vibe Skills ನಲ್ಲಿ 3D ಹೀರೋ ಕೌಶಲ್ಯವನ್ನು ಸ್ಥಾಪಿಸಿ.*