Mag-browse ng daan-daang mga ready-made skill para sa Claude, Cursor, at marami pa.
Tatlo.js ang Nagpapagana sa Karamihan ng 3D Web Experiences, at Hindi Mo Na Kailangang I-code Ito
Ang Tatlo.js ay nagre-render ng mahigit 70% ng lahat ng 3D na nilalaman sa open web, mula sa mga pahina ng produkto ng Apple hanggang sa mga indie browser game. Hanggang 2025, ang pagbuo ng anumang gamit nito ay nangangahulugang pag-aaral ng WebGL, shaders, at isang 200-pahinang dokumentasyon. Ngayon, ang mga kasanayan sa AI sa Vibe Skills ay nagpapahintulot sa mga hindi developer na makapagpadala ng gumaganang Tatlo.js scene sa loob ng isang weekend - walang kinakailangang degree sa matematika, walang pagkahulog sa malalim na rabbit hole ng Stack Overflow.
Ipinapakita ng gabay na ito kung aling mga kasanayan sa AI ang bumubuo ng tunay na Tatlo.js output, kung ano ang maaari mong mabuo (game environment, product viewers, hero scenes), at kung paano pumunta mula sa "May ideya ako" tungo sa "Naka-live na ito sa aking domain" nang hindi kinakailangang hawakan ang THREE.PerspectiveCamera constructor nang mano-mano.
Mag-browse ng daan-daang mga ready-made skill para sa Claude, Cursor, at marami pa.
Bakit Dating Hindi Maaabot ang Tatlo.js sa Mga Hindi Developer
Ang Tatlo.js ay ang JavaScript wrapper sa WebGL, ang low-level 3D graphics API ng browser. Upang gamitin ito nang direkta, kailangan mong maunawaan ang:
- Mga scene graph (mga camera, ilaw, meshes, at kung paano sila nakapaloob)
- Mga shader (vertex at fragment programs na nakasulat sa GLSL)
- Geometry math (mga matrices, quaternions, world space vs local space)
- Mga performance budget (draw calls, bilang ng mga polygon, texture memory)
Ang isang tipikal na "Hello Cube" tutorial ay tumatakbo ng 800 linya ng JavaScript bago ka makakita ng umiikot na hugis. Ang mga totoong production scenes mula sa mga ahensya tulad ng Active Theory o Resn ay tumatakbo ng 5,000 hanggang 15,000 linya na may mga custom shader pipeline.
Ang gatekeeper na iyon ay naglagay sa Tatlo.js sa kamay ng mga WebGL specialist na kumikita ng $120 hanggang $250 bawat oras. Ang mga designer, marketer, founder, at estudyante ay maaaring humanga sa trabaho ngunit hindi ito maipadala.
Ang pagbabago noong 2026: Ang mga AI coding tool tulad ng Cursor at Claude ay maaari nang magbasa ng isang maikling paglalarawan sa simpleng Ingles at maglabas ng gumaganang react-three-fiber scenes. Ang mga kasanayan sa AI ay nagsasama-sama ng workflow na iyon sa one-click installs - istraktura, pag-iilaw, mga kontrol sa camera, pag-optimize ng performance, lahat ay naka-pre-bake.
Mag-browse ng daan-daang mga ready-made skill para sa Claude, Cursor, at marami pa.
Ano ang Maaari Mong Mabuo Gamit ang Tatlo.js + Mga Kasanayan sa AI
Maaari kang magpadala ng limang konkretong uri ng output nang hindi kinakailangang magsulat ng WebGL nang mano-mano. Ang bawat isa ay may kategorya sa Vibe Skills na nagbubuklod sa workflow.
| Uri ng Output | Halimbawa sa Tunay na Buhay | Oras ng Pagbuo (gamit ang kasanayan sa AI) | Oras ng Pagbuo (mula sa simula) |
|---|---|---|---|
| Game environment | Browser racing game, mini-platformer, escape room | 4-12 oras | 2-6 linggo |
| Product viewer | 360-degree sneaker, headphone configurator, watch face | 2-6 oras | 1-3 linggo |
| 3D hero scene | Animated landing page background, scroll-driven 3D | 3-8 oras | 1-2 linggo |
| Interactive infographic | Umiikot na mundo, exploded engine diagram, data globe | 4-10 oras | 2-4 linggo |
| AR / try-on web view | Salamin preview, room placement, scale model | 6-15 oras | 3-6 linggo |
Ang pagbawas ay tinatayang 10x hanggang 20x. Ang mga kasanayan ay humahawak sa boilerplate (scene setup, mga ilaw, mga kontrol, responsive sizing) kaya't nakatuon ka sa direksyong malikhain.
Ang dalawang kategorya ng Vibe Skills na pinaka-kaugnay dito:
- 3D Games - buong playable 3D games sa pamamagitan ng Tatlo.js (racing, puzzle, mini-platformer, browser FPS prototypes)
- Interactive 3D - product configurators, 3D heroes, scroll-driven scenes, data visualizations
5 AI Tatlo.js Skills sa Vibe Skills (Walang WebGL na Kinakailangan)
Ang Kategorya ng 3D Games sa Vibe Skills ay may mga kasanayan na binuo partikular para sa mga hindi developer na nais ng Tatlo.js output. Ang bawat isa ay may kasamang react-three-fiber boilerplate, asset pipeline, at isang Cursor-ready workflow file.
| Uri ng Kasanayan | Ano ang Ginagawa Nito | Pinakamahusay Para Sa |
|---|---|---|
| 3D Hero Scene Builder | Scroll-driven Tatlo.js scene bilang isang Next.js component | Mga landing page, portfolio site, agency homepages |
| Browser Racing Game Starter | Buong racing game na may track, physics, controls | Mga game prototype, brand activation, hackathons |
| Product Configurator | 360-degree viewer na may pagpapalit ng materyal/kulay | Mga online store, paglulunsad ng produkto, mga pahina ng kickstarter |
| 3D Game Environment Pack | Mga pre-built na eksena (kagubatan, dungeon, sci-fi, urban) | Mga indie game, mga proyektong pang-eskwela, mga karanasan sa naratibo |
| Interactive 3D Logo Reveal | Logo bilang isang 3D model na may animation ng camera | Mga web intro, brand films, conference openers |
Mag-browse ng mga 3D Games skills sa Vibe Skills upang makita ang mga live preview. Ang bawat kasanayan ay may kasamang video demo kaya nakikita mo ang aktuwal na output bago i-install.
Ang output ay gumagana sa anumang modernong framework: Next.js, Astro, Vite, plain HTML. Walang vendor lock-in.
Buuin ang Iyong Unang Tatlo.js Scene sa Isang Weekend
Narito ang praktikal na landas mula sa wala hanggang sa isang live na Tatlo.js scene sa iyong sariling domain.
Hakbang 1: Piliin ang Tamang Kasanayan sa Vibe Skills
Magsimula sa /category/3d-games at mag-filter ayon sa uri ng output. Kung nais mo ng hero scene, kunin ang 3D Hero Scene Builder. Kung nais mo ng playable game, kunin ang Browser Racing Game Starter o Game Environment Pack.
Basahin ang live preview, panoorin ang demo video, tingnan ang compatibility ng framework (karamihan ay may kasamang react-three-fiber para sa Next.js / Vite). I-install ang kasanayan sa Cursor o Claude Code.
Hakbang 2: I-install ang Cursor (o Claude Code)
Ang parehong mga tool ay maaaring magpatakbo ng mga kasanayan sa AI. Ang Cursor ay mas mahusay para sa visual editing na may code preview pane. Ang Claude Code ay mas mahusay para sa terminal-driven work at agent workflows. Pumili ng isa - i-install sa loob ng 5 minuto.
Hakbang 3: Bumuo ng Scene
Buksan ang proyekto sa iyong editor, tawagin ang kasanayan, ilarawan kung ano ang gusto mo sa simpleng Ingles: "Umiikot na kristal na hero scene na may madilim na navy na background, hovering effect, mabagal na auto-rotate." Ang AI skill ay naglalabas ng kumpletong Tatlo.js code, kasama ang mga ilaw, camera, kontrol, at responsive sizing.
Hakbang 4: Palitan ang Iyong Mga Asset
Ilagay ang iyong sariling 3D models (.glb o .gltf mula sa Sketchfab, Polyhaven, o Blender exports), textures (Polyhaven free CC0), at mga kulay ng brand. Kasama sa kasanayan ang mga asset slot kaya hindi mo kailangang i-restructure ang scene.
Hakbang 5: I-optimize para sa Mobile
Ang kasanayan ay may kasamang mobile fallbacks: mas mababang bilang ng mga polygon, mas simpleng mga ilaw, naka-cap na frame rates sa mahihinang GPUs. Subukan sa isang tunay na telepono (ang Chrome DevTools mobile emulator ay nakakalimutan ang mga isyu sa GPU). Mag-target ng 60 FPS sa isang 2-taong-gulang na iPhone bilang baseline.
Hakbang 6: Mag-deploy
Push sa Vercel o Netlify. Ang mga Tatlo.js scenes ay static JavaScript - walang server, walang GPU instance, walang espesyal na hosting. Live URL sa wala pang 60 segundo.
Mag-browse ng Tatlo.js skills sa Vibe Skills →
Madalas na Itanong
Kailangan ko bang malaman ang WebGL upang magamit ang mga AI Tatlo.js skills?
Hindi. Ang mga AI skills sa Vibe Skills ay ganap na nagbabalot ng WebGL. Inilalarawan mo ang scene sa simpleng Ingles, ang kasanayan ay naglalabas ng gumaganang react-three-fiber code, at pinapalitan mo ang iyong sariling mga asset. Ang pinakamalalim na pupuntahan mo ay ang pag-edit ng mga halaga ng kulay at mga file path ng modelo.
Gagana ba nang maayos ang scene sa mobile?
Oo, kapag ang kasanayan ay may kasamang mga pag-optimize para sa mobile. Lahat ng Vibe Skills 3D scene builders ay may kasamang device-tier fallbacks: low-poly meshes sa mahihinang telepono, naka-cap na frame rates sa mga background tab, at mga lazy-loaded na texture. Ang target ay 60 FPS sa isang 2-taong-gulang na iPhone. Subukan bago magpadala.
Dapat ko bang gamitin ang raw Tatlo.js o react-three-fiber?
Gamitin ang react-three-fiber. Ito ay isang React wrapper sa Tatlo.js na ginagawang declarative ang code at 40-60% mas maikli. Ang mga Vibe Skills 3D skills ay default sa react-three-fiber dahil maayos itong nagko-compose sa Next.js, Astro, at Vite. Ang raw Tatlo.js ay sulit lamang para sa mga purong JS engine o matinding pag-optimize.
Magagamit ko ba ang aking sariling 3D models mula sa Blender o Sketchfab?
Oo. Mag-export bilang .glb o .gltf mula sa Blender, o mag-download ng .glb files mula sa Sketchfab at Polyhaven. Ilagay ang mga ito sa asset folder, ituro ang kasanayan sa file, tapos na. Mag-browse ng 3D scene skills upang makita ang mga halimbawa ng asset slot.
Magkano ang gastos ng isang Tatlo.js skill kumpara sa pagkuha ng isang developer?
Ang isang WebGL freelancer ay naniningil ng $120 hanggang $250 bawat oras, na may isang basic hero scene na nagkakahalaga ng $2,000 hanggang $8,000. Ang isang subscription sa Vibe Skills ay nagsisimula sa $39/buwan at kasama ang walang limitasyong 3D skills. Ang break-even point ay isang scene.
Makakagawa ba ako ng buong laro nang hindi nagko-code?
Oo para sa mga prototype, karamihan ay oo para sa mga laro na handa nang ipadala. Ang Browser Racing Game Starter at Game Environment Pack sa Vibe Skills ay may kasamang gumaganang physics, controls, at scoring. Nagdaragdag ka ng mga level, art, at sound. Ang pag-polish ng produksyon (multiplayer, save state, analytics) ay nakikinabang pa rin sa isang developer.
Magiging performant ba ang AI-generated Tatlo.js code?
Kung ang kasanayan ay may kasamang mga performance pre-set, oo. Hanapin ang mga kasanayan na may kasamang draw call budgets, frustum culling, instanced meshes, at texture compression. Ang mga Vibe Skills 3D skills ay may kasamang lahat ng apat bilang default. Ang mga mano-manong naka-code na scene mula sa mga baguhan ay karaniwang mas mabagal dahil ang mga pag-optimize ay nakatago sa mga dokumentasyon.
Itigil ang Panonood ng 3D Web Demos. Ipadala ang Iyong Sarili.
Ang Tatlo.js ay ang gatekeeper sa 3D sa web sa loob ng isang dekada. Ang mga kasanayan sa AI ang bumutas sa gate. Hindi mo na kailangan ang kaalaman sa WebGL, pagkuha ng developer, o 6-buwang runway ng pag-aaral. Kailangan mo ng malinaw na paglalarawan ng scene, isang kasanayan mula sa Vibe Skills, at isang weekend.
Ang mga designer ay nagpapadala ng 3D heroes. Ang mga founder ay nagpapadala ng product viewers. Ang mga estudyante ay nagpapadala ng browser games. Ang mga marketer ay nagpapadala ng interactive infographics. Ang bar na ngayon ay creative direction, hindi GLSL syntax.
Mag-browse ng mga Tatlo.js at 3D Games skills sa Vibe Skills →
Ang web ay nagiging 3D. I-install ang iyong unang Tatlo.js skill sa Vibe Skills at magpadala ng scene ngayong weekend.