Class[6][5th aug] [three js-loaders]

ALGORITHMS, COMPUTER GRAPHICS, AND
MATHEMATICS FOR GAME DEVELOPERS &
COMPUTER SCIENTISTS
PREPARED AND PRESENTED BY
Dr.Saajid Abuluaih, PhD
5th of Jun, 2021
Class[6]: ThreeJS Loaders

Algorithms, Computer Graphics, and Mathematics
for Game Developers and Computer Scientists
© 2021 arche1.co.jp | jaist.ac.jp
All rights reserved.
2
Agenda
One-Bite Wisdom
Quick Quiz
Creating Interactive debugging
Environment with dat.GUI
𝑖
3D Modelling: Tips & Tricks
Today’s Algorithm
𝑔
𝑛
“The future is not just unwritten - it is unsearched”
-Bruce Sterling
FBX Loader
OBJ Loader
GLTF Loader
Textures Loader
Loading Manager

P A G E 3
One-Bite Wisdom
The Awareness Test

4
WHAT COULD YOU MISS ABOUT THIS TEST?
THE AWARENESS TEST
This following video illustrates a selective attention test that you may exercise without even notice.
Please, watch the following video and count how many times the white T-shirt team passes the ball.
The right answer is: 15 times …
References:
Selective Attention Test
The Monkey Business Illusion
The Invisible Gorilla (featuring Daniel Simons) - EMMY Winner
Selective Attention/ Invisible Gorilla Experiment: See Through Your Focus
BUT, did you see the Gorilla

5
WHAT COULD YOU MISS ABOUT THIS TEST?
THE AWARENESS TEST
Here is Jordan Peterson explains about the Gorilla Experiment …
References:
Jordan Peterson Gorilla Experiment

P A G E 6
Today’s Algorithms
Let’s Brush our Coding Skills

Bubble sort is a classic sorting algorithm that compares two
adjacent elements of an array and swaps them if they are not in
the intended order. The process keeps moving forward to the last
elements of the array, and if the swap occurs even once the whole
process will be repeated to check if the array is sorted or not.
7
TODAY’S ALGORITHM,
BUBBLE SORT
function BubbleSort(inputArr) {
let n = inputArr.length;
let notSorted;
do{
notSorted = false;
for (let i = 0; i < n - 1; i++) {
if (inputArr[i]>inputArr[i+1]) {
let tmp = inputArr[i];
inputArr[i] = inputArr[i+1];
inputArr[i+1] = tmp;
notSorted = true;
}
}
}while(notSorted);
return inputArr;
}
References:
JavaScript Bubble Sort: A Guide By JAMES GALLAGHER
(Image Source)

P A G E 8
3Ds MAX
Let’s design something in 3D

Autodesk 3Ds MAX provides you with a very powerful tool called “Array”. Array tool enables you to copy
instantaneously a predefined scene element.
9
3DS MAX: MODELLING,
ARRAY
References:
Autodesk: Array
Creating Arrays of Objects
(image source)

What can you do with array tool? Your imagination is the only limit.
10
3DS MAX: MODELLING,
ARRAY
(image source) (image source) (My design)
(image source) (image source) (image source)

P A G E 11
Do you Really
Understand
Z-Up vs Y-Up,
and Left- vs.
Right-handed
Quick Quiz

12
QUICK QUIZ
DECIDE WHICH IS WHICH! Z-UP VS Y-UP, AND
LEFT-HANDED VS RIGHT-HANDED
The following image is for Unitiy3D Transform gizmo. What do you think about it? Is it Left-Handed or
Right-Handed Coordinate System? Is it Y-up or Z-up Coordinate System?
(Image source)

13
QUICK QUIZ
The following image is for 3Ds MAX Transform gizmo. What do you think about it? Is it Left-Handed or
(Image source)

14
QUICK QUIZ
The following image is for Unreal Engine Transform gizmo. What do you think about it? Is it Left-Handed
or Right-Handed Coordinate System? Is it Y-up or Z-up Coordinate System?
(Image source)

15
QUICK QUIZ
The following image is for Blender Transform gizmo. What do you think about it? Is it Left-Handed or
(Image source)

16
QUICK QUIZ
The following image is for Maya Transform gizmo. What do you think about it? Is it Left-Handed or Right-
Handed Coordinate System? Is it Y-up or Z-up Coordinate System?
(Image source)

17
QUICK QUIZ
The following image is for Three.js Transform gizmo. What do you think about it? Is it Left-Handed or
(Image source)
(Image source)

P A G E 18
Creating interactive
debugging
environment
with dat.GUI
A very handy JS library

