Three.js: Converting my scene to gltf/glb textures wrapping to default

[goranristic123]

Description of the problem

I am using three js gltf exporter to convert my scene to a gltf/glb format. Everything gets exported nicely except the textures repeat that i have applied. I have a view to change the wrapS and wrapT at run time in the application but after exporting they get reset to default.

Here is the code that changes the textures, and it gets rendered correctly.

let txt = new THREE.TextureLoader().load(color.texture);

txt.repeat.set(color.size[0], color.size[1], color.size[2]);
txt.wrapS = THREE.RepeatWrapping;
txt.wrapT = THREE.RepeatWrapping;

new_mtl = new THREE.MeshPhongMaterial({
    map: txt,
    shininess: color.shininess ? color.shininess : 10
});

parent.traverse((o) => {
    if (o.isMesh && o.nameID != null) {
        if (o.nameID == type) {
            o.material = new_mtl;
            materials[o.uuid] = new_mtl;
        }
    }
});

Here is how it looks in browser: https://imgur.com/eh65Jf4
And when it gets exported and previewed with (https://gltf-viewer.donmccurdy.com/ or https://sandbox.babylonjs.com/): https://imgur.com/bJxm8nI

This is the code I used for exporting model:

exporter.parse(theModel, function (gltf) {
    saveJSON(gltf, 'model.glb');
}, {
    trs: false,
    onlyVisible: true,
    truncateDrawRange: true,
    binary: false,
    forceIndices: false,
    forcePowerOfTwoTextures: true,
    maxTextureSize: 4096,
});

Three.js version

• [x] Dev
• [ ] r115

Browser

• [ ] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [ ] Windows
• [x] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[mrdoob]

We seem to be exporting the values though...

https://github.com/mrdoob/three.js/blob/63f514f3d0de0e8f8d603541100c448cb8cf163c/examples/jsm/exporters/GLTFExporter.js#L856-L857

[goranristic123]

Both map.wrapS and map.wrapT have value 1000. They are not in the THREE_TO_WEBGL map, so wrapS and wrapT get value of undefined. I'm not sure if I'm doing something wrong, or it is bug in the exporter

[WestLangley]

What is this doing?

txt.repeat.set( color.size[ 0 ], color.size[ 1 ], color.size[ 2 ] );

repeat.set() only takes 2 args.

[goranristic123]

@WestLangley How many times to repeat the texture. Ok fixed it, but the problem stil preserves.

[goranristic123]

Here I've put up a simple example: https://jsfiddle.net/s04za7vu/

Click export model, and then preview downloaded model. And you'll see what I'm talking about

[WestLangley]

Unrelated tip: Add controls.update() to enable damping. https://jsfiddle.net/y160r4vz/. For better performance, remove the animation loop since the scene is static.

More important tip: Avoid small values of the near plane to avoid shadow jittering. https://jsfiddle.net/5vqwaf9z/.

[goranristic123]

Thanks for insights, I'll surely implement them.

[Mugen87]

Both map.wrapS and map.wrapT have value 1000. They are not in the THREE_TO_WEBGL map, so wrapS and wrapT get value of undefined.

That's strange since 1000 corresponds to THREE.RepeatWrapping. And that value is honored in the exporter:

https://github.com/mrdoob/three.js/blob/63f514f3d0de0e8f8d603541100c448cb8cf163c/examples/jsm/exporters/GLTFExporter.js#L70

[Mugen87]

You have actually used three.js from release R108 and GLTFLoader and GLTFExporter from release R92. This combination is not allowed. The core and examples files always have to match in their version. After upgrading all files to R115, the export works as expected.

Updated fiddle: https://jsfiddle.net/h2ar4opf/1/

[Mugen87]

Please use for such issues the forum next time. If the discussion reveals it's a bug, you can report an issue at GitHub.

[donmccurdy]

^Filing the issue was my suggestion, it had looked like a bug to me. Glad to hear it was just a version mismatch!