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
|