@react-three/lightmap
TypeScript icon, indicating that this package has built-in type declarations

0.0.8 • Public • Published

@react-three/lightmap

In-browser lightmap and ambient occlusion (AO map) baker for react-three-fiber and ThreeJS.

example screenshot of lightmap baker output

Example:

<Lightmap>
  <mesh position={[0, 0, 0]} castShadow receiveShadow>
    <boxBufferGeometry attach="geometry" args={[3, 3, 1]} />
    <meshStandardMaterial attach="material" color="#ff6080" />
  </mesh>

  <mesh position={[0, 0, 1.8]} castShadow receiveShadow>
    <boxBufferGeometry attach="geometry" args={[2, 2, 2]} />
    <meshStandardMaterial attach="material" color="#4080ff" />
  </mesh>
</Lightmap>

Try it in this editable sandbox.

NOTE: if you are using mode="legacy" on your <Canvas> tag please add legacySuspense flag to the lightmap, otherwise it will not wait until your scene content is fully loaded. This is not an issue in most situations, unless you have explicitly set the mode prop on <Canvas>.

Local Development

git clone git@github.com:pmndrs/react-three-lightmap.git
cd react-three-lightmap
yarn
yarn storybook

Notes

Based on original experimental implementation by @unframework.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.8
    71
    • latest

Version History

Package Sidebar

Install

npm i @react-three/lightmap

Weekly Downloads

74

Version

0.0.8

License

MIT

Unpacked Size

726 kB

Total Files

29

Last publish

Collaborators

  • bela-bohlender
  • nksaraf
  • isaacmason
  • wiledal
  • codyjasonbennett
  • farazshaikh
  • joergjaeckel
  • bjornstar
  • gsimone
  • giulioz
  • stephencorwin
  • dropthebeatbro
  • mlperego
  • sniok
  • iinfin
  • codynova
  • drcmda
  • marcofugaro
  • alaric.baraou
  • tdfka_rick
  • stockhuman
  • unframework