Oracle 3D

🇺🇸 English Version

Oracle is a visual experiment built with HTML5, CSS, and Three.js. It features an interactive 360° sphere that dynamically reacts to mouse movements. The project was developed purely as a technical challenge to demonstrate proficiency in visual mathematics, advanced styling, and web ecosystem performance.

Features

• 360° Interactivity: The 3D mesh smoothly responds to click-and-drag movements on both X and Y axes.
• Physics and Inertia (Lerp): Implementation of friction and deceleration calculations to ensure continuous, natural movement after the mouse is released.
• Click Impulse: Upon clicking and releasing, the sphere undergoes a rapid elastic scale expansion combined with an immediate burst of rotational velocity.
• Dynamic Lighting & Materials: Combined use of HemisphereLight, DirectionalLight, and PointLight interacting with a MeshPhysicalMaterial for realistic light reflections and textures.

Technologies Used

• HTML5: Semantic structure and scene boundary delineation.
• CSS3: Native variables, color modulation in color-scheme, and fluid design.
• JavaScript (ES6+): Directional state logic and mathematical vectors for mouse tracking.
• Three.js (v0.165.0): Advanced rendering via WebGL, geometry management (SphereGeometry, Points), materials, camera, and lighting system.

🇧🇷 Versão em Português

Funcionalidades

• Interatividade em 360°: A malha 3D reage aos movimentos de clique e arrasto (drag) do ponteiro de forma fluida nos eixos X e Y.
• Física e Inércia (Lerp): Implementação de cálculos de atrito e desaceleração para garantir um movimento contínuo e natural após a liberação do mouse.
• Impulso de Clique: Ao clicar e soltar, a esfera sofre uma rápida expansão escalar elástica combinada com um ganho imediato de velocidade rotacional.
• Iluminação e Materiais Dinâmicos: Uso combinado de HemisphereLight, DirectionalLight e PointLight interagindo com um MeshPhysicalMaterial para reflexos de luz e textura realistas.

Tecnologias Utilizadas

• HTML5: Estrutura semântica e demarcação da cena.
• CSS3: Variáveis nativas, modulação de cores em color-scheme e design fluido.
• JavaScript (ES6+): Lógica de estado direcional e vetores matemáticos para o rastreamento do mouse.
• Three.js (v0.165.0): Renderização avançada via WebGL, controle de geometrias (SphereGeometry, Points), materiais e sistema de câmera e iluminação.