.glb import ZIMjs javascript solution to see the texture , why so difficult?

Discussion
1

I like threejs to import gltf into new GKTFloader(“url”)

more info into example  ZIM with three.js 

but when using an .glb I can’t see the color texture appeari g.

so from this video https://youtu.be/017kfUTcAPE?si=ah4ugh3BVhNzGfhb

and video

realPlayerMe character maker you can extract .glb

see video

but many people have problem with that Issues with Model textures not displaying in Three.js – Material Conversion Problem?

so solution seems to script and turn 180degree and flip the file to be able to see it in a html5 canvas

see the discussion at Issues with Model textures not displaying in Three.js – Material Conversion Problem?

thanks to make a .glb directly visible onto the html5 canvas

click/scan the qr-code to see fullscreen app ZAPP: person3D fix+head turns up/down+left/right sliders + you move cam(ml5) | ZIM JavaScript Canvas Framework

or this with small body ZAPP: threejs person with hat: now canlook to the moving the cursor (.glb) | ZIM JavaScript Canvas Framework

idea from https://youtube.com/shorts/9GGaOP8ooOA?si=b_feM-OePiNFsmAQ

and https://youtu.be/017kfUTcAPE?si=ah4ugh3BVhNzGfhb

check also discussion Loading GLB models with texture. Can't see the texture in the scene! - #5 by shanky

2

check also how bones can turn into the threejs editor https://youtu.be/P7Lley9BjGA?si=LSXNWDzbhlgwXOdN

from article Animating Models Programmatically in Three.js - Wael Yasmina

so the idea of turning the head following the cursor at How to Make a Model's Head Follow the Cursor in Three.js - Wael Yasmina

with video I remade it in ZIM Editor - JavaScript Canvas Online Code Editor and Viewer

3

many have problem with gltf without color texture Loading GLB models with texture. Can't see the texture in the scene! - #5 by shanky

and this topic In scene.gltf file "images" for textures won't load in the browser using GLFLoader

and Blender Exported .glb model not loading with texture

4

Different file formats and engines have different conventions for UV coordinates. In glTF files, the UV coordinates are defined such that:

…the texture coordinate value of (0.0, 0.0) points to the beginning of the first (upper-left) image pixel, while the texture coordinate value of (1.0, 1.0) points to the end of the last (lower-right) image pixel.

In three.js this would imply that your THREE.Texture should be configured with the texture.flipY = false setting, the default is true. Other 3D model formats may have other conventions, or none specified. GLTFLoader handles this automatically if the texture is referenced by the .gltf/.glb file, but when manually adding a texture to a mesh from a glTF file, you’ll need to set .flipY=false yourself. Whether ZIMjs has any additional requirements, I’m not sure.

An alternative to texture.flipY would be to flip the texture coordinates on the geometry after loading, instead. If you prefer that approach, see: