Adding lights to the global canvas ?

[antoine-hellocafeine]

Hey there, just a quick question : how can we add spotlights, pointlights etc. in the global canvas ? I tried adding environment, it worked, ambientlight, it worked, postprocessing, it worked
Now all I need is a spotlight but it never "shows" any results although I have no error in the console
Any idea ?
Thanks in advance for anyone reading this !

<GlobalCanvas
  eventPrefix="client"
  eventSource={ref}
  style={{ pointerEvents: 'none' }}
  globalRender={false}
>
  <Environment
    // files="/hdri.hdr"
    background={false}
    environmentIntensity={0.1}
    preset={'warehouse'}
  />
  <pointLight position={[0, 0, 0]} intensity={5} />
  <SpotLight
    intensity={0.5}
    position={[0, 0, 0]}
    angle={0.1}
    penumbra={0.5}
    distance={100}
    decay={2}
  />
  <ambientLight intensity={2} />
  <EffectComposer>
    <ToneMapping blendFunction={BlendFunction.PIN_LIGHT} />
  </EffectComposer>
</GlobalCanvas>

[ffdead]

Hi @antoine-hellocafeine

Spotlights also work! But I think problem is the position of your light. By default the scroll-rig scales the canvas to match pixels, so 1px on the screen is 1 unit in the Threejs scene to make it easier to match sizes.

Try moving the spotlight further away and/or set distance={0} to make sure it reaches your object. Maybe bump up the intensity while you are debugging too

I usually set <GlobalCanvas scaleMultiplier={0.01} /> which makes the scale of the scene 100x smaller and closer to normal units. Check out the section about Z-depth fighting in the readme FAQ for more info

[antoine-hellocafeine]

Thank you so much @ffdead , scaleMultiplier did help making it visible (as for distance, I tried many values including 0 before but it didn't change a thing, forgot to mention in the post)

[ffdead]

I suspect you initially placed the spotlight inside the object you were trying to light as the default scale is huge