GLTFLoader: Inconsistent lighting on objects with negative scaling

[akkara]

Description

When SketchUp Components are mirrored (using negative scale values) and then imported into Three.js, the lighting/shading of those objects is compiled incorrectly. Since mirrored instances still reference the original Component definitions, the problem consistently appears for every mirrored element those scaled with negative values.

The only workaround is to "Explode" every mirrored Component inside SketchUp before exporting. However, this is impractical, since architects and engineers deliver the models to me with Components, and every revision requires me to manually find and explode mirrored Components again.

Suggested fix

When importing SketchUp models, Three.js should ensure that geometry vertices are processed with positive scale values, so that mirrored instances don’t cause shading/light compilation errors.

Reproduction steps

1. In SketchUp, create a Component.
2. Add mirrored instances of this Component using negative scale values (e.g. -1).
3. Export the model and load it into Three.js.
4. Observe the incorrect lighting on mirrored instances.

Code

none

Live example

https://akkara.github.io/threejs-scaled-components/scaled.html

Screenshots

Version

r179

Device

Desktop

Browser

Chrome

OS

Windows

[donmccurdy]

Prior discussion, for context:

https://discourse.threejs.org/t/threejs-doesnt-properly-render-objects-those-have-scale-1-1-1/86573

Currently I believe three.js' policy is to not modify vertex data or node transforms during loading, but to attempt to handle the lighting consistently so it isn't visible that objects have negative scaling. I'm not sure why that isn't happening in the demo above, though — that may require someone to investigate further.