Тақырыбы: Веб-камера және қол қимылдары арқылы басқарылатын «ҰЛТТЫҚ АСПАПТАР» веб-қосымшасын жасау.

Негізгі мақсат: Пайдаланушы экран алдында қолын қозғалту арқылы 3D аспапты айналдырып, үлкейтіп, олармен өзара әрекеттесе алатын интерфейс құру.

Техникалық стек:

• Three.js: Аспаптың 3D модельдерін (GLTF/GLB форматтары) жүктеу және көрсету үшін.

• MediaPipe Hands: Саусақтардың қозғалысын нақты уақытта (real-time) тану үшін.

Интерфейс құрылымы (UI):

1. Сол жақ мәзір (Аспаптар тізімі): «ҰЛТТЫҚ АСПАПТАР» деген тақырыппен келесі аспаптардың тізімін жаса: ДОМБЫРА, ЖЕТІГЕН, ҚОБЫЗ. Әр аспапты басқанда ортада оның автор енгізген 3д моделі пайда болуы керек.

2. Орталық 3D сахна: Фонды қазақи нақыштағы әдемі ашық көк түсте жаса.

3. Басқару терезесі (Нұсқаулық): Камера терезесінің жанында қазақ тіліндегі мынадай нұсқаулар тұруы керек:

   • ☝️ Бір саусақ (Сұқ саусақ): Жануарды өз осінен айналдыру.

   • ✊ Жұдырық: Жануарды алыстату (Кішірейту).

   • ?️ Ашық алақан: Жануарды жақындату (Үлкейту).

   • ? «Рок» белгісі (Сұқ саусақ пен шынашақ): автор енгізген аудио іске қосылуы керек.

Аспаптардың 3д нысаны ссылкадан алынсын. Аспаптар сайттың сол жағында орналассын. Камера сайттың оң жақ жоғарғы жағында тұрсын. Жеке ұяшықтар сол жақтағы домбыра ұяшығының астында болсын. Сайттың ортасы ашық болсын және үлкен 3д нысан сол жерде орналассын.

ДОМБЫРА https://github.com/kamilaadisqyzy-cmyk/kamila/blob/main/%D0%94%D0%BE%D0%BC%D0%B1%D1%8B%D1%80%D0%B0.glb

Аудио: https://vibe-coding.diaoft.kz/uploads/audio_69cbc1ba23ec1.mp3

Аспаптың астында бөлек ұяшықтар орналассын. «ПАЗЛ», «ҚЫЗЫҚТЫ АҚПАРАТ», «ТАПСЫРМА»

1. «ПАЗЛ» ұяшығын басқан кезде ссылкада орналасқан суреттің 9 бөлікке бөлінген пазлы шығуы керек. Автор қолының көмегімен суретті құрастыруы тиіс. Сурет дұрыс құрастырылғаннан кейін, суреттің дұрыс нұсқасы анық көрініп, астында «ӨТЕ ЖАҚСЫ, ЖАРАЙСЫҢ!» деген қошемет сөз болсын.

ПАЗЛ СУРЕТІ: https://vibe-coding.diaoft.kz/uploads/img_69cbbd095f3a9.png

2. «ҚЫЗЫҚТЫ АҚПАРАТ» ұяшығын басқан кезде домбыра аспабы туралы төменде берілген ақпарат шығуы керек. Ақпарат әртүрлі тақырыпқа сай смайликтер арқылы әдемі болып берілсін.

Ақпарат: Домбыра — қазақ халқының ең көне және кең тараған ұлттық музыкалық аспабы. Ол ішекті-шертпелі аспапқа жатады және көбіне күй орындауға қолданылады. Домбыра – қазақтың рухы мен мәдениетінің символы.

Домбыраның тарихы мыңдаған жылдарға созылады. Археологиялық деректерге қарағанда, домбыраға ұқсас аспаптар ерте замандарда-ақ болған.
Қазақ даласында бұл аспап жыраулар мен күйшілердің негізгі құралына айналды.

Белгілі күйшілер:

• Құрманғазы Сағырбайұлы

• Дәулеткерей Шығайұлы

• Тәттімбет Қазанғапұлы

Домбыра негізінен ағаштан жасалады және бірнеше бөліктен тұрады:

• Шанақ – дыбыс шығаратын негізгі бөлік

• Мойын – пернелер орналасқан ұзын бөлік

• Перне – дыбысты өзгертуге арналған бөліктер

• Ішек – көбіне 2 ішекті болады

• Құлақ – ішекті бұрап, дыбысын реттейді

3. «ТАПСЫРМА» ұяшығын басқан кезде «ДОМБЫРА» аспабы туралы қызықты 5 тест шықсын. Әр тест тапсырмасына жеке жауап берсін. Яғни, бірінші сұраққа жауап бергеннен кейін екінші тест ашылсын.

«ҚОБЫЗ» https://github.com/kamilaadisqyzy-cmyk/glb/blob/main/ornate%20sword%20sculpture%203d%20model.glb

Функционалдық талаптар:

• Кодты HTML, CSS және JavaScript (ES6+) тілдерінде жазып бер.

• Камерадан қолдың нүктелерін (Skeleton) сызып көрсету функциясын қос.

• Жануарлар модельдерін жүктеу үшін еркін қолжетімді CDN сілтемелерін немесе бос орын иелерін (placeholder) қолдан.

• Дизайн футуристік, бірақ табиғат элементтерімен үйлескен (Eco-Tech style) болуы қажет.

• Барлық мәтіндер мен батырмалар қазақ тілінде жазылсын.