109 lines
2.6 KiB
Markdown
109 lines
2.6 KiB
Markdown
# 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
|