Spark - React Router

A basic example of using Spark in a React app using React Router v7 framework mode (Remix). This example uses React Three Fiber to create a basic scene with a camera with CameraControls, a SparkRenderer, and a SplatMesh.

Running the example

npm install
npm run dev

Notes

We use React Router's client modules with the *.client.tsx file name convention to import and extend Spark components. This is necessary if you enable React Router's server-side rendering and you are using a Node version older than 21. Specifically, you may need to use *.client.tsx because the Navigator API is referenced by Spark and is not available in Node before version 21.

Using Webpack

Important

This example uses Vite as the bundler. There is an issue with Spark and Webpack where the WASM URL is not properly resolved. If you are using Webpack, you can apply the following configuration to your webpack.config.js file:

module.exports = {
  module: {
    parser: {
      javascript: {
        url: false, // disable parsing of `new URL()` syntax
      },
    },
  },
};