PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

0.6.2

npm

3d-configurator

mashroom 3d configurator

Published15 Apr 2025
Direct dependencies50
Transitive dependenciesNot calculated

README

Current package documentation

Mashroom 3D Configurator

Overview

This library provides a 3D configurator component for React applications, built using @react-three/fiber and three.js. The main component, GLBViewer, allows you to load and customize GLB models interactively.

Installation

To use this library in your project, you need to install it along with its peer dependencies.

npm install mash-3d-configurator
npm install react@^19.0.0 react-dom@^19.0.0

Usage

Here is an example of how to use the GLBViewer component in your React application:

import React from 'react';
import { GLBViewer } from 'mash-3d-configurator';

function App() {
  return (
    <div className="App">
      <GLBViewer glbUrl="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb" materialDefinitions={materialDefinitions} />
    </div>
  );
}

export default App;

GLBViewer Component

The GLBViewer component allows you to load and customize a GLB model.

Props

  • glbUrl: The URL of the GLB model to load.
  • materialDefinitions: JSON array for materials.

Customization

The GLBViewer component provides an interface to select and customize parts of the model. You can select different parts and change their materials interactively.

Development

To run the test environment for development:

npm install
npm run build:lib:watch
npm run dev:test

To run Storybook:

npm run dev:storybook

To build Storybook:

npm run build:storybook

License

This project is licensed under the MIT License.

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 52

