chorus-services/brand-assets/brand-style-guide-site/public/logo-simple.js

// Simple Three.js logo implementation - not using ES modules
console.log('Loading simple Three.js logo script...');

// Wait for Three.js to load from CDN
function waitForThreeJS(callback) {
  if (typeof THREE !== 'undefined') {
    console.log('Three.js is available');
    callback();
  } else {
    console.log('Waiting for Three.js to load...');
    setTimeout(() => waitForThreeJS(callback), 100);
  }
}

// Simple logo initialization without external dependencies
function initSimpleLogo(canvas) {
  console.log('initSimpleLogo called for canvas:', canvas);
  
  // Get canvas dimensions
  const width = canvas.clientWidth || canvas.width || 64;
  const height = canvas.clientHeight || canvas.height || 64;
  
  console.log('Canvas dimensions:', { width, height });
  
  try {
    // Create basic Three.js scene
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
    const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true });
    
    renderer.setSize(width, height);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(0x000000, 0);
    
    console.log('Three.js setup complete');
    
    // Create a Möbius ring using parametric geometry
    function mobiusFunction(u, v, target) {
      u = u - 0.5;
      v = v * 2 * Math.PI;
      
      const majorRadius = 0.6;
      const minorRadius = 0.2;
      
      const x = (majorRadius + minorRadius * Math.cos(v / 2) * u) * Math.cos(v);
      const y = (majorRadius + minorRadius * Math.cos(v / 2) * u) * Math.sin(v);
      const z = minorRadius * Math.sin(v / 2) * u;
      
      target.set(x, y, z);
    }
    
    const geometry = new THREE.ParametricGeometry(mobiusFunction, 50, 50);
    
    // Create elegant metallic material - fallback to MeshPhongMaterial if MeshPhysicalMaterial not available
    let material;
    if (THREE.MeshPhysicalMaterial) {
      material = new THREE.MeshPhysicalMaterial({
        color: 0x453d2e, // Sand color for dark theme
        roughness: 0.24,
        metalness: 1.0,
        clearcoat: 0.48,
        clearcoatRoughness: 0.15,
        reflectivity: 1.2
      });
      console.log('Using MeshPhysicalMaterial for enhanced appearance');
    } else {
      material = new THREE.MeshPhongMaterial({
        color: 0x453d2e,
        shininess: 100,
        specular: 0x222222
      });
      console.log('Using MeshPhongMaterial fallback');
    }
    
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    
    // Add sophisticated lighting setup for metallic appearance
    const mainLight = new THREE.DirectionalLight(0xffffff, 1.2);
    mainLight.position.set(2, 2, 3);
    scene.add(mainLight);
    
    const fillLight = new THREE.DirectionalLight(0x8080ff, 0.3);
    fillLight.position.set(-1, -1, 1);
    scene.add(fillLight);
    
    const rimLight = new THREE.DirectionalLight(0xffaa80, 0.5);
    rimLight.position.set(0, 0, -2);
    scene.add(rimLight);
    
    const ambientLight = new THREE.AmbientLight(0x202040, 0.3);
    scene.add(ambientLight);
    
    // Position camera
    camera.position.z = 2;
    
    console.log('Möbius ring created and added to scene');
    
    // Animation loop - elegant slow rotation to show Möbius topology
    function animate() {
      requestAnimationFrame(animate);
      
      // Smooth rotation that shows the continuous surface
      mesh.rotation.x += 0.005;
      mesh.rotation.y += 0.008;
      mesh.rotation.z += 0.003;
      
      renderer.render(scene, camera);
    }
    
    animate();
    console.log('Animation started');
    
    return true;
    
  } catch (error) {
    console.error('Error creating simple logo:', error);
    return false;
  }
}

// Initialize all logos with simple approach
function initAllSimpleLogos() {
  console.log('initAllSimpleLogos called');
  
  // Load Three.js from CDN first
  if (typeof THREE === 'undefined') {
    console.log('Loading Three.js from CDN...');
    
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js';
    script.onload = function() {
      console.log('Three.js loaded from CDN');
      waitForThreeJS(() => {
        const canvases = document.querySelectorAll('canvas.chorus-logo');
        console.log(`Found ${canvases.length} canvas elements`);
        
        canvases.forEach((canvas, index) => {
          console.log(`Initializing simple logo ${index}`);
          initSimpleLogo(canvas);
        });
      });
    };
    script.onerror = function() {
      console.error('Failed to load Three.js from CDN');
    };
    document.head.appendChild(script);
  } else {
    waitForThreeJS(() => {
      const canvases = document.querySelectorAll('canvas.chorus-logo');
      console.log(`Found ${canvases.length} canvas elements`);
      
      canvases.forEach((canvas, index) => {
        console.log(`Initializing simple logo ${index}`);
        initSimpleLogo(canvas);
      });
    });
  }
}

// Export to global scope
window.initAllSimpleLogos = initAllSimpleLogos;

console.log('Simple logo script loaded, initAllSimpleLogos available');