THREE.js

The @liqvid/react-three package allows you to use React Three Fiber in Liqvid videos. It exports a single component, <Canvas/>, which should be used in place of the <Canvas/> component from React Three Fiber. This does three things:

• passes the Liqvid context through so that usePlayer(), useTime() etc. still work

• adds touch-action: "none" to the container div styles (necessary for mobile interactions to work)

• adds data-affords="click" to the container div so that canvas clicks will not pause the video

For everything else, see the React Three Fiber docs and THREE.js docs.

Example

TSX

Example: Alexander horned sphere

Here is an example (with very messy code) illustrating the Alexander horned sphere.

TSX