Struggling with gltf and lighting

the key for good looking scenes is getting color correction right and unfortunately threejs comes with a configuration that sets you back Color management in three.js

[With gamma workflows, or incorrectly-configured linear workflows] the material and lighting parameters we would need to choose would be completely devoid of any physical meaning whatsoever; they’ll be just a random set of numbers that happen to produce an OK looking image for that particular scene , and thus not transferable to other scenes or lighting conditions. It’s a lot of wasted energy to work like that. … It’s also important to point out that incorrect gamma handling in 3D rendering is one of the main culprits behind the “fake plasticky CGI look” in some (mostly older) games.

i posted the other link describing THREE.ColorManagement above. enable it and you get the same results.

@drcmda thanks

@drcmda btw i have a question, can i add lights in result scene? after i generated jsx code with gltfjsx.
not only lights in general, maybe snow particles generated by threejs itself. i am going to fix several things in my gltf model that was broken, and than i will try to import it with gltfjsx, and hopefully later i will be able to add lights&snow and some text(buttons).

you can add whatever you want. click the demo again, added some particles flying around, you’re free to add lights as well. keep in mind that lights are very expensive, every pointlight adds 6 extra renders/draw calls. three.js manual

@drcmda recently i started to recreate code you created, i managed to generate gltfjsx file, but i noticed that, your code is way more complicated:

<mesh
        castShadow
        receiveShadow
        geometry={nodes.Plane001.geometry}
        material={materials['Material.006']}
        position={[-0.08, 1.38, -0.62]}
        rotation={[Math.PI / 2, -1.57, 0]}
      />

and mine is way simpler:

<mesh geometry={nodes.Plane001.geometry} 
material={materials['Material.006']} 
position={[-0.08, 1.38, -0.62]} 
rotation={[Math.PI / 2, -1.57, 0]}
 />

i noticed that most of the meshes have castShadow and recieveShadow but still in the end once i modified my glb file and added more objects, somehow my generated code is only 140 lines in comparison to yours which is 600+ lines.

i would like to know if there is a package or app that helps modify gltfjsx dynamically? (meaning if i want to modify some object, in this case tree leaves the glowRed material form your code, i don’t have to go through my blender and match the geometry name to the code or adding castShadow properties , do i? )

i added the props, in VSC you can select something and hit shift-command-L and you can multi-edit every occurrence. i looked the meshes up in blender that were supposed to glow and exchanged their materials. gltfjsx just exposes the scene graph nothing more, if your model has 10 meshes so will the jsx. if yours has less it’s probably due to compress and packing steps, gltfpack or whatever made it so. and it’s good, less nodes/vertices/drawcalls is something to strive for.

you can also do this as a traversal if that’s easier for you:

function Model() {
  const { scene, nodes, materials } = useGLTF(url)
  useLayoutEffect(() => {
    Object.values(nodes).map(node => node.castShadow = node.receiveShadow = true)
    nodes["whatever"].material = new THREE.MeshBasicMaterial(...)
  }, [])
  return <primitive object={scene} />
}

@drcmda thanks again, very helpful

@drcmda i have found this package react-particles-webgl i tried to add it to my scene
i get errors for some reason and cant get it to work, could you help me out.

dont really need to use that exact particles, i just want to create infinite snow fall, i tried sparkles form r3-drei, but i couldnt find settings that change particles direction and movement speed…