工程概况
功能规划
左侧是功能导航栏，分别有两个功能，工程简介、版权信息。点击后查看对应内容。
右侧大片区域放的三维模型。
工程简介
本质上就是一个word文档查看器，word文档中介绍工程内容
三维模型
三维BIM模型，模型支持交互。
版权信息
显示系统的版权信息
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工程BIM展示系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
<!-- 配置Tailwind自定义主题 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0ea5e9', // 主色调：科技蓝
secondary: '#10b981', // 辅助色：科技绿
accent: '#f59e0b', // 强调色：科技橙
dark: '#0f172a', // 深色背景
darker: '#020617', // 更深色背景
light: '#e2e8f0', // 浅色文本
},
fontFamily: {
tech: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.glass-effect {
backdrop-filter: blur(10px);
background-color: rgba(15, 23, 42, 0.7);
}
.neon-border {
box-shadow: 0 0 5px theme('colors.primary'),
0 0 10px theme('colors.primary/50'),
0 0 15px theme('colors.primary/30');
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
}
</style>
</head>
<body class="font-tech bg-darker text-light min-h-screen overflow-hidden">
<!-- 顶部状态栏 -->
<div class="h-6 bg-gradient-to-r from-primary to-secondary glass-effect flex items-center px-4">
<div class="flex items-center space-x-2">
<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
<span class="text-xs">系统运行中</span>
</div>
<div class="ml-auto flex items-center space-x-4">
<span class="text-xs" id="current-date">2025年07月03日</span>
<span class="text-xs" id="current-time">14:30:00</span>
</div>
</div>
<div class="flex h-[calc(100vh-30px)]">
<!-- 左侧导航栏 -->
<aside class="w-64 h-full bg-dark border-r border-primary/20 flex flex-col transition-all duration-300 ease-in-out z-10">
<!-- 系统logo和标题 -->
<div class="p-4 border-b border-primary/20 flex items-center space-x-3">
<div class="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center neon-border">
<i class="fa fa-cube text-primary text-xl"></i>
</div>
<div>
<h1 class="text-lg font-bold text-primary">工程BIM系统</h1>
<p class="text-xs text-light/60">v1.0.0</p>
</div>
</div>
<!-- 导航菜单 -->
<nav class="flex-1 p-4 overflow-y-auto scrollbar-hide">
<ul class="space-y-1">
<li>
<a href="#project-intro" class="nav-item flex items-center space-x-3 p-3 rounded-lg bg-primary/10 text-primary border-l-4 border-primary">
<i class="fa fa-file-text-o text-lg"></i>
<span>工程简介</span>
</a>
</li>
<li>
<a href="#3d-model" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-primary/10 transition-colors duration-300 text-light">
<i class="fa fa-cubes text-lg"></i>
<span>三维模型</span>
</a>
</li>
<li>
<a href="#copyright" class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-primary/10 transition-colors duration-300 text-light">
<i class="fa fa-copyright text-lg"></i>
<span>版权信息</span>
</a>
</li>
</ul>
<!-- 额外功能 -->
<div class="mt-8 pt-4 border-t border-primary/20">
<h3 class="text-xs uppercase text-light/60 mb-3 px-2">系统功能</h3>
<ul class="space-y-1">
<li>
<a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-primary/10 transition-colors duration-300 text-light/80 text-sm">
<i class="fa fa-search"></i>
<span>模型搜索</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-primary/10 transition-colors duration-300 text-light/80 text-sm">
<i class="fa fa-sliders"></i>
<span>视图设置</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-primary/10 transition-colors duration-300 text-light/80 text-sm">
<i class="fa fa-history"></i>
<span>版本记录</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- 底部信息 -->
<div class="p-4 border-t border-primary/20 text-xs text-light/50">
<p>当前用户: <span class="text-light">管理员</span></p>
<p class="mt-1">上次登录: 2025-07-02 09:15</p>
</div>
</aside>
<!-- 右侧内容区域 -->
<main class="flex-1 h-full overflow-hidden relative">
<!-- 内容切换指示器 -->
<div class="absolute top-4 left-64 transform -translate-x-1/2 z-20">
<div class="w-3 h-3 rounded-full bg-primary animate-pulse"></div>
</div>
<!-- 工程简介内容 -->
<section id="project-intro" class="content-section absolute inset-0 bg-dark/80 glass-effect p-6 overflow-y-auto">
<div class="max-w-4xl mx-auto">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-primary flex items-center">
<i class="fa fa-file-text-o mr-2"></i>工程概况
</h2>
<div class="flex space-x-2">
<button class="p-2 rounded-lg hover:bg-primary/20 transition-colors">
<i class="fa fa-print text-light/70"></i>
</button>
<button class="p-2 rounded-lg hover:bg-primary/20 transition-colors">
<i class="fa fa-download text-light/70"></i>
</button>
</div>
</div>
<div class="bg-darker p-6 rounded-lg border border-primary/20 shadow-lg">
<!-- Word文档模拟内容 -->
<div class="prose prose-invert max-w-none space-y-6">
<h3 class="text-xl font-semibold text-primary">XX科技园区建设项目</h3>
<p>本项目位于城市新中心区，总占地面积约120亩，总建筑面积约25万平方米，是集科研、办公、商业、配套服务于一体的综合性科技园区。项目旨在打造一个现代化、智能化、生态化的创新科技产业基地。</p>
<h4 class="text-lg font-medium text-secondary">项目概况</h4>
<p>项目由8栋科研办公楼、2栋配套服务楼和1栋商业中心组成，其中最高建筑高度为80米。建筑设计采用现代简约风格，融入绿色建筑理念，预计达到国家绿色建筑二星级标准。</p>
<h4 class="text-lg font-medium text-secondary">技术指标</h4>
<ul class="list-disc pl-5 space-y-1">
<li>总用地面积：80,000㎡</li>
<li>总建筑面积：250,000㎡</li>
<li>容积率：2.8</li>
<li>建筑密度：25%</li>
<li>绿化率：35%</li>
<li>停车位：1,800个</li>
</ul>
<h4 class="text-lg font-medium text-secondary">项目周期</h4>
<p>项目计划于2025年9月正式开工，建设周期为24个月，预计2027年9月竣工交付。项目采用BIM技术进行全生命周期管理，确保工程质量和进度可控。</p>
<div class="bg-primary/5 p-4 rounded-lg border border-primary/10">
<h4 class="text-lg font-medium text-primary flex items-center">
<i class="fa fa-info-circle mr-2"></i>BIM技术应用
</h4>
<p>本项目全面应用BIM技术，实现从设计、施工到运维的全生命周期管理。通过BIM模型，各参与方可以实现协同设计、施工模拟、进度管理、成本控制等功能，有效提高项目管理效率和工程质量。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 三维模型内容 -->
<section id="3d-model" class="content-section absolute inset-0 hidden">
<div class="h-full w-full bg-darker">
<!-- 三维模型容器 -->
<div id="model-container" class="h-full w-full"></div>
<!-- 模型控制栏 -->
<div class="absolute bottom-4 right-4 bg-dark/80 glass-effect p-3 rounded-lg border border-primary/20 z-10">
<div class="flex space-x-2">
<button id="rotate-btn" class="p-2 rounded-lg bg-primary/20 text-primary transition-colors" title="旋转">
<i class="fa fa-arrows"></i>
</button>
<button id="zoom-btn" class="p-2 rounded-lg hover:bg-primary/20 transition-colors" title="缩放">
<i class="fa fa-search-plus"></i>
</button>
<button id="pan-btn" class="p-2 rounded-lg hover:bg-primary/20 transition-colors" title="平移">
<i class="fa fa-move"></i>
</button>
<button id="view-btn" class="p-2 rounded-lg hover:bg-primary/20 transition-colors" title="视图">
<i class="fa fa-eye"></i>
</button>
<button id="layer-btn" class="p-2 rounded-lg hover:bg-primary/20 transition-colors" title="图层">
<i class="fa fa-th"></i>
</button>
</div>
</div>
<!-- 模型信息面板 -->
<div class="absolute top-4 left-4 bg-dark/80 glass-effect p-4 rounded-lg border border-primary/20 w-64 z-10">
<h3 class="text-lg font-semibold text-primary mb-3 flex items-center">
<i class="fa fa-cubes mr-2"></i>模型信息
</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-light/70">模型版本:</span>
<span>v2.3.5</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">构件数量:</span>
<span>12,845</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">更新时间:</span>
<span>2025-07-01</span>
</div>
<div class="flex justify-between">
<span class="text-light/70">加载状态:</span>
<span class="text-secondary">已加载</span>
</div>
</div>
</div>
</div>
</section>
<!-- 版权信息内容 -->
<section id="copyright" class="content-section absolute inset-0 hidden bg-dark/80 glass-effect p-8 flex flex-col items-center justify-center">
<div class="max-w-2xl w-full text-center">
<div class="w-20 h-20 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-6 neon-border">
<i class="fa fa-copyright text-primary text-3xl"></i>
</div>
<h2 class="text-2xl font-bold text-primary mb-4">工程BIM展示系统</h2>
<p class="text-light/70 mb-6">
本系统为XX工程建设有限公司专属工程管理平台，采用先进的BIM技术实现工程全生命周期管理。
</p>
<div class="border-t border-primary/20 pt-6 mt-6">
<p class="text-sm text-light/50 mb-2">© 2025 XX工程建设有限公司 版权所有</p>
<p class="text-sm text-light/50">
地址：XX市XX区XX路XX号 电话：010-12345678 邮箱：info@xxx.com
</p>
<p class="text-sm text-light/50 mt-2">
备案号：京ICP备12345678号-1
</p>
</div>
<div class="mt-8">
<img src="https://picsum.photos/200/80" alt="公司标志" class="h-10 object-contain">
</div>
</div>
</section>
</main>
</div>
<script>
// 日期时间显示
function updateDateTime() {
const now = new Date();
const date = now.toLocaleDateString('zh-CN');
const time = now.toLocaleTimeString('zh-CN');
document.getElementById('current-date').textContent = date;
document.getElementById('current-time').textContent = time;
}
updateDateTime();
setInterval(updateDateTime, 1000);
// 导航菜单切换
const navItems = document.querySelectorAll('.nav-item');
const contentSections = document.querySelectorAll('.content-section');
navItems.forEach((item, index) => {
item.addEventListener('click', () => {
// 移除所有激活状态
navItems.forEach(i => {
i.classList.remove('bg-primary/10', 'text-primary', 'border-l-4', 'border-primary');
i.classList.add('text-light');
});
// 添加当前激活状态
item.classList.add('bg-primary/10', 'text-primary', 'border-l-4', 'border-primary');
item.classList.remove('text-light');
// 隐藏所有内容
contentSections.forEach(section => {
section.classList.add('hidden');
});
// 显示当前内容
const targetId = item.getAttribute('href').substring(1);
const targetSection = document.getElementById(targetId);
targetSection.classList.remove('hidden');
// 如果切换到3D模型，初始化或重新渲染
if (targetId === '3d-model') {
initThreeJS();
}
});
});
// 初始化Three.js场景
function initThreeJS() {
// 检查是否已经有场景
const container = document.getElementById('model-container');
// 清除容器内的所有内容
while (container.firstChild) {
container.removeChild(container.firstChild);
}
// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x020617);
// 创建相机
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
// 添加轨道控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040, 2);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0x0ea5e9, 2);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
// 创建一个简单的BIM模型（使用几何体组合）
// 创建建筑物主体
const buildingGeometry = new THREE.BoxGeometry(3, 2, 1);
const buildingMaterial = new THREE.MeshStandardMaterial({
color: 0x0ea5e9,
roughness: 0.5,
metalness: 0.3
});
const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
scene.add(building);
// 添加窗户
const windowGeometry = new THREE.BoxGeometry(0.2, 0.3, 0.05);
const windowMaterial = new THREE.MeshStandardMaterial({
color: 0x10b981,
transparent: true,
opacity: 0.8
});
// 前立面窗户
for (let x = -1.2; x <= 1.2; x += 0.6) {
for (let y = -0.6; y <= 0.6; y += 0.6) {
const window = new THREE.Mesh(windowGeometry, windowMaterial);
window.position.set(x, y, 0.55);
scene.add(window);
}
}
// 后立面窗户
for (let x = -1.2; x <= 1.2; x += 0.6) {
for (let y = -0.6; y <= 0.6; y += 0.6) {
const window = new THREE.Mesh(windowGeometry, windowMaterial);
window.position.set(x, y, -0.55);
scene.add(window);
}
}
// 添加屋顶
const roofGeometry = new THREE.ConeGeometry(2.5, 1, 4);
const roofMaterial = new THREE.MeshStandardMaterial({
color: 0xf59e0b,
roughness: 0.7,
metalness: 0.2
});
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.set(0, 1.5, 0);
scene.add(roof);
// 添加地面
const groundGeometry = new THREE.PlaneGeometry(20, 20);
const groundMaterial = new THREE.MeshStandardMaterial({
color: 0x0f172a,
roughness: 0.8,
metalness: 0.1
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -1.5;
scene.add(ground);
// 添加网格辅助线
const gridHelper = new THREE.GridHelper(20, 20, 0x1e293b, 0x0f172a);
scene.add(gridHelper);
// 添加坐标轴辅助线
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 窗口大小调整
window.addEventListener('resize', () => {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
});
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
// 模型控制按钮事件
const rotateBtn = document.getElementById('rotate-btn');
const zoomBtn = document.getElementById('zoom-btn');
const panBtn = document.getElementById('pan-btn');
rotateBtn.addEventListener('click', () => {
controls.enableRotate = true;
controls.enableZoom = false;
controls.enablePan = false;
// 更新按钮样式
rotateBtn.classList.add('bg-primary/20', 'text-primary');
zoomBtn.classList.remove('bg-primary/20', 'text-primary');
panBtn.classList.remove('bg-primary/20', 'text-primary');
});
zoomBtn.addEventListener('click', () => {
controls.enableRotate = false;
controls.enableZoom = true;
controls.enablePan = false;
// 更新按钮样式
rotateBtn.classList.remove('bg-primary/20', 'text-primary');
zoomBtn.classList.add('bg-primary/20', 'text-primary');
panBtn.classList.remove('bg-primary/20', 'text-primary');
});
panBtn.addEventListener('click', () => {
controls.enableRotate = false;
controls.enableZoom = false;
controls.enablePan = true;
// 更新按钮样式
rotateBtn.classList.remove('bg-primary/20', 'text-primary');
zoomBtn.classList.remove('bg-primary/20', 'text-primary');
panBtn.classList.add('bg-primary/20', 'text-primary');
});
// 视图按钮事件
const viewBtn = document.getElementById('view-btn');
let viewIndex = 0;
const views = [
{ position: new THREE.Vector3(5, 5, 5), lookAt: new THREE.Vector3(0, 0, 0) },
{ position: new THREE.Vector3(0, 5, 0), lookAt: new THREE.Vector3(0, 0, 0) },
{ position: new THREE.Vector3(0, 0, 5), lookAt: new THREE.Vector3(0, 0, 0) },
{ position: new THREE.Vector3(-5, 0, 0), lookAt: new THREE.Vector3(0, 0, 0) }
];
viewBtn.addEventListener('click', () => {
viewIndex = (viewIndex + 1) % views.length;
const view = views[viewIndex];
controls.target.copy(view.lookAt);
camera.position.copy(view.position);
controls.update();
});
// 图层按钮事件
const layerBtn = document.getElementById('layer-btn');
let showWindows = true;
layerBtn.addEventListener('click', () => {
showWindows = !showWindows;
// 查找所有窗户并切换可见性
scene.children.forEach(child => {
if (child.material && child.material.color.getHex() === 0x10b981) {
child.visible = showWindows;
}
});
});
}
// 初始加载时检查是否应该显示3D模型
document.addEventListener('DOMContentLoaded', () => {
if (!document.getElementById('3d-model').classList.contains('hidden')) {
initThreeJS();
}
});
</script>
</body>
</html>