19
Dat.GUI JavaScript Library
What is dat.GUI?
Dat.GUI is, arguable, the best debugging tool for your JavaScript code.
It enables you to tweak the values of your variables on real time. It
creates type of HTML elements, with form’s fields that are mapped to
your variables with values that are initially specified. If the data type
of a specific variable is Boolean; it will create a check box. However, if
the property is a function; it will create a button. First, you need to
install JavaScript dependency using npm, as follows:
To get started with dat.GUI, first import it to your project:
Instantiate it:
With that, you have a starter that can be render to a small open/close
dropdown menu.
Now you need to add fields to it
(Image source)
References:
Nowhere Near Ithaca
Github - dat.GUI
JSfiddle
import * as dat from 'dat.gui';
let gui = new dat.GUI();
npm install --save dat.gui

20
What is dat.GUI?
In order to add new a new element to the panel; you use:
The ‘add’ method takes two main parameters. The first one, the
object. The second one, the name of the property that you need to
control. In our wireframe red box, these properties can control the
box’s dimensions and it locations:
However, we may be able to enhance it a bit.
(Image source)
gui.add(...);
gui.add(line.position, 'x');
gui.add(line.position, 'y');
gui.add(line.position, 'z');
gui.add(line.scale, 'x');
gui.add(line.scale, 'y');
gui.add(line.scale, 'z');
References:
Nowhere Near Ithaca
Github - dat.GUI
JSfiddle

