3D Office Space with Movable Avatars

I'll create a 3D office environment where users can move around as 3D icons/avatars. This will use React Three Fiber (Three.js) to create an interactive office space.

How It Works

This 3D office visualization allows users to move around as 3D avatars (represented by a duck model) in a virtual office space:

1. Office Layout: The environment includes:

   • Three department rooms (Engineering, Design, Marketing)
   • One conference room with a meeting table and presentation screen
   • Each room has desks, chairs, and computers

2. Movement Controls:

   • Use WASD or arrow keys to move your avatar
   • The avatar (duck) rotates to face the direction of movement
   • Use the mouse to orbit the camera and look around

3. Technical Implementation:

   • Built with React Three Fiber and Drei for 3D rendering
   • Uses a custom keyboard controls hook to handle movement
   • Implements a simple physics system for avatar movement
   • Rooms are created with basic 3D shapes for optimal performance

4. UI Controls:

   • On-screen directional buttons for mobile users
   • Visual indicators for current location

Try moving between different office rooms to explore the space!

Modern 3D Office Space with Human Avatars

I'll update the design to be more modern and replace the duck with a human avatar. I'll also make the room titles more visible and improve the overall aesthetics.

Modern Office Design Improvements

I've completely redesigned the 3D office space with a modern aesthetic and improved visibility:

Key Improvements:

1. Modern Design Elements

   • Replaced solid walls with sleek glass walls
   • Updated furniture with contemporary designs and materials
   • Added plants for a modern office atmosphere
   • Improved lighting and materials for a more professional look

2. Human Avatar

   • Replaced the duck with a human figure constructed from basic 3D shapes
   • The avatar has a colored body, head, arms, and legs
   • Still rotates to face the direction of movement

3. Clear Room Identification

   • Added large floating 3D text labels above each room
   • Implemented a "Current Location" indicator at the top of the screen
   • Added a prominent "Modern Office Space" title

4. Improved UI

   • Dark-themed controls with better contrast
   • Modern color scheme throughout the application
   • Clearer navigation indicators

5. Better Visibility

   • Improved camera positioning for better overview
   • Enhanced room boundaries and visual cues
   • More distinct room separations

The office now has a contemporary feel with glass partitions, modern furniture, and clear visual indicators of where you are in the space.