@zappar/mattercraft-rspack-plugin

An Rspack plugin for building Mattercraft projects outside of the Mattercraft editor. Useful for integrating Mattercraft content into your own Rspack-based apps or CI/CD pipelines.

Mattercraft is a browser-based 3D content development environment for building interactive AR, VR, WebXR and 3D web experiences. Built on Three.js, it lets you create and publish rich 3D content with a visual editor and seamless scripting.

Installation

npm install @zappar/mattercraft-rspack-plugin

Setup

Add the plugin and required rules to your Rspack config:

import path from 'node:path';
import { HtmlRspackPlugin, type Configuration } from '@rspack/core';
import MattercraftPlugin from '@zappar/mattercraft-rspack-plugin';

export default {
  entry: './src/index.ts',
  output: {
    path: path.resolve(import.meta.dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.zcomp', '.zvalues'],
    extensionAlias: {
      '.js': ['.ts', '.js'],
    },
    fullySpecified: false,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'builtin:swc-loader',
        options: { jsc: { parser: { syntax: 'typescript' } } },
      },
      {
        test: /\.m?js$/,
        resolve: { fullySpecified: false },
      },
      {
        test: /\.(glb|gltf|png|jpe?g|webp)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [new MattercraftPlugin(), new HtmlRspackPlugin({ template: './index.html' })],
} satisfies Configuration;

That's it. Rspack will now handle Mattercraft project files automatically.

HTTPS during development

If your project uses the device camera, browsers require a secure context (HTTPS) for camera access. Enable it in your Rspack dev server config:

export default {
  devServer: {
    https: true,
  },
};

Requirements

• Rspack 1 or later
• Node 24 or later

License

Proprietary - Zappar Limited