2026-01-15 14:13:13 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2026-01-22 11:29:51 +08:00
|
|
|
<title>iFlow Engine Viewer</title>
|
2026-01-15 14:13:13 +08:00
|
|
|
<!-- 从本地 lib 目录加载 SDK 文件 -->
|
2026-01-22 11:29:51 +08:00
|
|
|
<script src="./lib/iflow-engine.umd.js"></script>
|
2026-01-15 14:13:13 +08:00
|
|
|
<style>
|
|
|
|
|
* {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
|
|
background-color: #1a1a1a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#app {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #1a1a1a;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 错误提示 */
|
|
|
|
|
#error {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
background: rgba(220, 53, 69, 0.9);
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: 15px 30px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
z-index: 1001;
|
|
|
|
|
display: none;
|
|
|
|
|
max-width: 80%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#error.show {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<!-- 主容器 -->
|
|
|
|
|
<div id="app"></div>
|
|
|
|
|
|
|
|
|
|
<!-- 错误提示 -->
|
|
|
|
|
<div id="error"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let engine = null;
|
|
|
|
|
const errorEl = document.getElementById('error');
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 显示错误提示
|
|
|
|
|
*/
|
|
|
|
|
function showError(message) {
|
|
|
|
|
console.error('Error:', message);
|
|
|
|
|
if (errorEl) {
|
|
|
|
|
errorEl.textContent = message;
|
|
|
|
|
errorEl.classList.add('show');
|
|
|
|
|
// 5秒后自动隐藏
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
errorEl.classList.remove('show');
|
|
|
|
|
}, 5000);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 初始化 3D 引擎
|
|
|
|
|
*/
|
|
|
|
|
function initEngine3D() {
|
|
|
|
|
if (!engine || !engine.engine) {
|
|
|
|
|
throw new Error('引擎未创建');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (engine.engine.isInitialized()) {
|
|
|
|
|
console.log('3D 引擎已经初始化过了');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// 初始化引擎，使用默认配置
|
|
|
|
|
const success = engine.engine.initialize({
|
|
|
|
|
version: 'v2', // WebGL 版本
|
|
|
|
|
showStats: false, // 不显示性能统计
|
|
|
|
|
showViewCube: true // 显示视图立方体
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (success) {
|
|
|
|
|
console.log('✅ 3D 引擎初始化成功');
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error('3D 引擎初始化失败');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('❌ 3D 引擎初始化错误:', error);
|
|
|
|
|
throw error;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 加载 3D 模型
|
|
|
|
|
*/
|
|
|
|
|
function loadModel() {
|
|
|
|
|
if (!engine || !engine.engine) {
|
|
|
|
|
throw new Error('引擎未创建');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!engine.engine.isInitialized()) {
|
|
|
|
|
throw new Error('请先初始化 3D 引擎');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// 加载模型文件（从 model 目录）- 使用与 index.html 相同的模型路径
|
2026-01-23 16:27:04 +08:00
|
|
|
const modelUrl = 'https://lyz-1259524260.cos.ap-guangzhou.myqcloud.com/iflow/models/8634e556-a94e-4ba7-be3e-2ea1507cced5/';
|
2026-01-15 14:13:13 +08:00
|
|
|
|
|
|
|
|
engine.engine.loadModel(modelUrl, {
|
|
|
|
|
position: [0, 0, 0], // 初始位置
|
|
|
|
|
rotation: [0, 0, 0], // 初始旋转
|
|
|
|
|
scale: [1, 1, 1] // 初始缩放
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.log('✅ 模型加载请求已发送:', modelUrl);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('❌ 模型加载错误:', error);
|
|
|
|
|
throw error;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 初始化引擎和加载模型
|
|
|
|
|
*/
|
|
|
|
|
async function initializeViewer() {
|
|
|
|
|
try {
|
|
|
|
|
// 检查 SDK 是否加载
|
2026-01-22 11:29:51 +08:00
|
|
|
if (!window.IflowEngine) {
|
2026-01-15 14:13:13 +08:00
|
|
|
throw new Error('SDK not loaded');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 创建引擎实例
|
2026-01-22 11:29:51 +08:00
|
|
|
const Engine = window.IflowEngine.BimEngine;
|
2026-01-15 14:13:13 +08:00
|
|
|
engine = new Engine('app', {
|
|
|
|
|
locale: 'zh-CN'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.log('✅ Engine instance created:', engine);
|
|
|
|
|
|
|
|
|
|
// 初始化 3D 引擎
|
|
|
|
|
initEngine3D();
|
|
|
|
|
|
|
|
|
|
// 等待引擎完全初始化
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
|
|
|
|
|
|
|
|
// 加载模型
|
|
|
|
|
loadModel();
|
|
|
|
|
|
|
|
|
|
console.log('✅ Viewer initialized successfully');
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
showError('Failed to initialize: ' + error.message);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 页面加载完成后自动初始化
|
|
|
|
|
window.onload = () => {
|
|
|
|
|
console.log('Page loaded, initializing viewer...');
|
|
|
|
|
initializeViewer();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 窗口大小改变时调整引擎尺寸
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
if (engine && engine.engine && engine.engine.isInitialized()) {
|
|
|
|
|
const rendererModule = engine.engine.getEngine()?.rendererModule;
|
|
|
|
|
if (rendererModule && rendererModule.renderer) {
|
|
|
|
|
const container = document.getElementById('app');
|
|
|
|
|
rendererModule.renderer.setSize(
|
|
|
|
|
container.clientWidth,
|
|
|
|
|
container.clientHeight
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 错误处理
|
|
|
|
|
window.addEventListener('error', (event) => {
|
|
|
|
|
console.error('Global error:', event.error);
|
|
|
|
|
showError('An error occurred: ' + event.error.message);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
window.addEventListener('unhandledrejection', (event) => {
|
|
|
|
|
console.error('Unhandled promise rejection:', event.reason);
|
|
|
|
|
showError('An error occurred: ' + event.reason);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
