ThreeJS — Importing .glb Ready Player Me Avatar

I’m assuming you’ve already gone through the previous articles on ThreeJS and have a basic understanding of how to get a scene up and running.

If not:

1. Create your dev environment with Vite:

ThreeJS — The most simple local developing environment with Vite

2. Create the simplest ThreeJS scene you can think of:

ThreeJS — The simplest scene you can create

3. Add the animation loop and the orbit controls

ThreeJS — Adding the Orbit Controls

This article will take things up a notch and add an avatar straight from the Ready Player Me website.

Create an account with password-free registration and create your avatar from a selfie. You can also customize it as you like it. Once you save it, a .glb link will be generated; you can copy it by clicking the download button.

The .glb file is the binary of the .gltf format. We will import the avatar with the GLTF loader from ThreeJS.

Now, open your main.js file, and import the GLTFLoader module just after the OrbitControls and ThreeJS library imports.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

Go to and delete the following code block:

// Create a Cube
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

Instead of a green cube, we will load the model here. Replace the URL of the .glb model with yours. The callback function, provided as the second argument, will add the gltf.scene object to the ThreeJS scene as a GROUP.

// Load the glb model
const loader = new GLTFLoader()

loader.load('https://d1a370nemizbjq.cloudfront.net/5f774362-16ea-465b-b44a-2ad4eaa79147.glb', // .glb model

function (gltf) { // callback
 const model = gltf.scene
 scene.add(model)
})

Let’s also add a grid helper to visualize 3d space. Just below, add the following:

// Add a grid helper
const gridHelper = new THREE.GridHelper(10, 10)
scene.add(gridHelper)

npm run dev, visit http://localhost:3000/ on your browser, and you’ll have your avatar on a turntable.

You’ll notice some jaggy lines and the colors a bit off. Let’s tweak some rendering parameters to:

• Enable anti-aliasing
• Set the output encoding of ThreeJS

Modify the //Create the Renderer block like the following:

// Create the Renderer
const renderer = new THREE.WebGLRenderer({
  canvas : canvas,
  antialias : true,  // Enabling Antialias   
})

renderer.setSize(window.innerWidth, window.innerHeight)

// Set the output encoding of ThreeJS
renderer.outputEncoding = THREE.sRGBEncoding;

Check the repo on Github and stay tuned for the next article in which we’ll add functionality to the Ready Player Me Avatar.