Collada loses Textures on export to GLB

Questions
1

Simple load of object with

const loader = new ColladaLoader()
loader.load(url, (obj) => {
    this.loadedObj = obj
    this.scene.add(obj.scene)
})

And exporter

const exporter = new GLTFExporter()
exporter.parse(this.loadedObj.scene, (obj) => {
    const data = new FormData()
    const glb: Blob = new Blob([obj], {type: 'application/octet-stream'})
    data.append('file', glb, 'file1.glb')
    axios.request({
        method: 'POST',
        headers: {'Content-type': 'multipart/form-data'},
        url: `${myurl}/upload.php`,
        data: data
   })
   .then(console.log)
   .catch(console.error)
}, {binary: true, animations: [],
        forceIndices: false, truncateDrawRange: false, trs: false, forcePowerOfTwoTextures: true,
        embedImages: true
    })

This works for saving other models just fine to glb but for some reason when exporting .dae with jpgs attached to them, in my case Smiley face loses its color and exports a glb smiley face that is all black. Same happens on other loaders if it even loads.

Any way I can retain the .jpg textures on export?

the php file simply saves to a file to be viewed. Already tested and works to save glbs

2

Are you running that JS on the server, or in the browser? I’m not sure if textures work right in nodejs… if it’s in the browser i’d suggest filing a bug, assuming the COLLADA file works in threejs.org/editor/ before conversion.

One option would be https://github.com/KhronosGroup/COLLADA2GLTF/.

3

This is in the browser. It loads properly on my page and on https://blackthread.io/gltf-converter/ . However when exporting to glb it loses the .jpg coloring and texture. It doesn’t seem to load in the threejs.org editor.

4

It does load if you drag’n’drop the Collada file with textures:

image
image1000×876 85 KB

Um, but exporting to glTF does not seem to work. The resulting file does load in gltf-viewer and babylon.js sandbox but without the texture. However, I can see that an image is defined in the glTF manifest file.

smile.gltf (1.0 MB)

5

It took quite some time to figure out what’s going wrong.

The problem is that the Collada asset has a vertex color attribute with just black color values. ColladaLoader does not automatically set Material.vertexColors to THREE.VertexColors. GLTFLoader does however. So the problem is that the black vertex colors overshadows the diffuse texture. Hence, it appears no texture is applied at all.

The workaround is to set vertexColors to THREE.NoColors. Or you fix the Collada asset in the first place and remove the vertex color attribute.

2 Likes