Trek logosu artik 3D plane mesh, Spine bone'a attach edili — avatar ile birlikte hareket eder. SVG runtime canvas->beyaza cevriliyor

static/index.html

@@ -46,19 +46,6 @@
     border-color: rgba(52,211,153,0.7);
     box-shadow: 0 0 30px rgba(52,211,153,0.35);
   }
-  .trek-logo {
-    position: absolute;
-    bottom: 17%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: clamp(70px, 22%, 110px);
-    height: auto;
-    /* SVG'yi siyahtan beyaza cevir + drop shadow */
-    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
-    pointer-events: none;
-    z-index: 5;
-    user-select: none;
-  }
   .loading {
     position: absolute;
     inset: 0;
@@ -135,7 +122,6 @@
   <div class="stage">
     <canvas id="avatarCanvas"></canvas>
     <div id="ring" class="ring"></div>
-    <img class="trek-logo" src="/static/trek-logo.svg" alt="Trek" />
     <div id="loading" class="loading">
       <div class="spinner"></div>
       <div>Avatar yukleniyor...</div>
@@ -169,6 +155,7 @@ let scene, camera, renderer, clock;
 let avatar = null;
 let morphMeshes = [];       // Morph target'i olan TUM mesh'ler
 let headBone = null;
+let logoMesh = null;        // Avatar gogsune attach edilen Trek logosu
 
 // ----- Audio state -----
 let ws = null;
@@ -293,11 +280,15 @@ async function loadAvatar() {
 
   console.log('[avatar] bone sayisi:', allBones.length, '— head bone:', headBone?.name || 'YOK');
   console.log('[avatar] morph mesh sayisi:', morphMeshes.length);
+  console.log('[avatar] tum bone isimleri:', allBones);
 
   if (morphMeshes.length === 0) {
     console.warn('[avatar] HIC morph target yok — bu avatar lip sync icin uygun degil');
   }
 
+  // Trek logosunu avatar gogsune attach et (3D, avatar ile birlikte hareket eder)
+  await attachTrekLogo();
+
   // Avatar'i sahneye yerlestir (bel-yukari gorunum)
   avatar.position.set(0, 0, 0);
   scene.add(avatar);
@@ -305,6 +296,87 @@ async function loadAvatar() {
   return true;
 }
 
+// ============================================================
+//  Trek logosunu avatar gogsune ekle (3D, bone'a attach)
+// ============================================================
+async function loadLogoTexture() {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const aspect = img.height / img.width;
+      canvas.width = 1024;
+      canvas.height = Math.round(1024 * aspect);
+      const ctx = canvas.getContext('2d');
+      // SVG'yi cizdir, sonra source-in ile beyaz fill — siyah logoyu beyaza cevirir
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      const texture = new THREE.CanvasTexture(canvas);
+      texture.colorSpace = THREE.SRGBColorSpace;
+      texture.anisotropy = 16;
+      texture.needsUpdate = true;
+      resolve({ texture, aspect });
+    };
+    img.onerror = (e) => { console.error('[logo] yukleme hatasi:', e); resolve(null); };
+    img.src = '/static/trek-logo.svg';
+  });
+}
+
+async function attachTrekLogo() {
+  const result = await loadLogoTexture();
+  if (!result || !avatar) return;
+  const { texture, aspect } = result;
+
+  // Avatar'in gogus bone'unu bul (Spine2 > Spine1 > Spine > Chest > vb)
+  const candidates = ['Spine2', 'Spine1', 'Spine', 'Chest', 'spine2', 'spine1', 'spine'];
+  let chestBone = null;
+  for (const name of candidates) {
+    chestBone = avatar.getObjectByName(name);
+    if (chestBone) break;
+  }
+  // Mixamo prefix'i de dene
+  if (!chestBone) {
+    avatar.traverse((obj) => {
+      if (chestBone) return;
+      if (obj.isBone) {
+        const n = obj.name.toLowerCase();
+        if (n.includes('spine2') || n.includes('chest')) chestBone = obj;
+      }
+    });
+  }
+  console.log('[logo] gogus bone:', chestBone?.name || 'YOK');
+
+  if (!chestBone) {
+    console.warn('[logo] gogus bone bulunamadi, logo eklenmedi');
+    return;
+  }
+
+  const logoWidth = 0.13;
+  const logoGeometry = new THREE.PlaneGeometry(logoWidth, logoWidth * aspect);
+  const logoMaterial = new THREE.MeshBasicMaterial({
+    map: texture,
+    transparent: true,
+    side: THREE.DoubleSide,
+    depthTest: true,
+    depthWrite: false,
+  });
+  logoMesh = new THREE.Mesh(logoGeometry, logoMaterial);
+
+  // Bone local space'inde gogus on tarafina yerlestir
+  // (bone tipik olarak omurga boyunca yukari uzanir, +Z genelde on tarafa bakar)
+  logoMesh.position.set(0, 0.08, 0.085);
+  // Plane bone'a paralel olsun diye rotation
+  logoMesh.rotation.set(0, 0, 0);
+  // Tisirtin yuzeyinden cok hafif onde dursun (z-fight onleme)
+  logoMesh.renderOrder = 10;
+
+  chestBone.add(logoMesh);
+  console.log('[logo] yerlestirildi:', chestBone.name);
+}
+
 // ============================================================
 //  Animasyon dongusu — lip sync, blink, idle
 // ============================================================