360°
Panoramic View

Three.js 3D Rendering Engine

Uses Three.js 0.163 as the core rendering engine, loaded from CDN via ES Module Import Map with no bundling tools required. The renderer enables ACES Filmic Tone Mapping (exposure 1.2) and PCF Soft Shadow Map to achieve cinematic lighting quality.

The scene incorporates FogExp2 exponential fog (density 0.012) to create a deep-sea depth-of-field atmosphere. The camera uses PerspectiveCamera (FOV 45°) paired with OrbitControls for drag rotation (damping factor 0.06) and scroll zoom (distance 4–18).

3D Model Construction

The LED fishing light is built entirely through procedural modeling (Procedural Modeling) with no external 3D files. The main body consists of CylinderGeometry (32-sided smooth cylinder), with separate geometries for the top and bottom caps. The hook uses TorusGeometry, and the cable is generated with Catmull-Rom curves combined with TubeGeometry.

Eight LED panels are arranged in a circular pattern using BoxGeometry (angle = i/8 × 2π), with MeshPhysicalMaterial featuring emissive (self-illumination), transmission: 0.3 (glass refraction), and opacity: 0.95 (semi-transparency). Seven glow rings are stacked using TorusGeometry with opacity 0.3 for a soft halo effect.

Real-time Lighting & Animation System

Dynamic lighting consists of 4 ring-arranged PointLights + 1 central PointLight, with intensity adjustable in real-time via the brightness slider. Ambient light (0x1a2a4a) and directional light (0x4466aa) provide base illumination.

LED panels use a sine wave pulse animation (2 Hz) to simulate a breathing light effect: pulse = 0.85 + sin(t×2) × 0.15. The underwater scene uses dual-frequency sin/cos waveforms to produce realistic waves, combined with a particle system (continuous upward float animation) to create underwater bubble effects.

Interactive Controls

Six interactive controls are provided: auto-rotation (1.5°/frame), lights on/off (emissive intensity 0–2.5), underwater scene (wavy plane + particle effects), X-ray perspective (wireframe + opacity 0.15), light color selection (green/blue/white/yellow/red instant switch), and brightness slider (0–100% continuous adjustment).

When switching colors, all visual elements update simultaneously: LED panel color/emissive, PointLight color, glow ring emissive, and particle system colors, ensuring visual consistency.

Performance Optimization

Pixel Ratio is capped at Math.min(devicePixelRatio, 2) to prevent excessive rendering on high-DPI devices. The 3D Canvas only covers the Hero section (not full page) to reduce GPU load. Camera damping (dampingFactor 0.06) provides smooth inertia-based interaction, while FogExp2 naturally clips distant objects to reduce draw calls.

Geometries use a sharing strategy — glow rings are created once and repositioned multiple times, cooling fins share the same BoxGeometry, while materials are independent instances per element to avoid state pollution. Animations are driven by Clock-based Delta Time to ensure consistent animation speed across different frame rates.

Page Architecture & Deployment

The page is developed with pure HTML5 + CSS3 + JavaScript ES Module, no framework or bundling tools. Three.js is loaded via Import Map from jsDelivr CDN. CSS uses CSS Grid / Flexbox layout with Glassmorphism (blur 12–16px) panel styling.

Responsive design uses 768px as the breakpoint, switching to single-column layout and collapsible navigation on mobile. Deployed on Netlify with static files published directly (no build step), configured with X-Frame-Options: DENY and X-Content-Type-Options: nosniff security headers.