Selective Lights - Layers Impas

[nicuzbona]

Hey everyone! I'm trying to implement selective lights with layers in my scene as i have multiple materials and some of them need more light and some don't need it.

I found this example in threeJs and I'm trying to make it work in r3f.

Here is the light:
<spotLight layers={0} ref={lightRef} intensity={0.5} position={[40, 30, 40]} penumbra={0.5} shadow-mapSize-width={5120} shadow-mapSize-height={5120}/>

here is one mesh in a diffrent layer:
<mesh layers={1} position={position} scale={[0.7, 0.7, 0.7]} geometry={geometry} rotation={[-Math.PI / 2, 0, 0]} onClick={onApplicationClick} > <meshStandardMaterial attach="material" {...material} layers={1} /> </mesh>

So, I've tried with the camera to see if the layers work. They work, i can render which layer I want and only the objects in that layer are rendered. Done this with camera.layers.enable(0); / camera.layers.enable(1);, because i can get the camera from the useThree hook.
But I'm searching a way to light only layer 0 meshes.

Done this in the spotLight component:
useFrame(() => { lightRef.current.layers.enable(0); });
but it doesn't work. :(

I think I need to do something like this:

spotLight = new THREE.SpotLight(0xffffff, 1); spotLight.layers.enable(0);
based on that threeJs example but I don't know how to implement it with r3f.

Any help will be appreciated, big time appreciated! :)

[drcmda]

you do it the exact same way you would layer objects in plain threejs. i would suggest useEffect (executes after the graph renders and is committed) or useLayoutEffect (executes after render, but before commit to threejs)

const ref = useRef()
useLayoutEffect(() => {
  ref.current.layers.enable(layer)
  ...
}, [layer])
return <mesh ref={ref} />

otherwise doing <mesh layers={0} /> will call .set(0) see: https://github.com/react-spring/react-three-fiber/blob/master/api.md#shortcuts-set

as for materials, i don't think you can set layers on them in threejs.

[nicuzbona]

Put together this sandbox
https://codesandbox.io/s/selective-lights-m80vi?file=/src/Scene.js

Also tried with useLayoutEffect..
Am I missing something?

[drcmda]

i cleaned your box, everything is as it should be: https://codesandbox.io/s/selective-lights-85c90?file=/src/App.js (things like shadows and tonemapping are inbuilt) but the example from above is not official threejs it seems, that must be a fork. see: https://discourse.threejs.org/t/layers-and-lights/4155/11

you can of course use that fork in your package.json instead of the official three, then it would work. r3f is not tied to a specific version, you could take any version you like.

[drcmda]

yep, it works if you alias to that version: https://codesandbox.io/s/musing-kirch-8p3r2

[nicuzbona]

Ohh, yes. I see it now.. Did't saw that it's a fork and not the official threeJs.

Thank you!
And also thank you for the cleanup! :D
Happy weekend!

[Russo-creation]

I see that this example was made with three.js r 100dev is there any workaround to the same with newest release of three.js - I done some test's and this didn't work https://codesandbox.io/s/caustics-forked-xy3cgn?file=/src/App.js:815-827

[darrren]

I have also faced the problem, any update?

[ghannoum74]

i have faced the same problem with like solar system i want sun to be ambiant and the other planets spot from the sun