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

// Direct GLB Logo loader - simplest approach
console.log('Loading direct GLB logo script...');

// Logo instances storage
const logoInstances = new Map();
let darkMaterial, lightMaterial;

// Simple script loader helper
function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

async function loadThreeJS() {
  try {
    console.log('Loading Three.js from CDN...');
    await loadScript('https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js');
    console.log('Three.js loaded');
    
    console.log('Loading GLTFLoader...');
    await loadScript('https://threejs.org/examples/js/loaders/GLTFLoader.js');
    console.log('GLTFLoader loaded');
    
    return true;
  } catch (error) {
    console.error('Failed to load Three.js:', error);
    return false;
  }
}

function createMaterials() {
  console.log("Creating materials for GLB model...");
  
  darkMaterial = new THREE.MeshPhongMaterial({
    color: 0x453d2e, // Sand color for dark theme
    shininess: 100,
    specular: 0x333333
  });

  lightMaterial = new THREE.MeshPhongMaterial({
    color: 0x0b0213, // Dark Mulberry for light theme
    shininess: 80,
    specular: 0x222222
  });

  console.log("Materials created successfully");
}

async function initDirectLogo(canvas) {
  console.log('initDirectLogo called for canvas:', canvas);
  
  const scene = new THREE.Scene();
  console.log('Scene created');
  
  // Create materials if not created yet
  if (!darkMaterial || !lightMaterial) {
    console.log('Creating materials...');
    createMaterials();
    console.log('Materials created');
  }

  // Get canvas dimensions
  const computedStyle = window.getComputedStyle(canvas);
  let width = parseInt(computedStyle.width) || canvas.width || 200;
  let height = parseInt(computedStyle.height) || canvas.height || 200;
  
  // Force square dimensions for proper Möbius ring rendering
  const size = Math.max(width, height);
  width = size;
  height = size;

  // Initialize renderer
  const renderer = new THREE.WebGLRenderer({ 
    canvas: canvas, 
    antialias: true, 
    alpha: true 
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  renderer.setClearColor(0x000000, 0);

  console.log('Renderer initialized with size:', { width, height });

  // Set up camera
  const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
  camera.position.set(0, 0, 1.8);
  camera.lookAt(0, 0, 0);

  // Sophisticated lighting setup
  const mainLight = new THREE.PointLight(0xffffff, 1.4);
  mainLight.position.set(0, 4, 1);
  scene.add(mainLight);

  const bottomLight = new THREE.PointLight(0x800080, 1.2, 12);
  bottomLight.position.set(0, -4, 1);
  scene.add(bottomLight);

  const leftLight = new THREE.PointLight(0x808000, 1.45, 5);
  leftLight.position.set(-5, 0, 4);
  scene.add(leftLight);

  scene.add(new THREE.AmbientLight(0xffffff, 0.45));

  let mobius = null;

  // Try to load the GLB file
  console.log('Attempting to load GLB file...');
  
  try {
    if (THREE.GLTFLoader) {
      console.log('GLTFLoader is available, loading GLB...');
      const loader = new THREE.GLTFLoader();
      
      const gltf = await new Promise((resolve, reject) => {
        loader.load(
          "/logos/mobius-ring.glb",
          resolve,
          (progress) => {
            if (progress.total > 0) {
              console.log("GLB loading progress:", Math.round(progress.loaded / progress.total * 100) + '%');
            }
          },
          reject
        );
      });

      console.log("GLB loaded successfully for canvas:", canvas);
      console.log("GLB scene:", gltf.scene);
      mobius = gltf.scene;
      
      let meshCount = 0;
      mobius.traverse((child) => {
        if (child.isMesh) {
          // Start with dark theme material (default)
          child.material = darkMaterial.clone();
          meshCount++;
        }
      });
      console.log(`Applied materials to ${meshCount} meshes`);
      
      scene.add(mobius);
      console.log('Möbius GLB model added to scene');
      
      // Initialize with current theme state
      const isDark = document.documentElement.classList.contains('dark');
      console.log('Current theme is dark:', isDark);
      updateCanvasMaterial(mobius, isDark);

    } else {
      throw new Error('GLTFLoader not available');
    }

  } catch (err) {
    console.error("Error loading GLB logo:", err);
    console.log('Creating fallback Möbius ring geometry...');
    
    // Create fallback procedural Möbius ring
    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 fallbackGeometry = new THREE.ParametricGeometry(mobiusFunction, 50, 50);
    const fallbackMesh = new THREE.Mesh(fallbackGeometry, darkMaterial.clone());
    scene.add(fallbackMesh);
    mobius = fallbackMesh;
    
    console.log('Fallback Möbius geometry created');
  }

  // Animation loop
  function animate() {
    requestAnimationFrame(animate);

    if (mobius) {
      // Elegant rotation
      mobius.rotation.x += 0.005;
      mobius.rotation.y += -0.008;
      mobius.rotation.z += -0.003;
    }

    renderer.render(scene, camera);
  }

  animate();
  console.log('Animation loop started');

  // Store instance
  const instance = {
    canvas,
    renderer,
    scene,
    camera,
    mobius: () => mobius,
    setMobius: (mobiusScene) => { mobius = mobiusScene; }
  };

  logoInstances.set(canvas, instance);
  
  return instance;
}

function updateCanvasMaterial(mobius, isDark) {
  if (mobius) {
    const targetMaterial = isDark ? darkMaterial : lightMaterial;
    console.log(`Updating material to:`, isDark ? 'dark' : 'light');
    
    let meshCount = 0;
    if (mobius.traverse) {
      mobius.traverse((child) => {
        if (child.isMesh) {
          child.material = targetMaterial.clone();
          meshCount++;
        }
      });
    } else if (mobius.isMesh) {
      mobius.material = targetMaterial.clone();
      meshCount = 1;
    }
    console.log(`Updated ${meshCount} mesh materials`);
  }
}

// Initialize all canvas elements with chorus-logo class
async function initAllDirectLogos() {
  console.log('initAllDirectLogos called - looking for canvas.chorus-logo elements');
  
  // First load Three.js
  const loaded = await loadThreeJS();
  if (!loaded) {
    console.error('Failed to load Three.js, cannot initialize logos');
    return;
  }
  
  console.log('Three.js loaded successfully');
  
  const canvases = document.querySelectorAll("canvas.chorus-logo");
  console.log(`Found ${canvases.length} canvas elements with chorus-logo class`);
  
  // Initialize all canvases
  for (let i = 0; i < canvases.length; i++) {
    const canvas = canvases[i];
    console.log(`Initializing direct logo ${i} for canvas:`, canvas);
    try {
      await initDirectLogo(canvas);
    } catch (error) {
      console.error(`Failed to initialize logo ${i}:`, error);
    }
  }
  
  console.log('All direct logos processing complete');
}

// Function to update all logo materials based on theme
function updateAllLogoMaterials(isDark) {
  console.log(`updateAllLogoMaterials called with isDark: ${isDark}`);
  console.log(`Number of logo instances: ${logoInstances.size}`);
  
  logoInstances.forEach((instance, canvas) => {
    const mobius = instance.mobius();
    console.log(`Updating logo instance for canvas:`, canvas, `mobius exists:`, !!mobius);
    if (mobius) {
      updateCanvasMaterial(mobius, isDark);
    }
  });
}

// Export functions for global access
window.updateAllLogoMaterials = updateAllLogoMaterials;
window.initAllDirectLogos = initAllDirectLogos;

console.log('Direct GLB logo script loaded, initAllDirectLogos available');