ec6dc0aa01
Some checks failed
CI / validate (pull_request) Has been cancelled
Implement Three.js scene with procedural lens flare using CanvasTexture: - Build radial glow, star-burst streak, ring, dot, and hex aperture textures from canvas draws — no image assets required - Attach Lensflare + LensflareElement chain to the sun PointLight; Three.js handles screen-space projection and occlusion automatically - Sun arcs slowly across sky, so flare angle and ghost positions shift over time giving a live optical effect - Add starfield (4 000 points), grid floor, and portal rings loaded from portals.json to give the flare context in a real 3D scene - Wire audio toggle, chat panel, and WebSocket events Fixes #109 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
59 lines
2.0 KiB
HTML
59 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Timmy's Nexus</title>
|
|
<meta name="description" content="A sovereign 3D world — Timmy's home in space">
|
|
<meta property="og:title" content="Timmy's Nexus">
|
|
<meta property="og:description" content="A sovereign 3D world">
|
|
<meta property="og:image" content="https://example.com/og-image.png">
|
|
<meta property="og:type" content="website">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Timmy's Nexus">
|
|
<meta name="twitter:description" content="A sovereign 3D world">
|
|
<meta name="twitter:image" content="https://example.com/og-image.png">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js",
|
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id="nexus-canvas"></canvas>
|
|
|
|
<!-- HUD: Portal labels -->
|
|
<div id="hud" aria-label="Nexus HUD">
|
|
<div id="hud-title">Timmy's Nexus</div>
|
|
<div id="hud-hint">Drag to orbit · Scroll to zoom</div>
|
|
</div>
|
|
|
|
<!-- Top Right: Audio Toggle -->
|
|
<div id="audio-control">
|
|
<button id="audio-toggle" aria-label="Toggle ambient sound">🔊</button>
|
|
<audio id="ambient-sound" src="ambient.mp3" loop></audio>
|
|
</div>
|
|
|
|
<!-- Chat Panel -->
|
|
<div id="chat-panel" aria-label="Chat">
|
|
<div id="chat-messages"></div>
|
|
<form id="chat-form" autocomplete="off">
|
|
<input id="chat-input" type="text" placeholder="Message…" maxlength="200">
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Loading Screen -->
|
|
<div id="loading-screen" aria-live="polite">
|
|
<div id="loading-text">Entering the Nexus…</div>
|
|
</div>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|