How to import model and associated textures into three.js from Blender?

3
votes

I'm new to Open/WebGL and am having issues getting the textures/skins from a downloaded Blender model to show up in three.js. I can verify from Chrome's Network tab that it is downloading all of the texture files, but for some reason they are not being rendered.

I am using the webgl_loader_collada.html example as a basis to import a sample 3D model from blender into three.js.

For input, I'm using the MESSENGER model available from the NASA website. For reference, the full gallery of NASA 3D Models can be seen here.

My current steps:

  • Download and open the model in Blender
  • File->Export->Collada (.dae)

To view:

  • Modify a copy of threejs/examples/webgl_loader_collada.html to point to the exported .dae file
  • Remove the scaling on line 59.

Using the default options in blender export the resulting rendering is devoid of all textures. If I enable "Include Material Textures" I end up with the gold coloring on the main part of the model, but none of the other textures are mapped and the solar panels furthermore become completely black. Alternatively, if I also check "Include UV Texture", I get an all-gray rendering with no textures.

I have also tried the three.js JS exporter plugin for Blender, but in that case (using the appropriate demo template) all I get is a JS exception "Cannot read property 'opacity' of undefined".

Am I doing something wrong in the translation process, or is this a problem with the source model? If the latter, how could I go about fixing either the original model or its exported form?

thanks, - David

2
javascriptthree.jsblender

2 Answers

4
votes

Very nice project, thanks for the link.

For the collada export

  • don't include UV textures
  • include material textures
  • don't copy (you can use the provided texture images)
  • double check textures paths in the .dae file, in the <library_images> tag, use relative ones

I tried on my own, here if you want https://github.com/vincent/three.js-nasa, but it's not perfect, for example the foil effect with the normal map is not used.

1
votes

Perhaps try the GLTF format instead of collada? It is a more modern format designed for realtime/web asset delivery and being widely adopted.

Blender exporter: https://github.com/KhronosGroup/glTF-Blender-Exporter

Once you have exported as .glb file, you can drag it on here to check it:

https://gltf-viewer.donmccurdy.com/

Then use the THREE.GLTFLoader() in THREE to load it.

enter image description here