open-index/open-npm huggingface dataset:
npm package: 3d-configurator
Description: mashroom 3d configurator
Author: medab
Latest version: 0.8.1

# 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.

```sh
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:

```jsx
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:

```sh
npm install
npm run build:lib:watch
npm run dev:test

```

To run Storybook:

```sh
npm run dev:storybook
```

To build Storybook:

```sh
npm run build:storybook
```

## License

This project is licensed under the MIT License.
npm package: 3d-core
Description: A TypeScript library to build 3d park map
Author: 周宇清
Latest version: 2.0.63

# 项目技术选型

`Three.js TypeScript Axios Less JsonServer`  

# 项目对接方法

```javascript
import * as ThreeParkMap from '3d-park-map';

// 实例化
const threeParkMap = new ThreeParkMap()

// 初始化，config可以不传，有默认配置
threeParkMap.init(config)

// data是车场信息数据json，绘制3d车场
threeParkMap.draw(data)
```

# 项目开发流程

## 安装

`yarn install`

## 启动

### 开发环境

`yarn start`

### 启动`mock`服务

`yarn mock`

### 同时开启`mock`服务和开发服务

`yarn serve`

### dll构建

`yarn build:dll`

### 生产构建（先运行`dll`构建）

`yarn build`

### 开发环境构建（先运行`dll`构建, 生成stats.json文件，上传webpack官网进行性能分析）

`yarn dev-build`

# 项目结构

```
|-- job
    |-- .eslintrc.json
    |-- .gitignore
    |-- README.md
    |-- package-lock.json
    |-- package.json
    |-- tsconfig.json
    |-- yarn-error.log
    |-- yarn.lock
    |-- config
    |   |-- common.js
    |   |-- dev.js
    |   |-- prod.js
    |   |-- webpack.config.js
    |   |-- webpack.dll.js
    |-- mock
    |   |-- db.json
    |-- public
    |   |-- index.html
    |   |-- dll
    |   |   |-- three.dll.js
    |   |   |-- three.dll.js.LICENSE.txt
    |   |   |-- three.manifest.json
    |   |-- static
    |       |-- fonts
    |       |   |-- helvetiker_regular.typeface.json
    |       |-- img
    |-- src
    |   |-- index.ts
    |   |-- components
    |   |   |-- cube.ts
    |   |   |-- index.ts
    |   |   |-- sphere.ts
    |   |-- config
    |   |   |-- enum.ts
    |   |-- core
    |   |   |-- base.ts
    |   |   |-- threeParkMap.ts
    |   |-- util
    |   |   |-- decoration.ts
    |   |   |-- storage.ts
    |   |-- view
    |       |-- index.ts
    |       |-- example
    |           |-- menu.ts
    |           |-- template
    |               |-- cameraConf.ts
    |               |-- menu.ts
    |-- typings
        |-- base.d.ts
        |-- index.d.ts
        |-- components
        |   |-- index.d.ts
        |-- core
        |   |-- threeParkMap.d.ts
        |-- util
        |   |-- storage.d.ts
        |-- view
            |-- menu.d.ts


```

## 项目结构说明

### `src`下是所有核心代码文件

1. 其中封装的所有基础模块，组件，放在components下，`cube.ts`和`sphere.ts`作为例子，所有模块需要继承抽象类`Base`，并且`init`方法作为绘制方法入口，在`index.ts`下导出所有模块，这样开发界面右侧的模块列表下就会读到模块（模块的`name`属性），点击渲染当前模块内容。

```
  |-- src
    |   |-- index.ts
    |   |-- components
    |   |   |-- cube.ts
    |   |   |-- index.ts
    |   |   |-- sphere.ts
    |   |-- config
    |   |   |-- enum.ts
    |   |-- core
    |   |   |-- base.ts
    |   |   |-- threeParkMap.ts
    |   |-- util
    |   |   |-- decoration.ts
    |   |   |-- storage.ts
    |   |-- view
    |       |-- index.ts
    |       |-- example
    |           |-- menu.ts
    |           |-- template
    |               |-- cameraConf.ts
    |               |-- menu.ts
```

2. `view`下是视图文件，原则上本库是第三方库，不涉及具体视图，这里视图是开发时候用的界面，方便开发调试
3. `util`下是所有工具类，工具方法
4. `config`下是配置信息，常量，枚举等
5. `core`是核心类比如 `threeParkMap`以及项目核心流程代码


### `typings`下是`ts`声明文件，尽量保持和src下一样的结构


### `mock`下`db.json`是开发时候需要假数据时生成假数据的文件


## 一些说明

### 工具方法

#### 装饰器

1. `@log` 装饰器实现对方法参数的打印，需要了解哪个方法的传参内容，加上此装饰器（参数是区分打印结果用的一段任意文本）