21
What is dat.GUI?
You can chain a series of methods to add more constraints to the menu item, for example:
If you add a property of type Boolean; the menu item will be added as a checkbox.
You can add color, but it’s going to be a bit different:
Or maybe even a function:
References:
Nowhere Near Ithaca
Github - dat.GUI
JSfiddle
gui.add(line.position, 'x').min(-3).max(3).step(0.1).name("Move on X Axis");
gui.add(line.position, 'y').min(-3).max(3).step(0.1).name("Move on Y Axis");
gui.add(line.position, 'z').min(-3).max(3).step(0.1).name("Move on Z Axis");
gui.add(line.scale, 'x').min(0.5).max(2.5).step(0.1).name("Scale on X Axis");
gui.add(line.scale, 'y').min(0.5).max(2.5).step(0.1).name("Scale on Y Axis");
gui.add(line.scale, 'z').min(0.5).max(2.5).step(0.1).name("Scale on Z Axis");
gui.add(line, 'visible');
var globalVariable = { color: 0xff00ff, boxRotation: ()=>{ alert(“GR team rocks");} };
gui.addColor(globalVariable, 'color').onChange(() => {line.material.color.set(globalVariable.color)});
gui.add(globalVariable, 'boxRotation').name("Rotate Animation");

P A G E 22
OBJ Loader
Loading 3D objects

23
FUNDAMENTALS AND THEORIES
WHAT IS .OBJ ANY WAY?
An OBJ file is a common format of 3D model files, that can be exported and viewed by a variety of 3D
application editors. It includes a three-dimensional object with 3D coordinates, texture maps, polygonal
faces, and other object information. OBJ files may reference. MTL files that contain information about
surface shading material for that object.
References:
OBJ
Wavefront .obj file

24
GETTING THE MODEL PREPARED
DESIGNING OR FINDING .OBJ 3D ASSETS
Again, if you can design your own model, then do, and export it to OBJ after you get it completed.
Otherwise, you can just search the internet for something similar, import it to your favorite 3d application
and then export it to .obj format. We will use the following cottage house model:
The model has been designed by Shahid Abdullah and uploaded to free3d.com, and cgtrader.com.
(image source)

25
RENDER THE MODEL INTO THE BROWSER
INCLUDE THE LOADER AND LOAD THE MODEL
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
const objLoader = new OBJLoader()
objLoader.load(
'Assets/Models/cottage_obj.obj',
(object) => { scene.add(object); console.log(object); },
(xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded'); },
(error) => { console.log('Check the following error in OBJLoader object: ' + error); }
);
Firs of all, include the loader. You can do that as follows:
Then you can use the loader. The loader have three main callback functions that they get executed on the
following states: success function(which gets invoked if the file was successfully loaded), Progressing
function ( which gets executed during the time the loader is still in the process of requesting the model
file and rendering it), and the last one is error function( which gets invoked if something went wrong). To
use the loader as follows:
const light = new THREE.PointLight(), light2 = new THREE.PointLight(), light3 = new THREE.PointLight();
light.position.set(0, 30, 0); light2.position.set(550, 50, 0); light3.position.set(-550, 50, 0);
scene.add(light);scene.add(light2);scene.add(light3);
Remember that you need to add the OBJ file in your assets folder
Finally, You may need to consider adding some light sources to
light your scene, as follows:

26
DEBUGGING & GETTING RID OF UNWANTED
OBJECTS
You may need to debug your loaded object and remove some of the geometries that comes with the
model, and you don’t need them. To debug your loaded object, just log out the model to the console as
follows :
const objLoader = new OBJLoader()
objLoader.load(
'Assets/Models/cottage_obj.obj',
(xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded'); },
);

27
LOADING .OBJ MATERIALS
OBJ models’ materials are described in separated files with MTL extension. Therefore, they need their
own loaders. You can import MTL loader as follows:
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
const mtlLoader = new MTLLoader();
mtlLoader.load('Assets/Textures/cottage_obj.mtl',
(materials) => {
materials.preload();
console.log(materials);
const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('Assets/Models/cottage_obj.obj',
(xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded model'); },
(error) => { console.log('Check the following error in OBJLoader object: ' + error); });
},
(xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded material'); },
);
In order to assign a material to an OBJ object; you need to load the material file first then load the model.
You may be able to assign the material to the object if the material file is loaded successfully. That can be
done as follows:

P A G E 28
FBX Loader
Loading 3D objects

29
What is .FBX any way?
FBX, which stands for Filmbox, is a propriety file format that owned by Autodesk since 2006. It is older
than GLTF, and was very common 3d object formatting extension and used to standardize the
specifications that of digital 3d content creations and game engines. FBX supports many features such as
3D models, animations, materials, scenes and scene hierarchy … etc.
References:
Adaptable file format for 3D animation software
Loading FBX files into BaseGraphicsSystem
wiki.blender.org - FBX

30
DESIGNING OR FINDING .FBX 3D ASSETS
Again, if you can design your own model, then do, and export it to fbx after you get it completed.
Otherwise, you can just search the internet for something similar, import it to your favorite 3d application
and then export it to .obj format. We will use the following cottage house model:
This model can be found on Maximo under the name “The Boss”.
References:
Adaptable file format for 3D animation software
Loading FBX files into BaseGraphicsSystem
wiki.blender.org - FBX

31
import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader';
const fbxLoader = new FBXLoader();
fbxLoader.load('Assets/Models/StandingIdle.fbx',
(object) => {
scene.add(object);
console.log(object);
object.scale.set(0.01, 0.01, 0.01) },
(xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded model'); },
(error) => { console.log('Check the following error in OBJLoader object: ' + error); });
Remember that you need to add the FBX file in your assets folder
Finally, You may need to consider adding some light sources to light your scene, as follows:

P A G E 32
GLTF Loader
Loading 3D objects

33
What is .GLTF any way?
Graphics Language Transmission Format (glTF) is an acronym for Graphics Language Transmission Format.
The glTF format is an open 3D model and scene format for sending 3D data in rich scenes efficiently. Since
2013, The Khronos Group has established and administered it.
Pros:
- Easy to Read and Write
- Fast and Efficient
- Direct Reads for Game Engines
- Guidance from a Standards Group
- Rich Scene Data
- Augmented Reality
Cons:
- Non-Editable 3D Models
- No Shader Networks
- Non-Backwards Compatible Extensions
Assets can be provided in either JSON (.gltf) or binary (.glb) format.
(image source)
References:
khronos.org
glTF vs FBX: Which format should I use?
glTF: Everything You Need to Know
KhronosGroup/glTF-Sample-Models

34
DESIGNING OR FINDING . GLTF 3D ASSETS
For the third time, if you can design your own model, then do, and export it to OBJ after you get it
completed. Otherwise, you can just search the internet for something similar, import it to your favorite 3d
application and then export it to .obj format. We will use the following cottage house model:
(image source)
For this loader we will use Totoro 3D By Jesse Ragos
The model after loading it to our scene,
using our own lighting

35
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const loader = new GLTFLoader()
loader.load(
'Assets/Models/Totoro.glb',
(gltf) => {scene.add(gltf.scene);},
(xhr) => {console.log((xhr.loaded / xhr.total) * 100 + '% model loaded.');},
(error) => {console.log('Check the following error in GLTFLoader object: ' + error);}
);
Remember that you need to add the GLTF file in your assets folder
Finally, You may need to consider adding some light sources to
light your scene, as follows:

36
DEBUGGING & GETTING RID OF UNWANTED GLTF
Fortunately, in this model we don’t have to remove any unwanted objects that comes with the scene. You
still can log out the model file and see what it contains as follows:
loader.load(
'Assets/Models/Totoro.glb',
function (gltf) {scene.add(gltf.scene); console.log(gltf);},
);
Notice that you have [scene] & [Scenes], in in the object:

37
DRACO LOADER WITH GLTF
If your model is compressed with Draco library, you can unpack it using Draco loader. Draco is a library for
compressing and decompressing 3D models which can be used along with GLTF. The compressing process
can significantly reduce the size of your models, however, that comes with the price of getting the
processor heavily involved in decompressing the file, which could take some time.
To compress your model with Darco, you need to open your
3d model in a 3d editor application like blender and export it
again. But, when you do so you need to activate Darco mesh
compression.
Try now to compare the both file sizes, and see to what
extent Draco compressor was able to reduce the size to.
References:
DRACOLoader
Draco 3D data compression

38
DRACO LOADER WITH GLTF
To load the compressed file, we need to include the Darco loader and use it along with GLTF loader as
follows :
const dracoLoader = new DRACOLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(
'Assets/Models/TotoroComp.glb',
function (gltf) {scene.add(gltf.scene);},
);
Running the above code will result in an error of 404 files are not founded. You need to grab these files
manually and put them in your js folder.
Then you need to specify the directory of the decoder
as follows:
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/Assets/js/draco/');

P A G E 39
Texture Loader
Load texture images

40
GETTING STARTED WITH REQUESTING IMAGES
LOADING IMAGES
Method 1:
Requesting an Image can be done as follows
const image = new Image();// Image is a JavaScript native object
image.src = '/Assets/Textures/Concrete_Textures/Concrete_1.jpg'
image.onload = () =>{
const texture = new THREE.Texture(image);
const material = new THREE.MeshBasicMaterial({map:texture});
const geometry = new THREE.BoxGeometry(2,2,2);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
console.log(texture);
console.log("Image is loaded");
}

41
USING TEXTURE LOADER
LOADING TEXTURES
Method 2:
Using TextureLoader to load a texture. THREE.TextureLoader() is an object provided by three.js to load
image assets
const loader = new THREE.TextureLoader()
const texture = loader.load('/Assets/Textures/Concrete_Textures/Concrete_5.jpg');
TextureLoader is just like the other model loaders, it has three main callback functions that can be used to
perform specific logic at a certain time.
const texture1 = loader.load('/Assets/Textures/Concrete_Textures/Concrete_5.jpg',
() => console.log("Loaded"),
() => console.log("in progress"),
() => console.log("Error, Check your code")
);
References:
threejs.org - TextureLoader

P A G E 42
Loader Manager
Manage your assets when you load them

43
MANAGE YOUR ASSETS
LOAD MULTIPLE RESOURCES ALL AT ONCE
ThreeJS provides you with a great too that enables you to load multiple resources (textures, models,
sounds .. etc.) using loading manager object. When you initialize any type of loader; pass the loading
manager as the first parameter and the engine will do all the management parts for you.
const manager = new THREE.LoadingManager();
const loader = new THREE.TextureLoader(manager);
const texture = loader.load("/Assets/Textures/Concrete_Textures/Concrete_1.jpg");
const texture2 = loader.load("/Assets/Textures/Concrete_Textures/Concrete_2.jpg");
manager.onStart = ( url, itemsLoaded, itemsTotal ) =>console.log( 'Started loading file: ' + url + '.nL
oaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
manager.onProgress = ( url, itemsLoaded, itemsTotal ) => console.log( 'Loading file: ' + url + '.nLoade
d ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
manager.onLoad = ()=>console.log('Loading complete!');
manager.onError = ()=>console.log('Error’);
References:
threejs.org - LoadingManager

P A G E 44
HOMEWORK
Let's Exercise What We've Learned

• Find three models from the internet with the following formats:
• FBX
• GLTF
• OBJ
• And load them all in the same scene.
• Compress GLTF file with Draco compressor in blender and decode it in threejs using draco loader.
• Show to what extent the file has lost form its original size.
• Add to the scene a plane object and add a floor texture of your choice
• Write an essay of one-paragraph differentiates between the major three model formats in threejs. Fbx,
GLTF, and OBJ formats
45
DEADLINE 20th/8,
HOMEWORK

Algorithms, Computer Graphics, and Mathematics
for Game Developers and Computer Scientists
THANKS FOR YOUR
ATTENTION

Class[6][5th aug] [three js-loaders]

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Class[6][5th aug] [three js-loaders]

Similar to Class[6][5th aug] [three js-loaders] (20)

Recently uploaded

Recently uploaded (20)

Class[6][5th aug] [three js-loaders]