ជំហានទី 1៖ រៀបចំបរិយាកាស

អ្នកមិនចាំបាច់ដំឡើងអ្វីលើកុំព្យូទ័ររបស់អ្នកទេ។ ដំណើរការទាំងមូលនឹងរត់នៅក្នុងកម្មវិធីរុករក។ សម្រាប់ការធ្វើបច្ចុប្បន្នភាពរហ័សបំផុត សូមបើកផ្ទាំងពីរនៅក្បែរគ្នា៖

បើក Google Gemini (gemini.google.com) ដែលឥតគិតថ្លៃ។
បើកកម្មវិធីនិពន្ធកូដលើបណ្តាញ CodePen.io ឬ PlayCode.io។ នៅទីនេះយើងនឹងសាកល្បងកូដដែលបានបង្កើតឡើងភ្លាមៗ ដោយមិនចាំបាច់បង្កើត និងរក្សាទុកឯកសារ HTML ទេ។

2

ជំហានទី 2៖ 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) ក្នុង script tag។ 3. វាត្រូវតែជា 'Single file' – អ្វីៗទាំងអស់នៅក្នុងកូដតែមួយ បំពាននឹងមិនអនុញ្ញាតឱ្យមាន import maps ទេ។ 4. កុំប្រើម៉ូដែលខាងក្រៅ (GLTF) ឬផ្ទៃខាងក្រៅ (JPG/PNG)។ បង្កើតអ្វីៗទាំងអស់ពីប្រតិបត្តិការក្នុងកូដ (MeshStandardMaterial, ពន្លឺ, ពណ៌)។ 5. បន្ថែមពន្លឺចំណុច (PointLight) និងស្រមោលទន់ៗ។ 6. កំណត់ផ្ទៃខាងក្រោយឱ្យមានពណ៌ងងឹតខ្លាំង។

3

ជំហានទី 3៖ ដំណើរការ និងពិនិត្យ

នៅពេល Gemini បង្កើតកូដរួច សូមចម្លងវាពីជ្រុងខាងស្តាំខាងលើនៃប្រអប់កូដ។ បន្តទៅផ្ទាំងទីពីរ (ឧ. CodePen) ហើយបិទភ្ជាប់កូដទាំងមូល ទៅក្នុងប្រអប់ HTML ប៉ុណ្ណោះ (ទុកប្រអប់ CSS និង JS ឱ្យនៅទទេ ព្រោះកូដរបស់យើងមានអ្វីៗទាំងអស់រួចហើយ)។

គន្លឹះ៖ អ្នកនឹងឃើញវត្ថុ 3D កំពុងបង្វិលភ្លាមៗ។ សាកល្បងចុចវាដោយកណ្តុរ និងអូស – ដោយសារតែ OrbitControls អ្នកអាចបង្វិលវាបាន!

4

ជំហានទី 4៖ Iteration ពេលវេលាជាក់ស្តែង

ឥឡូវនេះការងារពិតប្រាកដក្នុងពេលវេលាជាក់ស្តែងចាប់ផ្តើមហើយ។ ត្រឡប់ទៅ Gemini វិញ។ មិនចាំបាច់សរសេរកូដថ្មី ឬផ្ញើកូដចាស់ឱ្យវាទេ (វាចងចាំរួចហើយ)។ គ្រាន់តែជជែកជាមួយវា ហើយបន្ថែមតម្រូវការទៅៗ។ សាកល្បងផ្ញើសារទាំងនេះជាលំដាប់៖

វាខ្លាំងណាស់។ ឥឡូវនេះ សូមបម្លែងសមាសធាតុរបស់វត្ថុពីពណ៌ពេញ ទៅជា 'Wireframe' ភ្លឺចែងចាំង (ម៉ូដែលបណ្តាញ) មានពណ៌នេអុងខៀវ និងផ្កាឈូក។

ល្អណាស់។ ឥឡូវនេះ សូមបន្ថែមប្រព័ន្ធភាគល្អិតមួយ (Points និង PointsMaterial) ដែលបង្វិលយឺតៗនៅផ្ទៃខាងក្រោយឆាក ដើម្បីបង្កើតស្ថានភាពដូចផ្កាយក្នុងលំហអវកាស។

អស្ចារ្យណាស់។ ឥឡូវនេះ សូមធ្វើឱ្យពេលខ្ញុំរំកិលកណ្តុរ ពណ៌ពន្លឺនានា ប្តូរយ៉ាងរលូនតាមទីតាំងរបស់ទស្សន៍ទ្រនិចលើអេក្រង់។

5

ជំហានទី 5៖ ដោះស្រាយបញ្ហា (Debugging)

នៅពេលអ្នកកែកូដក្នុងពេលវេលាជាក់ស្តែង អ៊ីអេអាចធ្វើកំហុស ហើយនៅលើ CodePen អ្នកនឹងឃើញតែអេក្រង់ខ្មៅ ឬសតែប៉ុណ្ណោះ។ អ្នកមិនចាំបាច់ដឹងអំពីកូដទេ គ្រាន់តែពិពណ៌នាបញ្ហានៅក្នុងការជជែកជាមួយវា៖

កូដចុងក្រោយដែលអ្នកបានផ្ញើ មិនដំណើរការទេ។ អេក្រង់ខ្មៅទាំងស្រុង ហើយគ្មានអ្វីបង្វិលទេ។ សូមពិនិត្យមើលថាតើអ្នកបានបញ្ចូល OrbitControls ត្រឹមត្រូវឬអត់ និងថាតើកាមេរ៉ាមិនស្ថិតនៅខាងក្នុងវត្ថុនោះទេ។ សាកល្បងកែវា ហើយផ្ញើឱ្យខ្ញុំជាកំណែពេញលេញដែលបានកែរួច។

រួចរាល់! រក្សាទុកគម្រោង

នៅពេលអ្នកត្រូវចិត្ត 100% ជាមួយលទ្ធផលរួច សូមចម្លងកូដដែលដំណើរការល្អចុងក្រោយពី CodePen។ លើ Windows បើក Notepad ឬលើ Mac បើក TextEdit បិទភ្ជាប់កូដ ហើយរក្សាទុកឯកសារជា 'muj_3D_web.html'។ រួចរាល់! អ្នកមានកម្មវិធី 3D ផ្ទាល់ខ្លួនរួចហើយ។

ផែនការ Real-time៖ 3D Gemini

ការចូលប្រើកម្មវិធីត្រូវបានចាក់សោ

Real-time ផែនការ៖ វេបសាយ 3D តាមរយៈ Gemini