Native requirements
50 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
three
Environment
{
  "local_name": "three",
  "alias": false,
  "peer_metadata": null
}
^0.175.0runtime
tailwindcss
Environment
{
  "local_name": "tailwindcss",
  "alias": false,
  "peer_metadata": null
}
^4.1.3runtime
@react-three/drei
Environment
{
  "local_name": "@react-three/drei",
  "alias": false,
  "peer_metadata": null
}
^10.0.6runtime
@react-three/fiber
Environment
{
  "local_name": "@react-three/fiber",
  "alias": false,
  "peer_metadata": null
}
^9.1.2runtime
@fontsource/poppins
Environment
{
  "local_name": "@fontsource/poppins",
  "alias": false,
  "peer_metadata": null
}
^5.2.5runtime
clsx
Environment
{
  "local_name": "clsx",
  "alias": false,
  "peer_metadata": null
}
^2.1.1development
vite
Environment
{
  "local_name": "vite",
  "alias": false,
  "peer_metadata": null
}
^6.0.11development
husky
Environment
{
  "local_name": "husky",
  "alias": false,
  "peer_metadata": null
}
^9.1.7development
jsdom
Environment
{
  "local_name": "jsdom",
  "alias": false,
  "peer_metadata": null
}
^26.0.0development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^19.0.0development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^8.55.0development
vitest
Environment
{
  "local_name": "vitest",
  "alias": false,
  "peer_metadata": null
}
^3.0.5development
postcss
Environment
{
  "local_name": "postcss",
  "alias": false,
  "peer_metadata": null
}
^8.5.3development
prettier
Environment
{
  "local_name": "prettier",
  "alias": false,
  "peer_metadata": null
}
^3.4.2development
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
^19.0.0development
storybook
Environment
{
  "local_name": "storybook",
  "alias": false,
  "peer_metadata": null
}
^8.5.3development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^5.7.3development
@types/node
Environment
{
  "local_name": "@types/node",
  "alias": false,
  "peer_metadata": null
}
^22.13.1development
postcss-cli
Environment
{
  "local_name": "postcss-cli",
  "alias": false,
  "peer_metadata": null
}
^11.0.1development
@types/react
Environment
{
  "local_name": "@types/react",
  "alias": false,
  "peer_metadata": null
}
^19.0.8development
autoprefixer
Environment
{
  "local_name": "autoprefixer",
  "alias": false,
  "peer_metadata": null
}
^10.4.21development
concurrently
Environment
{
  "local_name": "concurrently",
  "alias": false,
  "peer_metadata": null
}
^9.1.2development
tailwind-merge
Environment
{
  "local_name": "tailwind-merge",
  "alias": false,
  "peer_metadata": null
}
^3.0.1development
vite-plugin-dts
Environment
{
  "local_name": "vite-plugin-dts",
  "alias": false,
  "peer_metadata": null
}
^4.5.0development
@storybook/react
Environment
{
  "local_name": "@storybook/react",
  "alias": false,
  "peer_metadata": null
}
^8.5.3development
@types/react-dom
Environment
{
  "local_name": "@types/react-dom",
  "alias": false,
  "peer_metadata": null
}
^19.0.3development
standard-version
Environment
{
  "local_name": "standard-version",
  "alias": false,
  "peer_metadata": null
}
^9.5.0development
@storybook/blocks
Environment
{
  "local_name": "@storybook/blocks",
  "alias": false,
  "peer_metadata": null
}
^8.5.3development
@tailwindcss/vite
Environment
{
  "local_name": "@tailwindcss/vite",
  "alias": false,
  "peer_metadata": null
}
^4.0.8development
@vitest/coverage-v8
Environment
{
  "local_name": "@vitest/coverage-v8",
  "alias": false,
  "peer_metadata": null
}
^3.0.5development
eslint-plugin-react
Environment
{
  "local_name": "eslint-plugin-react",
  "alias": false,
  "peer_metadata": null
}
^7.33.2development
@tailwindcss/postcss
Environment
{
  "local_name": "@tailwindcss/postcss",
  "alias": false,
  "peer_metadata": null
}
^4.1.4development
@storybook/react-vite
Environment
{
  "local_name": "@storybook/react-vite",
  "alias": false,
  "peer_metadata": null
}
^8.5.3development
@testing-library/react
Environment
{
  "local_name": "@testing-library/react",
  "alias": false,
  "peer_metadata": null
}
^16.2.0development
eslint-config-prettier
Environment
{
  "local_name": "eslint-config-prettier",
  "alias": false,
  "peer_metadata": null
}
^9.1.0development
eslint-plugin-jest-dom
Environment
{
  "local_name": "eslint-plugin-jest-dom",
  "alias": false,
  "peer_metadata": null
}
^5.1.0development
@storybook/builder-vite
Environment
{
  "local_name": "@storybook/builder-vite",
  "alias": false,
  "peer_metadata": null
}
^8.5.3development
eslint-plugin-storybook
Environment
{
  "local_name": "eslint-plugin-storybook",
  "alias": false,
  "peer_metadata": null
}
^0.11.2development
postcss-prefix-selector
Environment
{
  "local_name": "postcss-prefix-selector",
  "alias": false,
  "peer_metadata": null
}
^2.1.1development
postcss-remove-at-rules
Environment
{
  "local_name": "postcss-remove-at-rules",
  "alias": false,
  "peer_metadata": null
}
^1.0.2development
@storybook/addon-actions
Environment
{
  "local_name": "@storybook/addon-actions",
  "alias": false,
  "peer_metadata": null
}
^8.5.3development
@vitejs/plugin-react-swc
Environment
{
  "local_name": "@vitejs/plugin-react-swc",
  "alias": false,
  "peer_metadata": null
}
^3.7.2development
@testing-library/jest-dom
Environment
{
  "local_name": "@testing-library/jest-dom",
  "alias": false,
  "peer_metadata": null
}
^6.6.3development
@typescript-eslint/parser
Environment
{
  "local_name": "@typescript-eslint/parser",
  "alias": false,
  "peer_metadata": null
}
^8.23.0development
eslint-plugin-react-hooks
Environment
{
  "local_name": "eslint-plugin-react-hooks",
  "alias": false,
  "peer_metadata": null
}
^4.6.0development
vite-plugin-scope-tailwind
Environment
{
  "local_name": "vite-plugin-scope-tailwind",
  "alias": false,
  "peer_metadata": null
}
^2.0.1development
@storybook/addon-essentials
Environment
{
  "local_name": "@storybook/addon-essentials",
  "alias": false,
  "peer_metadata": null
}
^8.5.3development
@testing-library/user-event
Environment
{
  "local_name": "@testing-library/user-event",
  "alias": false,
  "peer_metadata": null
}
^14.6.1development
eslint-plugin-react-refresh
Environment
{
  "local_name": "eslint-plugin-react-refresh",
  "alias": false,
  "peer_metadata": null
}
^0.4.5development
@typescript-eslint/eslint-plugin
Environment
{
  "local_name": "@typescript-eslint/eslint-plugin",
  "alias": false,
  "peer_metadata": null
}
^8.23.0development
react
Environment
{
  "local_name": "react",
  "alias": false,
  "peer_metadata": null
}
^19.0.0peer
react-dom
Environment
{
  "local_name": "react-dom",
  "alias": false,
  "peer_metadata": null
}
^19.0.0peer

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "9d0f342c7f9ed170f06b2a835f4f0b51056a8179",
  "tarball": "https://registry.npmjs.org/3d-configurator/-/3d-configurator-0.6.2.tgz",
  "fileCount": 7,
  "integrity": "sha512-OskMQGiPUYD4YlMfujQf0wiAIoBJ5y2IFRMM7FV71Hp1sd3Wyo2p+v6KrKsCBKxnTubzlPsSViqDn433d41+ag==",
  "signatures": [
    {
      "sig": "MEYCIQD0Wck+0h6NsuB/Ju87vHJpimSFAKc6Q8ku8t2/PbQ31QIhAMQBnQEt1tHdJ6LTlddDI6f8dlCD41WQqnI6HFIml0Gu",
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
    }
  ],
  "unpackedSize": 6763399
}

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:34 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:cf6e7be0c53692df4541aa93255cbc96dfd8524a3d119d60cc68b6d2d13cb7b2

Other collected versions

0.8.128 Apr0.8.028 Apr0.7.619 Apr0.7.518 Apr0.7.418 Apr0.7.317 AprView all collected versions →