React + r3f

A basic example of using Spark in a React app. This example uses React Three Fiber to create a basic scene with a camera with CameraControls, a SparkRenderer, and a SplatMesh.

In order to use Spark elements declaratively with JSX, we use React Three Fiber's extend function. See src/components/spark/SplatMesh.tsx and src/components/spark/SparkRenderer.tsx as examples.

Running the example

First, download the assets:

npm run assets:download

Then, run the development server:

npm install
npm run dev

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
      },
    },
  },
};