Canvas shadowMap not working

[mattbesedick]

Hello!

Pretty new to Three.js and r3f and I'm having trouble with shadowMap working in my project.
This is my current code:

function App() {
  return (
    <Canvas shadowMap camera={{ position: [-10, 10, 20], fov: 50 }}>
      <Physics>
        <OrbitControls />
        <Suspense fallback={null}>
          <Plane />
          <ambientLight intensity={.2} castShadow />
          <spotLight intensity={.5} position={[0, 0, 10]} castShadow />
          <directionalLight intensity={0.5} position={[0, 1, 4]} castShadow />
          <Spongebob />
        </Suspense>
      </Physics>
    </Canvas>
  );
}

Code for Plane:

const Plane = (props) => {
    return (
        <mesh receiveShadow rotation-x={-Math.PI / 2}>
            <planeBufferGeometry attach="geometry" args={[50, 50]} />
            <shadowMaterial attach="material" transparent opacity={0.4} />
        </mesh>
    )
}

Everytime this runs I get this error in the console:
"Uncaught TypeError: Cannot read property 'autoUpdate' of undefined
at WebGLShadowMap.render (three.module.js:20341)
at WebGLRenderer.render (three.module.js:25527)
at renderGl (web.js:70)
at web.js:85
at Map.forEach ()
at renderLoop (web.js:82)"

Any help would be appreciated!

[drcmda]

could you make a codesandbox for this? shadows are working, i use them regularly, but need to run this code to know what's up.

[mattbesedick]

sure thing, give me a few minutes!

[mattbesedick]

https://codesandbox.io/s/dazzling-bogdan-ibe08?file=/src/App.js

[drcmda]

is the box correct? spongebob and plane do not contain code which crashes react.

[mattbesedick]

it should be, I have it open in my browser and everything is loaded in.

[drcmda]

couple of errors: https://codesandbox.io/s/hungry-easley-lwmpi?file=/src/App.js

ambientlight cant cast shadow, i guess that's what's crashing threejs

the model didn't cast shadow nor receive shadow, if it doesn't cast the plane underneath cant receive.

the light itself was positioned improperly

[mattbesedick]

Ah okay, makes sense. Still very new to me, but thank you for your help!

[mattbesedick]

Hello!

Didn't want to make a whole new discussion for a similar issue so I hope it is okay to reply here. I am having trouble again with the shadows working...I essentially followed what you had on the previous example but I can't get it to work. I used your gltfjsx tool instead this time but still having some trouble.

here is the link to the pen: https://codesandbox.io/s/zen-frog-ufeev?file=/src/Home.js

[drcmda]

three does not work like that, unfortunately. these props must be on the meshes that cast and receive shadows https://codesandbox.io/s/gracious-diffie-6jhoe?file=/src/Home.js

[malmualla]

Am having issue with shadows in V6

<Canvas shadowMap>

Shadowmap works perfectly while - Importing Canvas from 'react-three-fiber' ( older version )

Nothing show while using V6 '@react-three/fiber' !

Is the issue version related or I missed out something ?

[drcmda]

new searchable docs site will come soon. but these are all just convenience shortcuts, when in doubt you can always access threejs stuff and set up things manually.

[CereProductions]

Hi, I've tried using the new shadow shortcut but i can't manage to get shadows on my scene, anyone can help me please? https://codesandbox.io/s/elastic-cache-p325m?file=/src/App.js

[drcmda]

you can't have shadows unless you activate them on each mesh: <mesh receiveShadow castShadow ... >

use https://github.com/pmndrs/gltfjsx this makes it easier to deal with assets.

[CereProductions]

Thank you for the reply, i'll try with that. But anyway i have receiveShadow and castShadow active on every mesh, why isn't it rendering?

[drcmda]

it's casting shadow. play with light position to make it more pronounced.