feat(web): tint objects by their ColorDiffuse

Model ColorDiffuse in shared types and multiply each viewer's material color by the per-object tint, including textured faces and loaded custom models.

apps/web/src/components/viewers/CardViewer.tsx

@@ -11,7 +11,7 @@ import Scene from './Scene';
 import { assetUrl } from './assetUrl';
 import { cardAspect, resolveCardConfig, spriteUv } from './cardResolution';
 import { flipTexture } from './flipTexture';
-import { getSharedGeometry } from './sharedResources';
+import { getSharedGeometry, objectTint, tintedColor } from './sharedResources';
 
 /** Longer card dimension, in world units. */
 const CARD_LENGTH = 2;
@@ -73,6 +73,7 @@ export function CardObjectMesh({ object }: { object: TTSObject }) {
       numHeight={numHeight}
       uniqueBack={uniqueBack}
       cardId={cardId}
+      tint={objectTint(object)}
     />
   );
 }
@@ -86,6 +87,7 @@ export function CardMesh({
   numHeight,
   uniqueBack,
   cardId,
+  tint,
 }: {
   faceUrl?: string;
   backUrl?: string;
@@ -93,6 +95,7 @@ export function CardMesh({
   numHeight?: number;
   uniqueBack: boolean;
   cardId?: number;
+  tint: THREE.Color;
 }) {
   // Always call both hooks so the hook count is stable across renders. The
   // placeholder is used only when a URL is absent; presence is checked via the
@@ -154,20 +157,20 @@ export function CardMesh({
     <group>
       <mesh geometry={frontGeo}>
         <meshStandardMaterial
-          color={faceMap ? '#ffffff' : '#52525b'}
+          color={tintedColor(faceMap ? new THREE.Color('#ffffff') : new THREE.Color('#52525b'), tint)}
           map={faceMap ?? undefined}
           roughness={0.6}
         />
       </mesh>
       <mesh geometry={backGeo}>
         <meshStandardMaterial
-          color={backMap ? '#ffffff' : '#52525b'}
+          color={tintedColor(backMap ? new THREE.Color('#ffffff') : new THREE.Color('#52525b'), tint)}
           map={backMap ?? undefined}
           roughness={0.6}
         />
       </mesh>
       <mesh geometry={wallsGeo}>
-        <meshStandardMaterial color="#ffffff" roughness={0.6} />
+        <meshStandardMaterial color={tintedColor(new THREE.Color('#ffffff'), tint)} roughness={0.6} />
       </mesh>
     </group>
   );