Načítavam...
Loading scene...

Select Cube

Select Cube

Voice control
Ready

Recognized text: ...

Voice analysis: Gemini AI Gemini Logo

Kocka

Vitajte v interaktívnej demonštrácii KOCKA! Tento projekt ukazuje spojenie moderných webových technológií na vytvorenie pútavého 3D zážitku priamo vo vašom prehliadači.

Použité Technológie a Knižnice:

Jadrom aplikácie je knižnica Three.js využívajúca silu WebGL na vykreslenie detailného 3D modelu kocky. Realistický vzhľad skleneného materiálu je dosiahnutý pomocou fyzikálne založených princípov (PBR) a dynamického osvetlenia scény, ktoré zabezpečujú HDRI mapy. Moderný nástroj Vite.js zabezpečuje rýchly vývoj a optimalizovaný výkon. Logika je napísaná v JavaScripte (ES Modules) a používateľské rozhranie v HTML & CSS. Plynulé animácie, ako pulzovanie kocky, zabezpečuje knižnica Tween.js.

Hlavné Funkcie:

Ovládací panel umožňuje detailnú kontrolu vybraných častí modelu, ktoré možno zvoliť kliknutím alebo cez menu. Môžete meniť farbu, rotáciu (X/Y) a mierku (Z). Dostupné sú rôzne prostredia (HDRI) a pohľad kamery je plne responzívny.

Gemini Logo

Experimentálne Hlasové Ovládanie

Kľúčovou funkciou je hlasové ovládanie využívajúce Web Speech API prehliadača (Chrome/Edge) na rozpoznanie reči (SK/EN). Rozpoznaný text následne analyzuje umelá inteligencia Google Gemini AI (cez bezpečné backendové API), ktorá pochopí zámer príkazu (akcia, cieľ, parametre) aj pri rôznych formuláciách. Frontend potom vykoná príslušnú akciu.

Vytvoril: Vladimír Labát © 2025
Verzia: 0.2 (Vite, Gemini AI Integration)

Cube

Welcome to the interactive demonstration CUBE! This project showcases the combination of modern web technologies to create an engaging 3D experience directly in your browser.

Technologies and Libraries Used:

The core of the application is the Three.js library utilizing the power of WebGL to render a detailed 3D cube model. The realistic appearance of the glass material is achieved using Physically Based Rendering (PBR) and dynamic scene lighting provided by HDRI maps. The modern tool Vite.js ensures fast development and optimized performance. The logic is written in JavaScript (ES Modules), and the user interface in HTML & CSS. Smooth animations, like the cube pulsing, are handled by the Tween.js library.

Main Features:

The control panel allows detailed control over selected parts of the model, which can be chosen by clicking or via the panel menu. You can change the color, rotation (X/Y), and scale (Z). Various environments (HDRI) are available, and the camera view is fully responsive.

Gemini Logo

Experimental Voice Control

A key feature is the voice control implementation using the browser's Web Speech API (Chrome/Edge) for speech recognition (SK/EN). The recognized text is then analyzed by the Google Gemini AI (via a secure backend API), which understands the command's intent (action, target, parameters) even with varied phrasing. The frontend then executes the corresponding action.

Created by: Vladimír Labát © 2025
Version: 0.2 (Vite, Gemini AI Integration)

Nápoveda - Ovládanie

Výber časti:

  • Kliknite myšou priamo na požadovanú časť 3D modelu.
  • Alebo vyberte časť z rozbaľovacieho menu "Cube:"

Ovládací Panel:

  • Nápoveda & Info: Zobrazuje nápovedu a informácie o projekte.
  • Výber & Farba: Tu meníte prostredie - enviroment (HDRI) a vyberáte časť - Cube. Následne môžete kliknúť na farebnú vzorku alebo tlačidlo "Reset" pre farbu vybranej časti.
  • Transformácie: Pomocou posuvníkov meníte rotáciu okolo osi X, Y a mierku v osi Z pre aktuálne vybranú časť. Tlačidlá "Reset" vrátia hodnoty na pôvodné.
  • Hlasové Ovládanie: Stlačte tlačidlo mikrofónu (🎙️) a povedzte povel. Pre fungovanie je potrebný podporovaný prehliadač (Chrome, Edge) a povolenie na použitie mikrofónu. Môžete prepínať jazyk rozpoznávania (SK/EN).

Príklady Hlasových Príkazov (SK):

  • kocka 2 oranžová
  • kocka 4 farba modrá
  • kocka 6 bude zelená
  • daj kocku 1 na zelenú
  • kocka 7 y 90
  • kocka 2 x 50
  • kocka 8 z 1.5
  • nastav mierku kocky 3 na 2
  • kocka 5 veľkosť 1.2
  • kocka 6 reset farby
  • kocka 9 reset mierky
  • kocka 7 reset rotácie

Help - Controls

Selecting a Part:

  • Click the mouse directly on the desired part of the 3D model.
  • Or select a section from the "Cube:" drop-down menu.

Control Panel:

  • Help & Info:Displays help and information about the project.
  • Selection & Color: Change the environment (HDRI) and select a part here. Then, you can click a color swatch or the "Reset" button for the selected part's color.
  • Transforms: Use the sliders to change the rotation around the X and Y axes and the scale along the Z axis for the currently selected part. The "Reset" buttons revert the values to their defaults.
  • Voice Control: Press the microphone button (🎙️) and speak a command. A supported browser (Chrome, Edge) and microphone permission are required. You can switch the recognition language (SK/EN).

Voice Command Examples (EN):

  • cube 7 green
  • cube 4 color blue
  • make cube 1 green
  • cube 7 y 90
  • cube 2 x 60
  • cube 5 z 2
  • set cube 3 scale 2
  • cube 5 size 1.5
  • cube 6 reset color
  • cube 9 reset scale
  • cube 7 reset rotation