Added HF emoji

app.py

@@ -111,6 +111,10 @@ def get_viewer_html(scene_id="welcome"):
     if not scene_data:
         return '<div style="color: red;">Scene not found</div>'
 
+    # Add the static assets base URL for model loading
+    # On local dev: http://localhost:8000, on HF Spaces: empty (relative)
+    scene_data["static_base_url"] = FASTAPI_INTERNAL if not IS_HF_SPACES else ""
+
     # Read the viewer HTML template
     viewer_path = os.path.join(os.path.dirname(__file__), "frontend", "game_viewer.html")
     with open(viewer_path, 'r') as f:

backend/storage.py

@@ -80,47 +80,15 @@ def initialize_default_scene():
         background_color="#1a0a20",  # Dark purple (will be overridden by skybox)
     )
 
-    # Create some visually interesting starter objects
+    # Hugging Face emoji model at center (animated)
     objects = [
-        # Red cube - classic demo object
         create_game_object(
-            object_type="cube",
-            name="RedCube",
-            position=create_vector3(3, 1, -3),
-            scale=create_vector3(2, 2, 2),
-            material=create_material(color="#ff4444", metalness=0.3, roughness=0.4),
-        ),
-        # Blue sphere - metallic
-        create_game_object(
-            object_type="sphere",
-            name="BlueSphere",
-            position=create_vector3(-4, 1.5, -2),
+            object_type="model",
+            name="HuggingFace",
+            position=create_vector3(0, 1.5, 0),
             scale=create_vector3(3, 3, 3),
-            material=create_material(color="#4488ff", metalness=0.8, roughness=0.2),
-        ),
-        # Green cylinder
-        create_game_object(
-            object_type="cylinder",
-            name="GreenCylinder",
-            position=create_vector3(0, 1.5, -6),
-            scale=create_vector3(1.5, 3, 1.5),
-            material=create_material(color="#44ff44", metalness=0.2, roughness=0.6),
-        ),
-        # Yellow torus
-        create_game_object(
-            object_type="torus",
-            name="YellowTorus",
-            position=create_vector3(-3, 2, -7),
-            scale=create_vector3(2, 2, 2),
-            material=create_material(color="#ffcc00", metalness=0.6, roughness=0.3),
-        ),
-        # Purple cone
-        create_game_object(
-            object_type="cone",
-            name="PurpleCone",
-            position=create_vector3(5, 1, -5),
-            scale=create_vector3(1.5, 3, 1.5),
-            material=create_material(color="#aa44ff", metalness=0.4, roughness=0.5),
+            model_path="/static/models/Norod78/huggingface_emoji.glb",
+            metadata={"animate": True, "baseY": 1.5},
         ),
     ]
 
@@ -152,7 +120,7 @@ def initialize_default_scene():
     storage.save(scene)
     print(f"✓ Initialized Welcome Scene (ID: welcome)")
     print(f"  - 25x25 world with sunset skybox")
-    print(f"  - 5 starter objects (cube, sphere, cylinder, torus, cone)")
+    print(f"  - Hugging Face emoji model at center")
     print(f"  - FPS physics controller ready")
 
 

frontend/game_viewer.html

@@ -75,6 +75,7 @@
 
         // Particle systems
         let particleSystems = new Map();
+        let animatedModels = [];  // Models with animation metadata
 
         // UI overlay container
         let uiContainer = null;
@@ -555,13 +556,13 @@
                 canvas.height = size;
                 const ctx = canvas.getContext('2d');
 
-                // Background - blueprint blue
-                ctx.fillStyle = '#1a4a6e';
+                // Background - bright blue
+                ctx.fillStyle = '#2080dd';
                 ctx.fillRect(0, 0, size, size);
 
-                // Major grid lines (1 unit = 64px at 512 texture for 8 divisions)
+                // Major grid lines - white
                 const majorSpacing = size / 8;
-                ctx.strokeStyle = '#2a6a9e';
+                ctx.strokeStyle = '#ffffff';
                 ctx.lineWidth = 2;
                 ctx.beginPath();
                 for (let i = 0; i <= 8; i++) {
@@ -573,9 +574,9 @@
                 }
                 ctx.stroke();
 
-                // Minor grid lines (subdivisions)
+                // Minor grid lines - white (semi-transparent)
                 const minorSpacing = majorSpacing / 4;
-                ctx.strokeStyle = '#1f5a8e';
+                ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                 ctx.lineWidth = 1;
                 ctx.beginPath();
                 for (let i = 0; i <= 32; i++) {
@@ -831,6 +832,47 @@
                     case 'torus':
                         geometry = new THREE.TorusGeometry(obj.scale.x, obj.scale.x * 0.4, 16, 100);
                         break;
+                    case 'model':
+                        // Load GLB/GLTF model asynchronously
+                        if (obj.model_path) {
+                            const loader = new GLTFLoader();
+                            // Use static_base_url from scene data for correct server
+                            const staticBase = sceneData.static_base_url || '';
+                            const modelUrl = staticBase + obj.model_path;
+                            loader.load(
+                                modelUrl,
+                                (gltf) => {
+                                    const model = gltf.scene;
+                                    model.position.set(obj.position.x, obj.position.y, obj.position.z);
+                                    model.scale.set(obj.scale.x, obj.scale.y, obj.scale.z);
+                                    model.rotation.set(
+                                        THREE.MathUtils.degToRad(obj.rotation.x),
+                                        THREE.MathUtils.degToRad(obj.rotation.y),
+                                        THREE.MathUtils.degToRad(obj.rotation.z)
+                                    );
+                                    model.userData = {
+                                        id: obj.id,
+                                        name: obj.name,
+                                        type: 'model',
+                                        isSceneObject: true,
+                                        animate: obj.metadata?.animate || false,
+                                        baseY: obj.metadata?.baseY || obj.position.y,
+                                    };
+                                    scene.add(model);
+
+                                    // Track animated models
+                                    if (obj.metadata?.animate) {
+                                        animatedModels.push(model);
+                                        console.log(`Loaded animated model: ${obj.name} from ${modelUrl}`);
+                                    } else {
+                                        console.log(`Loaded model: ${obj.name} from ${modelUrl}`);
+                                    }
+                                },
+                                undefined,
+                                (error) => console.error(`Failed to load model ${modelUrl}:`, error)
+                            );
+                        }
+                        return; // Skip the rest of the geometry/material creation
                     default:
                         console.warn('Unknown object type:', obj.type);
                         return;
@@ -1055,6 +1097,9 @@
             // Update particle systems
             updateParticleSystems(delta);
 
+            // Update animated models (rotate + bob up/down)
+            updateAnimatedModels(time);
+
             // Render using composer (for outlines) instead of direct renderer
             if (composer) {
                 composer.render();
@@ -1942,6 +1987,19 @@
             }
         }
 
+        function updateAnimatedModels(time) {
+            // Animate models with rotate + sine wave bobbing
+            const timeInSeconds = time / 1000;
+            animatedModels.forEach(model => {
+                // Rotate slowly around Y axis
+                model.rotation.y = timeInSeconds * 0.5;
+
+                // Bob up and down with sine wave
+                const baseY = model.userData.baseY || 1.5;
+                model.position.y = baseY + Math.sin(timeInSeconds * 2) * 0.3;
+            });
+        }
+
         function updateParticleSystems(delta) {
             particleSystems.forEach((system, id) => {
                 const positions = system.geometry.attributes.position.array;