index: demos

To use a given basic-demo as a template for a new myproject:

$ npx degit pmndrs/examples/demos/basic-demo myproject
$ code myproject

Every demo has a pmndrs.json file containing the catalog metadata used by the website:

{
  "$schema": "../../schemas/pmndrs.schema.json",
  "title": "Basic Demo",
  "description": "Shows how to form self-contained components with their own state and user interaction.",
  "tags": ["interaction", "pointer-events"],
  "authors": [],
  "source": "https://codesandbox.io/s/rrppl0y8l4",
  "libraries": ["@react-three/fiber", "@react-three/drei"],
  "assets": []
}

Use package names for libraries; each entry must also be a dependency of the demo. publishedAt is optional and uses YYYY-MM-DD when the original publication date is known. Add externally sourced models, textures, fonts, audio, and other assets to assets with their creator, source, and license when available.

Run pnpm lint:metadata to validate every metadata file.

Prerequisites:

• Install nvm - Node Version Manager, then:

  $ nvm install
  $ nvm use
  $ node -v # make sure your version satisfies package.json#engines.node

  nb: if you want this node version to be your default nvm's one: nvm alias default node

$ pnpm install

$ pnpm dev

$ pnpm build

NB: pnpm build --force to ignore turbo cache

Then npx serve out.

$ pnpm test

To update the snapshots: pnpm test -- -- --update-snapshots

$ BASE_PATH=/examples pnpm test

For generating reproductible snapshots, we use mcr.microsoft.com/playwright:v1.45.3-jammy Docker image.

$ docker run -it --rm  \
  -w /app -v "$(pwd)":/app -v /app/node_modules \
  mcr.microsoft.com/playwright:v1.45.3-jammy /bin/sh
#
# echo "Hey, I am acting like the CI"
#
# pnpm install
# pnpm test

or in one command to update snapshots:

docker run --rm  \
  -w /app -v "$(pwd)":/app -v /app/node_modules \
  mcr.microsoft.com/playwright:v1.45.3-jammy /bin/sh -c "pnpm install && pnpm test -- -- --update-snapshots"

• https://docs.pmnd.rs/react-three-fiber/getting-started/examples