question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Converting my scene to gltf/glb textures wrapping to default

See original GitHub issue
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
  • Dev
  • r115
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
Mugen87commented, Apr 10, 2020

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/

3reactions
donmccurdycommented, Apr 10, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Converting my scene to gltf/glb resets the U,V wrapping to default 1 ...
I am using three js gltf exporter to convert my scene to a gltf/glb format. ... applied on the texture. i have a...
Read more >
Understanding how Materials work with glTF models - YouTube
Your browser can't play this video. ... Jim & Dom explain how materials and textures work with the glTF file format.
Read more >
Cinema 4D Tutorial - How to Export AR Ready GLTF/GLB Files
In this #Cinema4D tutorial, EJ is going to show you how to export out your 3D objects from #C4D as GLTF / GLB...
Read more >
glTF Scene Toolkit - Help | OTOY
The glTF Scene Toolkit is a visual glTF editor that allows you to view, inspect, edit, optimize and compose glTF content. It is...
Read more >
Unity support for the glTF format by default (to replace Collada ...
glTF or glb in his binary version is in his version 2.0 a new open source file format that allow you to export...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found