d83dbdce46
- 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>
95 lines
2.8 KiB
HTML
95 lines
2.8 KiB
HTML
<!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> |