How to import and use three-csm on react?

Questions
1

Hi,

I’ve just discover React with three/drei, it’s fantastic !!!

But i don’t know how for example use this : three-csm - npm

on my react project.

How do you insert csm into a jsx function ?

Thanks for your reply

2

This may already be adopted in drei as it has been in the three library demo & original repo

3

it really is threejs you are using, just expressed a little differently. just do what the readme for that library prescribes and you’ll get csm in react.

it looks like you have to call csm.setupMaterial(material) for each material, but if your scene is static a quick re-usable component would look like this:

function CSM({ children, ...props }) {
  const ref = useRef()
  const { scene, camera } = useThree()
  const [csm] = useState(() => new THREE.CSM({ ... }))
  useLayoutEffect(() => void ref.current.traverse((o) => (o.material) && csm.setupMaterial(material)))
  useFrame(() => void csm.update(camera.matrix))
  return (
    <group ref={ref} {...props}>
      {children}
    </group>
  )
}

and you would use it like so

<Canvas shadows>
  <CSM>
    <SomeModel />
    <mesh castShadow receiveShadow geometry={...} material={...} />
    ....
  </CSM>
</Canvas>

if you are happy with the abstraction you have in the end consider adding it to drei so nobody needs to struggle with this any longer. :slight_smile:

2 Likes
4

Hi both and thanks for your response.
@Lawrence3DPK CSM is not implemented in drei :frowning:

@drcmda, i followed your code but it does not work. I also tried to solve it with CHATGPT but without success. Here is the sandbox, maybe you can help me?

5

what i posted was pseudo code :smile: new THREE.CSM({ ... }) is not javascript, with ... i meant to say put all the props in there that csm needs like the docs prescribe

6

yes you true :slightly_smiling_face: but also with parameters it doesn’t works :

7

here: exemple basique avec tentative csm-ver2 (forked) - CodeSandbox

but i get shader errors from it, :

ERROR: 0:1703: '[]' : array index out of range
ERROR: 0:1703: '[]' : array index out of range
ERROR: 0:1705: '[]' : array index out of range
ERROR: 0:1705: '[]' : array index out of range

  1698: 			getDirectionalLightInfo( directionalLight, geometry, directLight );
  1699: 
  1700: 			#if defined( USE_SHADOWMAP ) && ( 4 < 5 )
  1701: 
  1702: 			directionalLightShadow = directionalLightShadows[ 4 ];
> 1703: 			if(linearDepth >= CSM_cascades[4].x && linearDepth < CSM_cascades[4].y) directLight.color *= all( bvec2(
8

…is there a solution on React to use good shadows on huge scene with performance and without csm ?

9

looked it up, it’s a known bug: Shader Error · Issue #10 · StrandedKitty/three-csm · GitHub it can not handle any other light casting shadows. so now it runs, i still don’t see shadows but that’s most likely just configuration.

10

Yes, i have open your sandbox, no error but no shadows as you say.

You have just change the order of the parameters to solve that ? Why the order is important ?

11

what order? i linked the error, the bug in csm is related to lights casting shadows, there was a pointLight with castShadow in your code, you can’t do that no more it seems. as for why there aren’t any shadows, i guess you need to ask on their github. csm is now working and react is out of the way, whatever issue is left is just csm config.

12

OK big thanks to you i will try with your code on github :wink:

13

looked in their github again and copied a solution from someone, a whole bunch of props that i dont know what they do but now i see shadows.

14

Waouw thanks !!!, i have post on github :frowning: