<!DOCTYPE html>
<html>
<head>
<title>公司产品平台</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
color: white;
background-color: #000;
}
/* 星空背景容器 */
#canvas-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* 标题样式（完全匹配图片） */
.main-title {
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
font-size: 2.5em;
color: white;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
z-index: 100;
}
/* 工作台按钮（匹配图片样式） */
.workspace-btn {
position: absolute;
top: 20px;
right: 20px;
padding: 8px 15px;
background: rgba(100, 100, 120, 0.3);
color: #CCCCCC;
border: none;
border-radius: 4px;
cursor: pointer;
z-index: 100;
}
/* 右侧案例展示区 */
.project-showcase {
position: absolute;
top: 30%;
right: 5%;
width: 30%;
display: flex;
flex-direction: column;
gap: 20px;
z-index: 10;
}
/* 案例卡片样式（完全匹配图片） */
.project-card {
padding: 15px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 5px;
}
.project-title {
color: #1E90FF; /* 图片中的蓝色文字 */
font-size: 1.2em;
margin-bottom: 8px;
}
.project-desc {
color: #CCCCCC;
font-size: 0.9em;
line-height: 1.5;
}
/* 左侧导航栏（居中） */
.main-nav {
position: fixed;
bottom: 50%;
left: 5%;
transform: translateY(50%);
width: 30%;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 100;
}
/* 导航按钮样式（匹配图片中的灰色按钮） */
.nav-btn {
padding: 12px 20px;
background: rgba(100, 100, 120, 0.3);
color: #CCCCCC;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
</style>
</head>
<body>
<!-- 星空背景 -->
<div id="canvas-container"></div>
<!-- 标题（完全匹配图片文字） -->
<h1 class="main-title">公司产品平台</h1>
<!-- 右上角工作台按钮 -->
<button class="workspace-btn">进入工作台</button>
<!-- 右侧案例展示（三个案例） -->
<div class="project-showcase">
<div class="project-card">
<div class="project-title">面向对象业务系统</div>
<div class="project-desc">基于Three.js的智能仓储管理系统，实现货物可视化追踪</div>
</div>
<div class="project-card">
<div class="project-title">检测业务系统</div>
<div class="project-desc">实时监控设备状态和环境数据的数字孪生解决方案</div>
</div>
<div class="project-card">
<div class="project-title">原材料管理服务平台</div>
<div class="project-desc">使用粒子系统模拟城市交通流量和拥堵预测</div>
</div>
</div>
<!-- 左侧导航（五个按钮居中） -->
<div class="main-nav">
<button class="nav-btn">项目案例</button>
<button class="nav-btn">智能体开发平台</button>
<button class="nav-btn">帮助文档</button>
<button class="nav-btn">AI问答</button>
<button class="nav-btn">智能体</button>
</div>
<script>
// 初始化Three.js场景
let camera, scene, renderer, particles;
function init() {
// 相机设置
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 500;
// 场景设置
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x0000ff, 0.001);
// 粒子系统
const geometry = new THREE.BufferGeometry();
const vertices = [];
const size = 1500;
for (let i = 0; i < 10000; i++) {
const x = (Math.random() * size * 2) - size;
const y = (Math.random() * size * 2) - size;
const z = (Math.random() * size * 2) - size;
vertices.push(x, y, z);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const material = new THREE.PointsMaterial({
size: 2,
color: 0xffffff,
transparent: true,
opacity: 0.8
});
particles = new THREE.Points(geometry, material);
scene.add(particles);
// 渲染器设置
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
particles.rotation.x += 0.001;
particles.rotation.y += 0.002;
renderer.render(scene, camera);
}
// 初始化场景
init();
animate();
</script>
</body>
</html>
index.html
style.css
index.js
index.html