fix

Author: jonit-dev

README.md

@@ -2,6 +2,9 @@
   <img src="./public/vibe-coder-3d-logo.png" alt="Vibe Coder 3D Logo" width="300"/>
 </p>
 
+> **⚠️ UNDER ACTIVE DEVELOPMENT**
+> This project is currently in early development and is **not yet functional**. Features are incomplete, APIs will change, and many systems are still being implemented. Please check the [ROADMAP.md](./ROADMAP.md) for current progress.
+
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.8-blue.svg)](https://www.typescriptlang.org/)
 [![Rust](https://img.shields.io/badge/Rust-1.75+-orange.svg)](https://www.rust-lang.org/)
@@ -17,8 +20,9 @@ Vibe Coder 3D is an **AI-first game engine** that combines modern 3D rendering w
 ## Screenshots
 
 <p align="center">
-  <img src="./public/screenshots/scene.png" alt="Vibe Coder 3D Scene" width="49%"/>
-  <img src="./public/screenshots/LOD-wireframe.png" alt="LOD Wireframe View" width="49%"/>
+  <img src="./public/screenshots/scene.png" alt="Vibe Coder 3D Scene" width="32%"/>
+  <img src="./public/screenshots/LOD-wireframe.png" alt="LOD Wireframe View" width="32%"/>
+  <img src="./public/screenshots/alien.png" alt="Alien Character" width="32%"/>
 </p>
 
 ## Features

REDDIT_POST_DRAFT.md

@@ -0,0 +1,68 @@
+### Title Option A (Direct & Informative):
+**I'm building Vibe Coder 3D: An open-source, AI-first game engine with a React/TS editor and a Rust core.**
+
+### Title Option B (Feature-focused):
+**Showoff: I made an open-source game engine that you control with natural language ("create a bouncing ball" -> physics sim). Built with React, Rust, and R3F.**
+
+### Title Option C (Engaging & Personal):
+**After months of work, I'm releasing the foundations of my AI-first, open-source game engine. Looking for feedback and contributors!**
+
+---
+
+### Body:
+
+Hey everyone!
+
+I'm incredibly excited to share a project I've been pouring my heart into: **Vibe Coder 3D**. It's an AI-first, open-source game engine designed to make 3D game creation more accessible and intuitive through natural language.
+
+The core idea is simple: describe what you want, and let the engine handle the rest.
+
+- **"Create a bouncing ball"** → A sphere with a rigid body and physics material is spawned.
+- **"Add a medieval castle"** → A 3D model is sourced from an asset library and placed in the scene.
+- **"Make the player jump on spacebar"** → A controller script is generated and attached.
+
+**(I highly recommend including a short screen recording or GIF here showing the editor in action! Visuals get much more engagement.)**
+
+Here's a peek at the editor and a wireframe view of the LOD system:
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/jonit-dev/vibe-coder-3d/main/public/screenshots/scene.png" alt="Vibe Coder 3D Scene" width="49%"/>
+  <img src="https://raw.githubusercontent.com/jonit-dev/vibe-coder-3d/main/public/screenshots/LOD-wireframe.png" alt="LOD Wireframe View" width="49%"/>
+</p>
+
+### Key Features:
+
+- **Dual Architecture**: A web-based editor built with **React, TypeScript, and React Three Fiber** for a modern, fast, and familiar development experience. The rendering and physics are powered by a high-performance **native Rust engine**.
+- **Full Physics Simulation**: Integrated with Rapier3D for robust collision detection, rigid bodies, and joints.
+- **Advanced Scripting**: Use TypeScript in the editor with a simple API (`useUpdate`, `useCollisionEvents`, etc.) to build game logic. The Rust engine also has Lua scripting via `mlua`.
+- **Modern Tooling**: It comes with a visual scene editor, component inspector, PBR material editor, prefab browser, and multiple debug tools (colliders, FPS counter, GPU profiling).
+- **Comprehensive Docs**: The project is heavily documented (50+ guides and architectural docs) to make it easy for new contributors to jump in.
+- **It's Open Source!**: Licensed under MIT, ready for the community to shape its future.
+
+### Current Status & What's Next
+
+The foundation is solid. The core engine, editor, ECS, physics, and scripting systems are all in place. I'm now beginning development on the core AI Copilot system that will power the natural language commands. You can see the complete feature list and progress on the project **[Roadmap](./ROADMAP.md)**.
+
+### How You Can Help
+
+I'm at a point where community feedback and contributions would be invaluable. Whether you're a Rustacean, a React dev, a game designer, or just someone passionate about open-source, I'd love for you to get involved.
+
+- **Check out the GitHub Repo**: [https://github.com/jonit-dev/vibe-coder-3d](https://github.com/jonit-dev/vibe-coder-3d)
+- **Star the project!** It helps a ton with visibility.
+- **Read the Contribution Guide**: I've set up a `CONTRIBUTING.md` and `WORKFLOW.md` to make getting started as smooth as possible.
+- **Join the Discussion**: Have questions or ideas? Head over to the GitHub Discussions.
+
+Thanks for taking the time to read this. I'm really proud of how far it's come and excited about where it's going with the help of a community!
+
+---
+
+**TL;DR:** I'm building an open-source, AI-first game engine with a React/TypeScript/R3F editor and a high-performance Rust core. You build games by describing what you want in plain English. Check out the [repo](https://github.com/jonit-dev/vibe-coder-3d) and let me know what you think!
+
+### Suggested Subreddits:
+
+- `r/gamedev` (A primary target, be sure to follow their "Show-off Saturday" or other relevant rules)
+- `r/rust` (They will love the native engine aspect)
+- `r/reactjs` (The modern web-based editor is a great hook)
+- `r/opensource` (Perfect for a call for contributors)
+- `r/programming`
+- `r/typescript`

public/assets/models/NightStalker/glb/NightStalker_Night_Stalker.glb

@@ -2,8 +2,8 @@ import { z } from 'zod';
 
 // Core asset metadata interfaces
 export enum AssetKeys {
-  NightStalkerModel = 'NightStalkerModel',
-  // Add other asset keys as needed
+  // Add asset keys here as needed
+  // Note: Custom models imported via drag-and-drop don't use this enum
 }
 
 export const AssetTypeSchema = z.enum(['gltf', 'fbx', 'obj', 'dae', 'texture', 'audio']);

public/screenshots/alien.png

@@ -399,6 +399,29 @@ export const EntityMesh: React.FC<IEntityMeshProps> = React.memo(
     const meshRendererData = meshRendererComponent?.data;
     const modelPath = isMeshRendererData(meshRendererData) ? meshRendererData.modelPath : undefined;
 
+    // Check if this is a loading placeholder
+    const isLoadingPlaceholder = modelPath?.startsWith('__loading__:');
+    const loadingModelName = isLoadingPlaceholder
+      ? modelPath?.replace('__loading__:', '')
+      : undefined;
+
+    // Render loading placeholder while model is being ingested
+    if (meshType === 'custom' && isLoadingPlaceholder) {
+      // Dynamic import to avoid circular dependencies
+      const ModelLoadingPlaceholder = React.lazy(
+        () =>
+          import('@/editor/components/shared/ModelLoadingPlaceholder').then((m) => ({
+            default: m.ModelLoadingPlaceholder,
+          })),
+      );
+
+      return (
+        <React.Suspense fallback={null}>
+          <ModelLoadingPlaceholder entityId={entityId} modelName={loadingModelName} />
+        </React.Suspense>
+      );
+    }
+
     // If it's a custom model with a valid path, render the custom model
     if (meshType === 'custom' && modelPath) {
       return (

src/core/types/assets.ts

@@ -1,6 +1,8 @@
 import { useToastStore } from '@/core/stores/toastStore';
 import { useEntityCreation } from '@/editor/hooks/useEntityCreation';
 import { useModelIngestion } from '@/editor/hooks/useModelIngestion';
+import { useComponentRegistry } from '@/core/hooks/useComponentRegistry';
+import { KnownComponentTypes } from '@/core/lib/ecs/IComponent';
 import { Logger } from '@core/lib/logger';
 import React from 'react';
 
@@ -10,6 +12,7 @@ export const ModelDropZone: React.FC = () => {
   const [isDragging, setIsDragging] = React.useState(false);
   const { ingest } = useModelIngestion();
   const { createCustomModel } = useEntityCreation();
+  const { updateComponent } = useComponentRegistry();
   const toast = useToastStore();
 
   React.useEffect(() => {
@@ -50,17 +53,35 @@ export const ModelDropZone: React.FC = () => {
         files.find((f) => f.name.toLowerCase().endsWith('.obj')) ||
         files[0];
 
-      const loadingToastId = toast.showLoading('Importing Model...', 'Optimizing and generating LODs');
+      const filename = file.name.split('.')[0];
+
+      // Create entity with loading placeholder using special prefix
+      const loadingEntity = createCustomModel(`__loading__:${filename}`, filename);
+      logger.info('Created loading placeholder entity', { entityId: loadingEntity.id, filename });
+
+      const loadingToastId = toast.showLoading(
+        'Importing Model...',
+        `Optimizing ${filename} and generating LODs`
+      );
+
       try {
+        // Ingest and optimize (backend waits for all LOD files)
         const result = await ingest(file);
-        const entity = createCustomModel(result.basePath);
+
+        logger.info('Model ready, updating entity', {
+          entityId: loadingEntity.id,
+          basePath: result.basePath,
+        });
+
+        // Update the mesh renderer with the real model path
+        updateComponent(loadingEntity.id, KnownComponentTypes.MESH_RENDERER, {
+          modelPath: result.basePath,
+        });
 
         toast.removeToast(loadingToastId);
-        toast.showSuccess(
-          'Import Complete',
-          `Created entity ${entity.id} from ${result.name}`,
-          { duration: 3000 }
-        );
+        toast.showSuccess('Import Complete', `Loaded ${result.name} with LOD variants`, {
+          duration: 3000,
+        });
       } catch (err) {
         const msg = err instanceof Error ? err.message : String(err);
         logger.error('Model ingestion failed', { error: msg });
@@ -81,7 +102,7 @@ export const ModelDropZone: React.FC = () => {
       document.removeEventListener('dragleave', handleDragLeave);
       document.removeEventListener('drop', handleDrop);
     };
-  }, [ingest, createCustomModel, toast]);
+  }, [ingest, createCustomModel, updateComponent, toast]);
 
   if (!isDragging) return null;
 

src/editor/components/panels/ViewportPanel/components/EntityMesh.tsx

@@ -0,0 +1,50 @@
+import React, { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import type { Mesh } from 'three';
+
+interface IModelLoadingPlaceholderProps {
+  entityId: number;
+  modelName?: string;
+}
+
+/**
+ * A spinning wireframe box that appears while a custom model is being ingested and optimized.
+ * Shows a visual loading indicator in the 3D scene.
+ */
+export const ModelLoadingPlaceholder: React.FC<IModelLoadingPlaceholderProps> = ({
+  entityId,
+  modelName,
+}) => {
+  const meshRef = useRef<Mesh>(null);
+
+  // Rotate the box on all axes for a nice loading effect
+  useFrame((_, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.x += delta * 1.5;
+      meshRef.current.rotation.y += delta * 2.0;
+      meshRef.current.rotation.z += delta * 0.5;
+    }
+  });
+
+  return (
+    <group userData={{ entityId }}>
+      <mesh ref={meshRef} castShadow={false} receiveShadow={false}>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial
+          color="#4a9eff"
+          wireframe
+          opacity={0.8}
+          transparent
+          emissive="#4a9eff"
+          emissiveIntensity={0.5}
+        />
+      </mesh>
+      {modelName && (
+        <mesh position={[0, 1.5, 0]}>
+          <boxGeometry args={[0.1, 0.1, 0.1]} />
+          <meshBasicMaterial color="#4a9eff" />
+        </mesh>
+      )}
+    </group>
+  );
+};