The following code loads a glTF file into the scene:
The result of loading this scene is two-fold. Firstly, you’ll be able to see your seen in the browser — as usual it might be behind you, it might be too big, you might be inside it, it might be pitch black (no lights?) etc. Secondly, Field will create a new variable (as in var
) called myfile
which contains information and access to the things that you’ve loaded. Feel free to pass in any legal name for this argument
Please note, loadGLTF will return before the model and before myfile
is set. Wait until the model has been loaded before proceeding. ** See this note in the reference for a way around this in alpha15.c and beyond
The contents of the myfile
vary a little depending on the loader that you are using, but it will contain at the very least:
To find out the current contents of myfile
simply print(myfile)
. We’ll probably broaden
In addition to loadGLTF
you’ll find loadFBX
(for .fbx files, popular in AutoDesk apps) and loadJSONScene
(for scenes that have been exported from our editor with ‘export scene’). These have the same arguments. If popular demand requires we can also do .obj (no animations) and .dae.
For Blender — https://github.com/KhronosGroup/glTF-Blender-Exporter. Blender is available for free https://www.blender.org/. It has a almost completely inscrutable interface that bucks all convention offset, in part, by a solid set of tutorials.
For Maya https://kashika.co.jp/product/gltfexporter/ — but note that Maya’s FBX exporter is fairly solid.
Take care to name things before you export them — you can check that the names have come in correctly in the top right hand corner of our editor. Once named you can search over the scene-graph by name in Field:
Finds the first Three.js object in the Scene called ‘name’. Case sensitive, ‘Scene’ is not the same as an object called ‘sceNE’.
Finds the first Three.js object in the Scene with a name containing ‘pattern’. E.g findBySearchingFor('ear
) matches an object called Pear
This will work for geometry (like cubes and the skins of characters) and other things (like lights and groups of objects that have no specific geometry themselves). Once you have part of your scene you need to figure out what you can do to it.
The best way to do this is to write c.
(our variable containing the thing that we want to inspect) and then press ctrl-period to bring up autocompletion, and then start typing to search. This integrates the documentation and some live introspection and lets us see what kinds of things we can type.
Here’s some more example code (that uses the new syntax for deferred execution and a Duck model curtesy of Pamela:
That’s two levels of indirection (when the mouse is pressed, load -> when the loading is finished -> scale and play). When studying this code think about how you would have come to write it. In particular how you would test those pieces of code that are deferred in more direct ways.