添加一些数据
This commit is contained in:
108
demo-next/README.md
Normal file
108
demo-next/README.md
Normal file
@@ -0,0 +1,108 @@
|
||||
# iFlow Engine Next.js Demo
|
||||
|
||||
这是一个使用 Next.js 15 + React 19 + TypeScript 的演示项目,展示如何在现代 React 框架中集成 iFlow Engine BIM 引擎 SDK。
|
||||
|
||||
## 前置要求
|
||||
|
||||
1. 确保父项目已经构建完成:
|
||||
```bash
|
||||
cd ..
|
||||
npm run build
|
||||
```
|
||||
|
||||
2. 复制 SDK 文件到 public 目录:
|
||||
```bash
|
||||
npm run copy-sdk
|
||||
```
|
||||
|
||||
3. 安装依赖:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## 运行
|
||||
|
||||
### 开发模式
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
服务器会在 `http://localhost:3000` 启动。
|
||||
|
||||
### 构建
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
构建后的静态文件会在 `dist` 目录中。
|
||||
|
||||
### 预览构建结果
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
demo-next/
|
||||
├── app/ # Next.js App Router
|
||||
│ ├── layout.tsx # 根布局
|
||||
│ ├── page.tsx # 主页面
|
||||
│ └── globals.css # 全局样式
|
||||
├── components/ # React 组件
|
||||
│ ├── BimViewer.tsx # BIM 引擎封装组件
|
||||
│ └── ControlPanel.tsx # 控制面板组件
|
||||
├── public/ # 静态资源
|
||||
│ ├── lib/ # SDK 文件目录
|
||||
│ │ ├── iflow-engine.umd.js
|
||||
│ │ ├── iflow-engine.umd.js.map
|
||||
│ │ └── iflow-engine.es.js
|
||||
│ └── model/ # 3D 模型文件
|
||||
├── package.json # 项目配置
|
||||
├── tsconfig.json # TypeScript 配置
|
||||
├── next.config.js # Next.js 配置
|
||||
└── README.md # 说明文档
|
||||
```
|
||||
|
||||
## 核心功能
|
||||
|
||||
- 🌍 **语言切换**: 支持中文/英文切换
|
||||
- 🪟 **弹窗测试**: 测试对话框组件
|
||||
- 🛠️ **工具栏控制**: 显示/隐藏工具栏和标签
|
||||
- 🎨 **主题切换**: 深色/浅色/自定义主题
|
||||
- 🎮 **3D 引擎**: 初始化引擎、加载模型、暂停/恢复渲染
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. 点击 "初始化引擎" 按钮初始化 3D 引擎
|
||||
2. 点击 "加载模型" 按钮加载默认 3D 模型(或输入自定义 URL)
|
||||
3. 其他功能按钮可以测试 SDK 的各种功能
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Next.js 15.3
|
||||
- React 19.1
|
||||
- TypeScript 5.9
|
||||
|
||||
## 注意事项
|
||||
|
||||
- 确保父项目的 `dist` 目录中有构建好的 SDK 文件
|
||||
- 使用 HTTP 服务器运行(不能直接打开 HTML 文件)以避免 CORS 问题
|
||||
- 页面使用客户端组件('use client')因为 BIM 引擎需要浏览器环境
|
||||
|
||||
## 与 demo-vue 的区别
|
||||
|
||||
| 特性 | demo-vue | demo-next |
|
||||
|------|----------|-----------|
|
||||
| 框架 | Vue 3 | Next.js 15 + React 19 |
|
||||
| 路由 | Vue Router | Next.js App Router |
|
||||
| 样式 | Scoped CSS | CSS-in-JSX |
|
||||
| 构建输出 | SPA | 静态导出 |
|
||||
| TypeScript | 可选 | 默认 |
|
||||
|
||||
## 许可证
|
||||
|
||||
ISC
|
||||
Reference in New Issue
Block a user