@react-three/timeline

Write composable declarative
3D behaviors like a story.

npm install three @react-three/fiber @react-three/timeline

What does it look like?

A simple timeline with 2 actions (look at red pill and look at blue pill) with an infinite loop

const camera = useThree((s) => s.camera)
const redPill = useRef<Mesh>(null)
const bluePill = useRef<Mesh>(null)

useTimeline(async function* () {
  while (true) {
    //transition to look at the red pill
    yield* action({ update: lookAt(camera, redPill.current!, spring()) })
    //transition to look at the blue pill
    yield* action({ update: lookAt(camera, bluePill.current!, spring()) })
  }
}, [])

return (
  <>
    <Text position-y={1} scale={0.3}>
      Remember: all I'm offering is the truth. Nothing more.
    </Text>
    <mesh position-y={-1} position-x={-2} rotation-y={(-30 / 180) * Math.PI} scale={0.2} scale-z={0.4} ref={redPill}>
      <sphereGeometry />
      <meshPhysicalMaterial emissive="red" emissiveIntensity={0.5} color="red" />
    </mesh>
    <mesh position-y={-1} position-x={2} rotation-y={(20 / 180) * Math.PI} scale={0.2} scale-z={0.4} ref={bluePill}>
      <sphereGeometry />
      <meshPhysicalMaterial emissive="blue" emissiveIntensity={5} color="blue" />
    </mesh>
  </>
)

Documentation

• What is a timeline?
• Building your First Timeline
• Overview over All Functions
• Tutorial: Building Complex Timelines using Parallel
• Tutorial: Building Graph Timelines
• Tutorial: Use pmndrs/timeline in vanilla three.js

Sponsors

This project is supported by a few companies and individuals building cutting edge 3D Web & XR experiences. Check them out!

Roadmap

[ ] record, useRecordedTimeline, ... => allows to bind the timeline progress to any controls (e.g. scrolling); allowing using markers to attach scroll positions (e.g. button center screen) to the time of the timeline
[ ] yield* cleanup(() => ...)
[ ] add external methods for the graph (set/get state externally)
[ ] queue with optional priority sorting and cancelation (configure what happens whith the current timeline when canceled)
[ ] timeline visualization and yield* marker(...) to appear in the visualization (e.g. log values or complete json objects)