https://vijay.eu/tags/3d/Recent content in 3D on Vijay KodamHugo -- gohugo.ioenWed, 10 Jun 2026 12:00:00 +0300https://vijay.eu/projects/retro-racer/Wed, 10 Jun 2026 12:00:00 +0300https://vijay.eu/projects/retro-racer/<div class="retro-racer"> <h1 class="racer-title">Retro Racer</h1> <p class="racer-subtitle">A 3D arcade racer. One lap, against the clock.</p> <div class="racer-frame"> <canvas id="racerCanvas"></canvas> <div class="racer-banner hidden" id="racerBanner" aria-live="polite"></div> <div class="racer-hud" aria-live="off"> <div class="hud-item"> <span class="hud-label">Time</span> <span class="hud-value" id="hudTime">0:00.0</span> </div> <div class="hud-item hud-item--speed"> <span class="hud-label">Speed</span> <span class="hud-value" id="hudSpeed">0 km/h</span> </div> <div class="hud-item"> <span class="hud-label">Progress</span> <span class="hud-value" id="hudProgress">0%</span> </div> </div> <div class="racer-overlay" id="racerStart"> <h2>Retro Racer</h2> <p>Complete one lap as fast as you can. Dodge traffic and stay on the road - grass and crashes will slow you down.</p> <p>Arrow keys or WASD to drive. On touch devices, hold gas/brake with your left thumb and steer with your right.</p> <button class="racer-btn" id="racerStartBtn" type="button" disabled>Start Race</button> <p class="racer-loading" id="racerLoading">Loading 3D assets...</p> <p class="racer-best" id="racerStartBest"></p> </div> <div class="racer-overlay hidden" id="racerResults"> <h2>Finish!</h2> <p class="racer-result-time" id="racerResultTime"></p> <p class="racer-best" id="racerResultBest"></p> <button class="racer-btn" id="racerAgainBtn" type="button">Race Again</button> </div> <div class="racer-cinematic hidden" id="racerCinematic" aria-hidden="true"> <div class="racer-letterbox racer-letterbox--top"></div> <div class="racer-letterbox racer-letterbox--bottom"></div> <div class="racer-flyby-label"> <span class="racer-flyby-name">Mazda Miata</span> <span class="racer-flyby-sub">MX-5 NA</span> </div> <button class="racer-skip-btn" id="racerSkipBtn" type="button">Skip &rsaquo;&rsaquo;</button> </div> </div> <div class="racer-touch"> <div class="touch-cluster touch-cluster--drive" aria-label="Speed controls (left thumb)"> <button class="touch-btn touch-btn--gas" id="racerBtnGas" type="button" aria-label="Accelerate">GAS</button> <button class="touch-btn touch-btn--brake" id="racerBtnBrake" type="button" aria-label="Brake">BRAKE</button> </div> <div class="touch-cluster touch-cluster--steer" aria-label="Steering controls (right thumb)"> <button class="touch-btn touch-btn--arrow" id="racerBtnLeft" type="button" aria-label="Steer left">&larr;</button> <button class="touch-btn touch-btn--arrow" id="racerBtnRight" type="button" aria-label="Steer right">&rarr;</button> </div> </div> <p class="racer-note">Built with vanilla JavaScript and <a href="https://threejs.org/" rel="noopener">three.js</a>. Car models "<a href="https://sketchfab.com/3d-models/mazda-miata-mx-5-na-d51fcd44b74f4daf8012c41e0400c041" rel="noopener">Mazda Miata MX-5 NA</a>" and "<a href="https://sketchfab.com/3d-models/toyota-ae86-trueno-fe02fba6302e450ea8424591493341ea" rel="noopener">Toyota AE86 Trueno</a>" by Lexyc16 on Sketchfab (CC-BY 4.0). Textures and lighting from <a href="https://polyhaven.com/" rel="noopener">Poly Haven</a> (CC0). Your best lap time is stored locally in your browser.</p> </div>https://vijay.eu/projects/car-concept/Sun, 11 Jan 2026 00:00:00 +0300https://vijay.eu/projects/car-concept/<div class="car-concept-container"> <header class="car-header"> <div class="car-header__content"> <h1 class="car-header__title">Hand-Gesture 3D Car Viewer</h1> <p class="car-header__subtitle"><strong>Uses your camera to detect hand gestures</strong> - Open hand to rotate, make a fist and move to zoom</p> </div> <div class="car-header__status"> <span class="status-badge" id="statusHand">Hand: Not detected</span> <span class="status-badge status-badge--muted" id="statusGesture">Use mouse or enable hand tracking</span> </div> </header> <div class="viewer-container"> <canvas id="threeCanvas"></canvas> <div class="loading-overlay" id="loadingOverlay"> <div class="loading-spinner"></div> <p>Loading 3D model...</p> </div> </div> <div class="webcam-preview" id="webcamPreview"> <div class="webcam-preview__stack"> <video id="webcam" playsinline autoplay muted></video> <canvas id="overlay2d"></canvas> </div> <button class="webcam-btn" id="btnWebcam" type="button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="16" height="16"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" /> </svg> Enable Hand Tracking </button> <div class="webcam-error hidden" id="webcamError"></div> </div> <div class="instructions" id="instructions"> <div class="instructions__item"> <span class="instructions__icon">🖱️</span> <span>Drag to rotate, scroll to zoom</span> </div> <div class="instructions__item"> <span class="instructions__icon">✋</span> <span>Open hand: rotate car</span> </div> <div class="instructions__item"> <span class="instructions__icon">✊</span> <span>Fist + move: zoom in/out</span> </div> </div> </div>https://vijay.eu/projects/cricket-bowling/Sat, 10 Jan 2026 10:00:00 +0300https://vijay.eu/projects/cricket-bowling/<div class="cricket-bowling-container"> <header class="cricket-header"> <div class="brand"> <div class="brand__title">Hand-Gesture Cricket</div> <div class="brand__subtitle"><strong>Uses your camera to detect hand gestures</strong> - Grip, bowl, and hit the wickets with real hand motions!</div> </div> <div class="status" aria-live="polite"> <span class="badge badge--phase" id="statusPhase">Ready</span> <span class="badge" id="statusSpeed">Speed: --</span> <span class="badge" id="statusBallType">--</span> <span class="badge badge--score" id="statusScore">Wickets: 0/0</span> <span class="badge badge--muted" id="statusFps">FPS: --</span> </div> </header> <main class="cricket-layout"> <section class="panel"> <div class="panel__header"> <h2 class="panel__title">Camera</h2> <div class="panel__actions"> <button class="btn btn--primary" id="btnWebcam" type="button">Enable webcam</button> <button class="btn" id="btnOverlay" type="button" aria-pressed="true">Overlay: On</button> </div> </div> <div class="media"> <div class="media__stack"> <video id="webcam" playsinline autoplay muted></video> <canvas id="overlay2d" class="overlay2d" aria-hidden="true"></canvas> </div> <div class="hint" id="gameHint"> <strong>How to play:</strong><br> 1. Show your hand to the camera<br> 2. Make a bowling motion (arm forward/down)<br> 3. Release naturally at the end<br> 4. Try to hit the wickets! </div> <div class="result-display hidden" id="resultDisplay"> <div class="result-icon" id="resultIcon"></div> <div class="result-text" id="resultText"></div> <div class="result-details" id="resultDetails"></div> <div class="result-hint">Show hand to bowl again</div> </div> <div class="error hidden" id="cameraError" role="alert"></div> </div> <div class="game-stats"> <div class="stat-row"> <span class="stat-label">Fast balls:</span> <span class="stat-value" id="statFast">0</span> </div> <div class="stat-row"> <span class="stat-label">Spin balls:</span> <span class="stat-value" id="statSpin">0</span> </div> </div> <div class="debug-panel hidden" id="debugPanel"> <div class="debug-header"> <strong>DEBUG MODE</strong> <div> <button class="btn btn--small" id="btnDebugClear" type="button">Clear Recording</button> <button class="btn btn--small" id="btnDebugClose" type="button">X</button> </div> </div> <pre id="debugOutput" style="font-size: 11px; margin: 0; white-space: pre-wrap;"></pre> </div> <button class="btn btn--small" id="btnDebug" type="button" style="margin-top: 8px;">Show Debug</button> </section> <section class="panel"> <div class="panel__header"> <h2 class="panel__title">3D Scene</h2> <div class="panel__actions"> <button class="btn" id="btnReset" type="button">Reset Game</button> </div> </div> <div class="scene"> <canvas id="threeCanvas"></canvas> </div> <footer class="cricket-footer"> <span class="muted">Tip: Good lighting helps hand tracking. Works best on Chrome/Safari.</span> </footer> </section> </main> </div>