feat: 优化测量功能架构与引擎组件
- 重构测量激活逻辑，在 Engine 组件中添加统一的 activateMeasure(mode) 方法 - 简化 MeasureDialogManager，移除冗余的 handleMeasureTypeChange 方法 - 添加 EngineManager.activateMeasure 转发方法 - 修复 loadModel 错误，正确调用 Engine 组件方法 - 为 Engine 组件设置固定背景渐变色 - MeasurePanel 初始化时触发 onModeChange 回调 - 添加 MeasureMode 共享类型定义 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
yuding
212
demo/viewer.html
Normal file
212
demo/viewer.html
Normal file
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BIM Engine Viewer</title>
|
||||
<!-- 从本地 lib 目录加载 SDK 文件 -->
|
||||
<script src="./lib/bim-engine-sdk.umd.js"></script>
|
||||
<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 相同的模型路径
|
||||
const modelUrl = './model/test2';
|
||||
|
||||
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 是否加载
|
||||
if (!window.LyzBimEngineSDK) {
|
||||
throw new Error('SDK not loaded');
|
||||
}
|
||||
|
||||
// 创建引擎实例
|
||||
const Engine = window.LyzBimEngineSDK.BimEngine;
|
||||
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>
|
||||
Reference in New Issue
Block a user