Illust
MarketplaceGlobal Art MapBlogTwitter
  • Illust.space
  • .github
    • pull_request_template
  • docs
    • Illust Dev Docs
    • Packages
    • process
    • dev-workflow
      • Deployment
      • Development process
      • Visual Studio Code
    • libraries
      • Storybook
      • Act
      • Aframe
      • Chakra UI
      • Cypress
      • Hosting
      • React Three Fiber
        • Shadows
      • Firebase
        • Firestore
      • zustand
      • Firebase Url Shotener
    • Flows
      • User Sign In
      • Aframe AR Map
  • packages
    • Illust API
    • Illust Marketplace
    • Migrate DB
    • scraper
    • Illust Shared
    • Illust WebAR Discovery App
  • Illust Code Style Guide
    • JavaScript/TypeScript
    • Code Orgainzation
    • React
    • Testing
  • Knowledge Base
    • React
      • Hooks
Powered by GitBook
On this page

Was this helpful?

  1. docs
  2. libraries
  3. React Three Fiber

Shadows

There are a number of options and properties that need to be configured correctly in order for shadows to render appropriately in r3f. Here is a list of what is needed:

  • shadows needs to be added to the Canvas element

  • castShadow needs to be added to any shadow-casting lights

  • castShadow needs to be added to any meshes you want to cast shadows

  • receiveShadow needs to be added to any meshes you want to receive shadows (along with making sure the material is capable of rendering shadows, mostly meaning no meshBasicMaterials)

  • shadow-camera-near and shadow-camera-far need to be set to reasonable distances, shadow-camera-near defaults to .5 and -far defaults to 50

  • shadow-mapSize-height and -width need to be set to set to a size that is a power of 2. Both default to 512, which should usually be a pretty decent value

In order to get shadows to work in 8th Wall, you need to make sure that the renderer's shadowMap.enabled is set to true.

xrScene.renderer.shadowMap.enabled = true

PreviousReact Three FiberNextFirebase

Last updated 2 years ago

Was this helpful?