world – 3rd drama – GLB

Back

Building a Smooth Multiplayer 3D Character Selection World

In our latest development sprint, we transformed a basic 3D multiplayer space into a polished, interactive character hub. We focused on three main pillars: User Experience, Animation Flexibility, and Physical Presence.

Here is a breakdown of what we’ve built.

1. The “Carousel” Selection System

Instead of a traditional 2D menu, we moved character selection into the 3D world.

  • Mouse-Scroll Interaction: Users can cycle through characters by simply scrolling their mouse wheel.
  • The Centering Effect: We used linear interpolation (Lerp) to smoothly slide the selected character to the center of the screen while rotating it, giving the player a 360-degree preview of their avatar.

2. Dynamic Animation Mapping (Fuzzy Search)

Different GLB models often come with wildly different animation naming conventions. A Robot might have RobotArmature|Walk, while a human might just have Walk.

  • Keyword Matching: We implemented a “Fuzzy Search” logic that looks for keywords like Idle, Walk, Run, or Jump.
  • The Skeleton Fallback: Some models, like our Skeleton, are missing specific animations (like a Walk). We built a fallback system that automatically detects a missing Walk and replaces it with the Run animation, ensuring the character never “glides” in a T-pose.

3. Social Interaction: Proximity Waving

To make the world feel alive, we added a social layer.

  • Proximity Detection: When a player stands still near one or more other players, the system triggers a “Wave” or “Thumbs Up” animation automatically.
  • Social Immersion: This small detail transforms the space from a lonely void into a social gathering hub.

4. No More “Ghosting”: Collision Detection

In early versions, players could walk through each other like ghosts. We solved this by implementing a Circle-Circle Collision system:

  • Physical Boundaries: Every player now has a collision radius.
  • The “Push-Back” Logic: If two players get too close, the math calculates the overlap and gently pushes the local player back, giving everyone a solid physical presence in the world.

5. Enhanced Camera & Physics

We kept the core gameplay tight with:

  • Jump Physics: Gravity-based jumping with force and landing detection.
  • View Toggling: Players can press ‘V’ or Right-Click to flip the camera between a standard third-person follow and a front-facing “Selfie” view.

Technical Highlights:

  • Engine: Three.js (WebGL)
  • Networking: Socket.io for real-time position and animation syncing.
  • Assets: Optimized CC0 GLTF models.

What’s Next?
We are looking into adding customizable textures and a chat system to further enhance the multiplayer social experience!

Looking for the logic?

The secret to the animation flexibility was this helper function we developed:

code JavaScript

function findAction(mixer, clips, keywords) {
    const clip = clips.find(c => keywords.some(k => c.name.toLowerCase().includes(k.toLowerCase())));
    return clip ? mixer.clipAction(clip) : null;
}

This allows us to drop in almost any GLB model, and the game “figures out” which animation is which!

https://chat.deepseek.com , https://aistudio.google.com , https://claude.ai (free)