fix: change olympic medals on athletes

Author: taghizadlaura

website/js/AthleteRenderer.js

@@ -5,14 +5,22 @@ export class AthleteRenderer {
   static loader = new GLTFLoader();
 
   static cache = {
-    man: null,
-    woman: null
+    man_gold: null,
+    man_silver: null,
+    man_bronze: null,
+    woman_gold: null,
+    woman_silver: null,
+    woman_bronze: null
   };
 
-  static loadModels(manUrl, womanUrl) {
+  static loadModels(manGoldUrl, manSilverUrl, manBronzeUrl, womanGoldUrl, womanSilverUrl, womanBronzeUrl) {
     return Promise.all([
-      this._load(manUrl).then(m => (this.cache.man = m)),
-      this._load(womanUrl).then(m => (this.cache.woman = m))
+      this._load(manGoldUrl).then(m => (this.cache.man_gold = m)),
+      this._load(manSilverUrl).then(m => (this.cache.man_silver = m)),
+      this._load(manBronzeUrl).then(m => (this.cache.man_bronze = m)),
+      this._load(womanGoldUrl).then(m => (this.cache.woman_gold = m)),
+      this._load(womanSilverUrl).then(m => (this.cache.woman_silver = m)),
+      this._load(womanBronzeUrl).then(m => (this.cache.woman_bronze = m))
     ]);
   }
 
@@ -23,7 +31,9 @@ export class AthleteRenderer {
   }
 
   static addHuman(scene, athlete, pos, gender = "man") {
-    const base = this.cache[gender].clone(true);
+    const cacheKey = `${gender}_${athlete.medal.toLowerCase()}`;
+
+    const base = this.cache[cacheKey].clone(true);
 
     const group = new THREE.Group();
     group.position.set(pos.x, pos.podiumHeight, 0);
@@ -39,6 +49,12 @@ export class AthleteRenderer {
     base.scale.z *= weightScale;
     base.position.y = 0;
 
+    const medalMat = new THREE.MeshStandardMaterial({
+      color: this._medalColor(athlete.medal),
+      metalness: 0.8,
+      roughness: 0.2
+    });
+
     base.traverse((obj) => {
       if (!obj.isMesh) return;
       const mat = obj.material;
@@ -47,83 +63,17 @@ export class AthleteRenderer {
       mat.side = THREE.DoubleSide;
       if (mat.map) mat.map.colorSpace = THREE.SRGBColorSpace;
       if (mat.emissiveMap) mat.emissiveMap.colorSpace = THREE.SRGBColorSpace;
-    });
 
-    base.traverse((obj) => {
-      if (!obj.isMesh) return;
-      const name = obj.name.toLowerCase();
-      if (name.includes("cloth") || name.includes("shirt") || name.includes("body")) {
-        obj.material = new THREE.MeshStandardMaterial({
-          color: 0xf2f2f2,
-          roughness: 0.8
-        });
+      if (!obj.name.includes("_basic")) {
+        obj.material = medalMat;
       }
     });
 
     group.add(base);
-
-    // Real bounding box so all positions adapt to any model scale
-    const tempBox = new THREE.Box3().setFromObject(group);
-    const modelWorldHeight = tempBox.max.y - tempBox.min.y;
-
-    const chestWorldY = tempBox.min.y + modelWorldHeight * 0.72;
-    const neckWorldY  = tempBox.min.y + modelWorldHeight * 0.88;
-    const frontWorldZ = tempBox.max.z + 0.02;
-
-    // Group-local Y (group sits at pos.podiumHeight)
-    const chestLocalY = chestWorldY - pos.podiumHeight;
-    const neckLocalY  = neckWorldY  - pos.podiumHeight;
-
-    const medalRadius  = modelWorldHeight * 0.032;
-    const strapRadius  = medalRadius * 0.12;
-    const neckHalfWidth = modelWorldHeight * 0.045; // where straps leave the neck
-    const neckZ = frontWorldZ - medalRadius * 1.5;  // straps start slightly behind
-
-    // Two diagonal ribbon straps forming a V around the neck
-    const strapMat = new THREE.MeshStandardMaterial({ color: 0xcc1111, roughness: 0.65 });
-    const medalCenter = new THREE.Vector3(0, chestLocalY, frontWorldZ);
-
-    [
-      new THREE.Vector3(-neckHalfWidth, neckLocalY, neckZ),
-      new THREE.Vector3( neckHalfWidth, neckLocalY, neckZ)
-    ].forEach(strapStart => {
-      this._addSegment(group, strapStart, medalCenter, strapRadius, strapMat);
-    });
-
-    // Medal disc (drawn after straps so it sits on top)
-    const medalMat = new THREE.MeshStandardMaterial({
-      color: this._medalColor(athlete.medal),
-      metalness: 0.75,
-      roughness: 0.25
-    });
-    const medalDisc = new THREE.Mesh(
-      new THREE.CylinderGeometry(medalRadius, medalRadius, medalRadius * 0.25, 32),
-      medalMat
-    );
-    medalDisc.position.set(0, chestLocalY, frontWorldZ);
-    medalDisc.rotation.x = Math.PI / 2;
-    group.add(medalDisc);
-
     scene.add(group);
     return group;
   }
 
-  // Draws a cylinder aligned between two arbitrary 3D points
-  static _addSegment(group, from, to, radius, material) {
-    const dir    = new THREE.Vector3().subVectors(to, from);
-    const length = dir.length();
-    const mid    = new THREE.Vector3().lerpVectors(from, to, 0.5);
-
-    const mesh = new THREE.Mesh(
-      new THREE.CylinderGeometry(radius, radius, length, 8),
-      material
-    );
-    mesh.position.copy(mid);
-    // CylinderGeometry is Y-up by default; rotate to align with dir
-    mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());
-    group.add(mesh);
-  }
-
   static _medalColor(medal) {
     switch (medal) {
       case "Gold":   return 0xf4c542;
@@ -132,4 +82,4 @@ export class AthleteRenderer {
       default:       return 0xffffff;
     }
   }
-}
+}

website/js/body-types.js

@@ -46,7 +46,14 @@ import { AthleteRenderer } from "./AthleteRenderer.js";
     try {
       const [rows] = await Promise.all([
         d3.csv(DATA_PATH, d3.autoType),
-        AthleteRenderer.loadModels("models/man_outfit.glb", "models/woman_outfit.glb")
+        AthleteRenderer.loadModels(
+          "models/man_outfit_gold.glb",
+          "models/man_outfit_silver.glb",
+          "models/man_outfit_bronze.glb",
+          "models/woman_outfit_gold.glb",
+          "models/woman_outfit_silver.glb",
+          "models/woman_outfit_bronze.glb"
+        )
       ]);
 
       state.rows = rows;