# threejs-memory

**Repository Path**: mochacat/threejs-memory

## Basic Information

- **Project Name**: threejs-memory
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-23
- **Last Updated**: 2026-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 3D数据流动可视化应用

基于React + Three.js开发的3D数据流动可视化应用，展示节点之间的数据流动效果。

## 核心功能

- 3D场景中的随机分布节点（正方体/球体）
- 节点半透明材质与辉光效果
- 流动的光线连接动画
- 完整的3D交互控制（旋转、缩放、平移）
- 实时可调的参数控制面板

## 技术栈

- React 19.2.0 + TypeScript
- Three.js 0.182.0
- Vite 7.3.1

## 项目启动

### 开发环境

```bash
# 安装依赖
npm install

# 启动开发服务器（默认端口：5173）
npm run dev
```

### 构建生产版本

```bash
# 编译TypeScript并构建生产版本
npm run build
```

### 预览生产版本

```bash
# 启动预览服务器，查看构建结果（默认端口：4173）
npm run preview
```

## 项目结构

```
src/
├── types/              # 类型定义
│   └── index.ts        # Node、Connection、SceneConfig接口
├── utils/              # 工具函数
│   └── common.ts       # 随机点生成、颜色生成、资源清理
├── App.tsx             # 主应用组件
├── App.css             # 样式文件
└── main.tsx            # 应用入口
```

## 交互说明

- **旋转场景**：鼠标左键拖动
- **缩放场景**：鼠标滚轮或触摸板缩放
- **平移场景**：鼠标右键拖动
- **调整参数**：使用左上角控制面板的滑块调整节点数量、流动速度和辉光强度

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```