feat: Implement proper Three.js logo system with custom environment mapping

- Replace CDN-based Three.js with npm packages for reliable loading - Add DRACO loader support for compressed GLB files - Implement custom horizon gradient environment mapping - Use exact material properties from reference logo.html (MeshPhysicalMaterial) - Apply proper metallic sheen, clearcoat, and reflectivity settings - Fix camera positioning and canvas sizing to prevent clipping - Maintain square aspect ratio for consistent logo display - Load user's mobius-ring.glb with fallback torus geometry 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-24 14:13:29 +10:00
parent e73df0b20d
commit d83dbdce46
3819 changed files with 32899 additions and 0 deletions
--- a/brand-assets/brand-style-guide-site/public/test-logo.html
+++ b/brand-assets/brand-style-guide-site/public/test-logo.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Three.js Logo Test</title>
+    <style>
+        body { 
+            font-family: Arial, sans-serif; 
+            background: #1a1a1a;
+            color: white;
+            padding: 20px;
+        }
+        .logo-container {
+            border: 1px solid #666;
+            padding: 20px;
+            margin: 20px 0;
+            display: inline-block;
+        }
+        canvas {
+            border: 1px solid #999;
+        }
+        .log {
+            background: #000;
+            padding: 10px;
+            margin-top: 20px;
+            font-family: monospace;
+            white-space: pre-wrap;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>Three.js Logo Test</h1>
+    
+    <div class="logo-container">
+        <h3>200x200 Logo Test</h3>
+        <canvas class="chorus-logo" width="200" height="200"></canvas>
+    </div>
+    
+    <div class="logo-container">
+        <h3>64x64 Logo Test</h3>
+        <canvas class="chorus-logo" width="64" height="64"></canvas>
+    </div>
+    
+    <div class="log" id="log">Console output will appear here...\n</div>
+    
+    <script>
+        // Override console.log to show in page
+        const originalLog = console.log;
+        const originalError = console.error;
+        const logDiv = document.getElementById('log');
+        
+        function addLog(type, ...args) {
+            const message = args.map(arg => 
+                typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
+            ).join(' ');
+            logDiv.textContent += `[${type}] ${new Date().toLocaleTimeString()}: ${message}\n`;
+            logDiv.scrollTop = logDiv.scrollHeight;
+        }
+        
+        console.log = (...args) => {
+            originalLog(...args);
+            addLog('LOG', ...args);
+        };
+        
+        console.error = (...args) => {
+            originalError(...args);
+            addLog('ERROR', ...args);
+        };
+        
+        // Load the local GLB logo script
+        console.log('Loading local GLB Three.js logo script...');
+        
+        const script = document.createElement('script');
+        script.src = '/logo-local.js';
+        script.onload = function() {
+            console.log('Local GLB Script loaded successfully');
+            
+            setTimeout(() => {
+                if (window.initAllLocalLogos) {
+                    console.log('Calling initAllLocalLogos...');
+                    window.initAllLocalLogos();
+                } else {
+                    console.error('initAllLocalLogos not found on window');
+                }
+            }, 100);
+        };
+        script.onerror = function(error) {
+            console.error('Script failed to load:', error);
+        };
+        
+        document.head.appendChild(script);
+    </script>
+</body>
+</html>