ផែនការពេលពិត៖ វេបសាយ 3D តាមរយៈ Gemini
កុំបារម្ភអំពីកម្មវិធីបង្កើត prompt ទៀតឡើយ។ នេះគឺជាផែនការអន្តរកម្មពេញលេញ ដំណាក់កាលមួយៗ។ ពីការជជែកទទេរហូតដល់បទពិសោធន៍ 3D អន្តរកម្ម – ដោយប្រើតែការសន្ទនាជាមួយបញ្ញាសិប្បនិមិត្តក្នុងពេលពិតប៉ុណ្ណោះ។
ជំហានទី ១៖ ការរៀបចំបរិយាកាស
អ្នកមិនត្រូវការដំឡើងអ្វីលើកុំព្យូទ័ររបស់អ្នកទេ។ ដំណើរការទាំងមូលនឹងដំណើរការតែក្នុងកម្មវិធីរុករកប៉ុណ្ណោះ។ សម្រាប់ការធ្វើបន្ទាន់ឲ្យលឿនបំផុត សូមបើកផ្ទាំង២ខាងគ្នា៖
- បើក Google Gemini (gemini.google.com) ប្រៀបដូចជាសេវាឥតគិតថ្លៃ។
- បើកកម្មវិធីកែសម្រួលកូដលើអ៊ីនធឺណិត CodePen.io ឬ PlayCode.io។ នៅទីនេះយើងនឹងសាកល្បងកូដដែលបានបង្កើតឡើងបន្ទាប់ពីនេះភ្លាមៗ ដោយមិនចាំបាច់បង្កើត និងរក្សាទុកឯកសារ HTML ទេ។
ជំហានទី ២៖ Prompt ដំបូង (Master-Prompt)
Prompt ដំបូងគឺសំខាន់បំផុត។ វាកំណត់ស៊ុមសម្រាប់ Gemini ហើយកំណត់មូលដ្ឋានបច្ចេកវិទ្យា (Three.js ពី CDN គ្រប់យ៉ាងនៅក្នុងឯកសារតែមួយ)។ ចម្លងអត្ថបទនេះ ហើយបិទភ្ជាប់វាទៅក្នុង Gemini៖
អ្នកជាអ្នកជំនាញលើ WebGL និងបណ្ណាល័យ Three.js។ ភារៈកិច្ចរបស់អ្នកគឺសរសេរកូដ HTML ពេញលេញ (រួមទាំង CSS និង JS នៅខាងក្នុង) សម្រាប់សេន 3D មួយដែលដំណើរការបានពិតប្រាកដ។ តម្រូវការ៖ 1. បង្កើតវត្ថុ 3D មួយ (TorusKnot ឬ Icosahedron) បង្វិលនៅកណ្ដាល។ 2. នាំចូល Three.js និង OrbitControls តាមរយៈតំណ CDN (unpkg ឬ cdnjs) ក្នុង tag script។ 3. វាត្រូវតែជា 'Single file' – អ្នកត្រូវដាក់គ្រប់យ៉ាងនៅក្នុងកូដតែមួយគត់ មិនប្រើ import maps ទេ។ 4. កុំប្រើម៉ូដែលខាងក្រៅ (GLTF) ឬអត្ថភាពជាក់លាក់ (JPG/PNG) ឡើយ។ បង្កើតអ្វីៗទាំងអស់ជាបែបប្រតិចារិកក្នុងកូដ (MeshStandardMaterial, ពន្លឺ, ពណ៌)។ 5. បន្ថែមពន្លឺចំណុច (PointLight) និងស្រមោលស្រាលៗ។ 6. កំណត់ផ្ទៃខាងក្រោយឲ្យមានពណ៌ងងឹតខ្លាំង។
ជំហានទី ៣៖ ការរត់ និងពិនិត្យមើល
នៅពេល Gemini បង្កើតកូដរួច សូមចម្លងវាពីផ្នែកខាងស្ដាំខាងលើក្នុងប៊ិះកូដ។ បន្តទៅផ្ទាំងទីពីរ (ឧ. CodePen) ហើយបិទភ្ជាប់កូដទាំងមូល ទៅក្នុងប្រអប់ HTML ប៉ុណ្ណោះ (ទុកប្រអប់ CSS និង JS ឲ្យនៅទទេ ពីព្រោះកូដរបស់យើងមានគ្រប់យ៉ាងរួចហើយ)។
គន្លឹះ៖ អ្នកនឹងមើលឃើញវត្ថុ 3D កំពុងបង្វិលភ្លាមៗ។ សាកល្បងចុចលើវាដោយកណ្ដុរ និងអូស — អរគុណដល់ OrbitControls អ្នកអាចបង្វិលវាបាន!
ជំហានទី ៤៖ Iteration នៅពេលពិត
ឥឡូវនេះការងារពិតប្រាកដក្នុងពេលប្រតិកម្មពិតចាប់ផ្តើមហើយ។ ត្រឡប់ទៅ Gemini វិញ។ មិនចាំបាច់សរសេរកូដថ្មីឡើយ ឬផ្ញើកូដចាស់ឲ្យវា (វាចងចាំវាហើយ)។ គ្រប់គ្រាន់ទាល់តែចូលរួមជជែកជាមួយវា ហើយបន្ថែមតម្រូវការបន្តបន្ទាប់។ សាកល្បងផ្ញើសារទាំងនេះដោយលំដាប់៖
អស្ចារ្យណាស់។ ឥឡូវនេះផ្លាស់ប្ដូរវត្ថុឲ្យមានមាតិកាពីពណ៌ពេញទៅជា 'Wireframe' ភ្លឺចាំង (ម៉ូដែលសំណាញ់) ជាពណ៌អូលត្រាខៀវ និងពណ៌ផ្កាឈូកអេនអុង។
ល្អណាស់។ ឥឡូវនេះបន្ថែមប្រព័ន្ធអង្គត់ខ្លីៗ (particle system) មួយដែលបង្វិលយឺតៗ នៅផ្ទៃខាងក្រោយសេន (Points និង PointsMaterial) ដើម្បីបង្កើតអារម្មណ៍ដូចផ្កាយនៅក្នុងអវកាស។
ល្អឥតខ្ចោះ។ ហើយឥឡូវនេះ សូមធ្វើឲ្យពន្លឺប្ដូរពណ៌យ៉ាងរលូនតាមទីតាំងរបស់កណ្ដុរលើអេក្រង់ នៅពេលខ្ញុំផ្លាស់ទីកណ្ដុរ។
ជំហានទី ៥៖ ការដោះស្រាយបញ្ហា (Debugging)
នៅពេលដែលអ្នកកែសម្រួលកូដក្នុងពេលពិត AI ម្តងម្កាលអាចធ្វើកំហុស ហើយលើ CodePen អ្នកនឹងឃើញតែអេក្រង់ខ្មៅ ឬស។ អ្នកមិនចាំបាច់ដឹងកម្មវិធីទេ គ្រាន់តែពិពណ៌នាបញ្ហាក្នុងជជែកជាមួយវា៖
កូដចុងក្រោយដែលអ្នកបានផ្ញើមក មិនដំណើរការទេ។ អេក្រង់ខ្មៅមែនទែន ហើយអ្វីៗមិនបង្វិលទេ។ សូមពិនិត្យមើលថា អ្នកបានផ្ទុក OrbitControls ត្រឹមត្រូវឬអត់ ហើយថាកាមេរ៉ាមិនស្ថិតនៅខាងក្នុងវត្ថុទេ។ ព្យាយាមកែវា ហើយផ្ញើកំណែដែលបានកែបញ្ចប់មកខ្ញុំម្ដងទៀត។
រួចរាល់! ការរក្សាទុកគម្រោង
នៅពេលដែលអ្នកពេញចិត្ត ១០០% ជាមួយលទ្ធផលរួចរាល់ សូមចម្លងកូដចុងក្រោយដែលដំណើរការបានល្អពី CodePen។ នៅលើ Windows បើក Notepad ឬលើ Mac បើក TextEdit បិទភ្ជាប់កូដ ហើយរក្សាទុកឯកសារជា 'muj_3D_web.html'។ រួចរាល់! អ្នកមានកម្មវិធី 3D ផ្ទាល់ខ្លួន។