glTF Assets

In this tutorial we're going to learn how to use glTF Assets so we can populate our scene with cool stuff. Animations will be covered in a future tutorial

Step 1

We'll use the finished code from the Skyboxes Tutorial as our starting point

Before we write any new code, let's find ourselves some cool assets on Sketchfab! If you have some already and want to use them feel free to. I'll be using this Low Poly Spaceship and this Low Poly Planet both made by wjs991

I'm using low poly assets to speed up loading the demo for those with bad internet connections (but really because it's cheaper for me bandwidth-wise hehe)

You're likely to notice that the assets you downloaded have more files than just a .gltf file. They probably have a directory for textures and a .bin file as well. I like dealing with a single file per 3D asset, so let's turn each bundle into a .glb file using this amazingly simple utility made by Michael Feldstein

A GLB file is just a binary version of a glTF file including their textures and other relevant files all together

Now we'll place all of our .glb files into the same directory, which for this tutorial I'll use /models/

Step 2

Thre three.js community comes to the rescue once again with the plugin GLTFLoader.js that handles loading glTF files. Let's make a folder for it and place it in /scripts/three/examples/jsm/loaders/

Time to write some code. Let's create a class to handle our static models called /scripts/components/GLTFAsset.js

In our class we'll need:

1. A constructor that accepts the filename, scale, position, and rotation as parameters
2. An instance of THREE.Object3D called _pivotPoint that we'll apply our transformations on
3. To use GLTFLoader to load in our asset and add it as a child to _pivotPoint
4. A function addToScene(parent) that adds _pivotPoint to the provided parent when called

Doing those things should lead to something like this

Documentation for Object3D / Documentation for GLTFLoader

Using a pivot point instead of just adding the asset to the scene gives us some flexibility. Namely, we can immediately apply transformations and add the pivot point to the scene without having to wait for the asset to load first. Once the asset does load and is added to the pivot point, those transformations will apply to it and all other children of the pivot point

Let's try importing GLTFAsset into Main.js and adding our spaceship to the scene in front of us so we can see it. Below where we create the Skybox in _createAssets() add the following

When we run our app we can see our spaceship all around us which means it's waaaayyyyy too big for what we want. Let's scale it to 1/100 of it's original size. Now it looks much better when we run it. Go ahead and add the planet as well and transform the assets however you like to create your scene. Mine looks like this

I used the following transformations

Well that's it for this tutorial. Easy peasy just the way I like it

Finished code in action

Git Repository

Feeling generous/want to support me in writing tutorials? Then buy me a coffee, which I'll probably use for boba or almonds (raw and unsalted you heathens) because I don't like coffee