Three.js: IO_THREE for THREE.ObjectLoader has a bug: allows only one material per geometry, and only if material has no texture

[DenisTis]

By loading each scene object separately with JsonLoader, everything works fine.

However, once all objects are combined in one scene and scene file is exported from Blender,
THREEJS refuses to use JSONLoader, and you are obliged to use ObjectLoader.
However loaded object has only one material, if material has no texture, or no material at all, if material has texture.

THREE.JS is 0.88.0, Blender v2.79, IO_THREE: 4.3.
By googling I found the issue exists from 2015 already...

By parsing exported JSON I found the reason:
"geometries" section is correct and contains all geometries used in scene.
"object-children" section contains hierarchy of all geometries used in the scene.
For example, I have 3 road blocks, this is one geometry, but 3 entries under object section.

Then each of these entries contains both propetries "geometry" and "material".

It seems to me to be a bug, as all materials should be taken from relevant "geometry" section.

Here is the same issue described 3 years ago:
https://stackoverflow.com/questions/29927755/exporting-a-scene-from-blender-to-threejs-every-object-has-just-one-single-mate

[Mugen87]

What happens when you export your scene in a format like FBX, Collada or glTF and use one of the respective loaders?

There are also some examples that illustrates the usage of these entities:

https://github.com/mrdoob/three.js/blob/dev/examples/webgl_loader_fbx.html
https://github.com/mrdoob/three.js/blob/dev/examples/webgl_loader_collada.html
https://github.com/mrdoob/three.js/blob/dev/examples/webgl_loader_gltf.html

[donmccurdy]

If you’re able to share the .blend file so something similar, that may be helpful.

The official glTF blender exporter is here: https://github.com/KhronosGroup/glTF-Blender-Exporter and you can test the result in threejs with https://gltf-viewer.donmccurdy.com/

[DenisTis]

Hi guys, thanks a lot for positive answer.
I tested the scene with glTF-Blender-Exporter and uploaded it to gltf-viewer - it works fine!
I faced a small problem (solved) as THREE.GLTFLoader is not part of THREE library but has to be added via npm package "three-gltf2-loader". The issue can be closed. I will update the documentation regarding GLTFLoader

[donmccurdy]

Many loaders aren’t included by default in three.js, but you can download the ones you want here: https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders

and then include them in the page as:

<script src="FooLoader.js"></script>

[donmccurdy]

Or in browserify / commonjs:

FooLoader = require('three/examples/js/loaders/FooLoader');

[DenisTis]

Thank you for clarifying! A small thing - I could see that GLTFLoader is not exporting shadow flags "Cast" and "Receive" from blender. As it is a minor thing, I could activate it manually. Is it planned to deliver new version of GLTFLoader? Should I open a new issue for that?

[donmccurdy]

The glTF file format doesn’t have a way to include shadows other than ambient occlusion, so you’d need to enable them after loading the model.