GLTFExporter ignores material.side: 1 (backside)

Questions
,
1

I have a model on a scene where I can edit its material and then export everything as a glb using GLTFExporter, everything works fine, except if material.side is set to 1 (back). On the canvas it renders correctly but the exported moodel has material side set to 0 (front). This only happens with backside, frontside and doubleside works perfect.
Is this an error on GLTFExporter?
To test this, load a model, change its material side to 1 and export it.

1 Like
2

glTF does not have an equivalent of the backside option — only frontside and doubleside. You may need to reverse the winding order of the triangles to export this.

1 Like
3

thank you! I will look into it!

1 Like
4

Code I used to unwind vertices on modern day versions of THREE.js. (Should work for all non-indexed buffer-geometries). Needed to export a skybox with backside and either GLTF still doesn’t support backside or GLTFExporter doesn’t support backside.

  for ( var i = 0; i < geometry.index.array.length-1; i=i +3 ) {
      var temp = skyGeo.index.array[i];
      geometry.index.array[i] = skyGeo.index.array[i+2];
      geometry.index.array[i+2] = temp;
  }

For those unfamiliar, on modern implementations of THREE, the direction a face (triangle) is controlled by vertices order. Above code flips the order in a way that all the triangle faces are flipped to face the opposite direction. Thus the backside becomes the frontside and vis-a-versa.

Should work on any of the default THREE geometry constructors (sphere/box/torus/etc) though only tested on sphere. Unsure but I think it is possible for geometries to have their vertices stored in alternate locations like bufferAttributes so try there if above code doesn’t do it for you. If you have an indexed geometry, it is pretty easy to convert to non-indexed variant via some built in methods, I just don’t remember them off the top of my head.