bim_engine/demo-next

iFlow Engine Next.js Demo

这是一个使用 Next.js 15 + React 19 + TypeScript 的演示项目，展示如何在现代 React 框架中集成 iFlow Engine BIM 引擎 SDK。

前置要求

1. 确保父项目已经构建完成：

   cd ..
   npm run build
   

2. 复制 SDK 文件到 public 目录：

   npm run copy-sdk
   

3. 安装依赖：

   npm install
   

运行

开发模式

npm run dev

服务器会在 http://localhost:3000 启动。

构建

npm run build

构建后的静态文件会在 dist 目录中。

预览构建结果

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