Learning three.js 07 :: Instancing & Multiple Models

Channel:
Subscribers:
1,090
Published on ● Video Link: https://www.youtube.com/watch?v=MJAD-EXPXfU



Duration: 7:37
14,661 views
94


I solve the issues in loading models from an array, and clone models instead of loading the same one twice. Source linked below.

This video builds on the code produced in video 6.

Loading models from a list can cause weird behaviour because the loading process is asynchronous. The "key" variable will change while the object is loading, so when it finishes loading it puts the geometry data into a different key than when it started loading. We stop this by wrapping the contents of the for loop in a floating function which keeps the key from changing.

I used this SO question to help.
https://stackoverflow.com/questions/28011397/three-js-add-multiple-objects-obj-mtl-with-a-loop

Models sourced from http://kenney.nl/ - A quality source of free to use models and textures.

source code - https://github.com/saucecode/threejs-demos/tree/master/07_Models2
github repo - https://github.com/saucecode/threejs-demos

As I upload this I am in my last week of classes before a 2 week break. I should have the next video up before Sunday (2016-08-23). Next video will be the revered FPS gun view.

Send sonnets, your music playlists, and/or comments to cahill.julian@gmail.com

https://rawr.nz/







Tags:
threejs
three.js
three js
javascript
node
webgl
opengl es
OpenGL
models
obj
mtl
loading
instancing
tutorial
source code
light
shadow
fps
learning