How we used 3D Avatars in Pulseplay Digital Website using WebGL and ThreeJs

In this article, we will see how we use 3D assets using Blender and three.js

Step 1: Get a 3D model of yourself visit readyplayer.me

To get started, open your web browser and navigate to readyplayer.me. This is the official website where you can create your animated avatar. It is compatible with various platforms, including gaming consoles, virtual reality devices, and social media. If everything looks good, click on the "Save" or "Download" button to download Glb File.

Step 2:  How to Add GLB File to blender 

Download and Install Blender. Launch Blender and start with a new project. To import a GLB file, navigate to the "File" menu and select "Import," then choose "GLTF 2.0 (.glb/.gltf)." Browse your file system and select the GLB file you want to add. Click "Import" to import the GLB file into Blender. To export the object as an FBX file, go to the "File" menu, select "Export," and then choose "FBX (.fbx)".

Step 3:  Adding an FBX File to Mixamo and Animating Your Character

Open your web browser and navigate to mixamo.com. If you don't have an Adobe account, create one or log in if you already have one. Mixamo is now part of Adobe, and you'll need an Adobe account to access its services. Once you're logged in to Mixamo, click on the "Upload Character" button. Select your prepared FBX file from your computer and click "Open" to upload it to Mixamo. Once your character is rigged, it's time to choose animations for your character. After selecting an animation, click on the "Apply" button to apply it to your character then Import the downloaded FBX file.

Step 4:  Adding Animated FBX to Blender and Exporting as GLB File

After importing the FBX file, Blender will display the animated model in the viewport. If necessary, use the timeline and playback controls at the bottom of the screen to scrub through the animation and preview its movement. You can also adjust the animation's start and end frames in the timeline panel to capture the desired range. Once you're satisfied with the animation and any modifications made, it's time to export the model as a GLB file. In the "File" menu, select "Export," and then choose "GLB (.glb)."

Step 5: Configure 3D models with react-three-fiber

Make sure you have the necessary dependencies installed for working with GLB files. You'll need to import the following libraries:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { useLoader } from '@react-three/fiber';

Load and Add the GLB File Within your React component, you can use the useLoader hook to load and add the GLB file to your scene. Here's an example:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { useLoader } from '@react-three/fiber';

const MyComponent = () => {
  const gltf = useLoader(GLTFLoader, '/path/to/your.glb');

  return (
    <primitive object={gltf.scene} />
  );
};

View