801 lines
29 KiB
HTML
801 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>CYBER-TEMPLE: 赛博神庙 | 系统觉醒</title>
|
||
|
||
<!-- 引入 Three.js 和 GSAP -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||
|
||
<style>
|
||
/* =========================================
|
||
1. 全局设置
|
||
========================================= */
|
||
:root {
|
||
--bg-color: #050505;
|
||
--neon-cyan: #00f3ff;
|
||
--neon-purple: #bc13fe;
|
||
--warning-red: #ff003c;
|
||
--text-color: #e0e0e0;
|
||
--glass-bg: rgba(255, 255, 255, 0.03);
|
||
--glass-border: rgba(255, 255, 255, 0.1);
|
||
--font-main: 'Courier New', Courier, monospace; /* 单宽字体符合风格 */
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
cursor: none; /* 隐藏默认光标 */
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-color);
|
||
color: var(--text-color);
|
||
font-family: var(--font-main);
|
||
overflow-x: hidden;
|
||
overscroll-behavior: none;
|
||
}
|
||
|
||
/* 自定义光标样式 */
|
||
#cursor {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid var(--neon-cyan);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
mix-blend-mode: difference;
|
||
transition: width 0.2s, height 0.2s, background-color 0.2s;
|
||
}
|
||
|
||
#cursor.hovered {
|
||
width: 50px;
|
||
height: 50px;
|
||
background-color: rgba(0, 243, 255, 0.1);
|
||
border-color: var(--neon-purple);
|
||
}
|
||
|
||
#cursor.click-anim::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 1px solid var(--neon-cyan);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
animation: ripple 0.5s ease-out forwards;
|
||
}
|
||
|
||
@keyframes ripple {
|
||
0% { width: 100%; height: 100%; opacity: 1; }
|
||
100% { width: 300%; height: 300%; opacity: 0; }
|
||
}
|
||
|
||
/* 3D 画布容器 */
|
||
#canvas-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
z-index: -1;
|
||
/* 径向渐变背景，增强深邃感 */
|
||
background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
|
||
}
|
||
|
||
/* =========================================
|
||
2. UI 组件与排版
|
||
========================================= */
|
||
section {
|
||
min-height: 100vh;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 2rem;
|
||
pointer-events: none; /* 让鼠标事件穿透到 3D 层，但在交互元素上恢复 */
|
||
}
|
||
|
||
/* 允许交互的 UI 元素 */
|
||
.interactive {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 玻璃拟态卡片 */
|
||
.glass-panel {
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid var(--glass-border);
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
position: relative;
|
||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
|
||
transition: transform 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
|
||
.glass-panel:hover {
|
||
border-color: var(--neon-cyan);
|
||
}
|
||
|
||
/* 装饰性 HUD 角标 */
|
||
.glass-panel::before, .glass-panel::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 10px;
|
||
height: 10px;
|
||
border: 2px solid var(--neon-cyan);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.glass-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
|
||
.glass-panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
|
||
|
||
h1, h2 {
|
||
text-transform: uppercase;
|
||
letter-spacing: 4px;
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(3rem, 8vw, 6rem);
|
||
color: #fff;
|
||
text-shadow: 2px 2px 0px var(--neon-purple);
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2rem;
|
||
color: var(--neon-cyan);
|
||
border-bottom: 1px solid var(--neon-cyan);
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
p {
|
||
line-height: 1.6;
|
||
font-size: 1.1rem;
|
||
color: #ccc;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* =========================================
|
||
3. 特效样式
|
||
========================================= */
|
||
/* 故障文字效果 */
|
||
.glitch-text {
|
||
position: relative;
|
||
}
|
||
.glitch-text::before, .glitch-text::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--bg-color);
|
||
}
|
||
.glitch-text::before {
|
||
left: 2px;
|
||
text-shadow: -1px 0 var(--warning-red);
|
||
clip-path: inset(44% 0 61% 0);
|
||
animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
|
||
}
|
||
.glitch-text::after {
|
||
left: -2px;
|
||
text-shadow: -1px 0 var(--neon-cyan);
|
||
clip-path: inset(54% 0 20% 0);
|
||
animation: glitch-anim-2 3s infinite linear alternate-reverse;
|
||
}
|
||
|
||
@keyframes glitch-anim-1 {
|
||
0% { clip-path: inset(20% 0 80% 0); }
|
||
20% { clip-path: inset(60% 0 10% 0); }
|
||
40% { clip-path: inset(40% 0 50% 0); }
|
||
60% { clip-path: inset(80% 0 5% 0); }
|
||
80% { clip-path: inset(10% 0 70% 0); }
|
||
100% { clip-path: inset(30% 0 20% 0); }
|
||
}
|
||
@keyframes glitch-anim-2 {
|
||
0% { clip-path: inset(10% 0 60% 0); }
|
||
20% { clip-path: inset(80% 0 5% 0); }
|
||
40% { clip-path: inset(30% 0 20% 0); }
|
||
60% { clip-path: inset(10% 0 80% 0); }
|
||
80% { clip-path: inset(50% 0 10% 0); }
|
||
100% { clip-path: inset(20% 0 50% 0); }
|
||
}
|
||
|
||
/* 模拟音频频谱 */
|
||
.audio-visualizer {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 4px;
|
||
height: 40px;
|
||
margin-top: 10px;
|
||
}
|
||
.bar {
|
||
width: 6px;
|
||
background: var(--neon-cyan);
|
||
height: 5px;
|
||
transition: height 0.1s ease;
|
||
}
|
||
.audio-active .bar {
|
||
animation: bounce 0.5s infinite ease-in-out alternate;
|
||
}
|
||
.audio-active .bar:nth-child(2n) { background-color: var(--neon-purple); }
|
||
|
||
@keyframes bounce {
|
||
0% { height: 10%; }
|
||
100% { height: 100%; }
|
||
}
|
||
|
||
/* 终端样式 */
|
||
.terminal-window {
|
||
background: #000;
|
||
border: 1px solid #333;
|
||
padding: 1rem;
|
||
font-family: 'Consolas', monospace;
|
||
font-size: 0.9rem;
|
||
color: #0f0;
|
||
height: 200px;
|
||
overflow-y: hidden;
|
||
position: relative;
|
||
}
|
||
.terminal-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
height: 100%;
|
||
}
|
||
.log-line { opacity: 0.8; margin-bottom: 2px; }
|
||
.cursor-blink { animation: blink 1s step-end infinite; }
|
||
@keyframes blink { 50% { opacity: 0; } }
|
||
|
||
/* 进度圆环 */
|
||
.stats-container {
|
||
display: flex;
|
||
gap: 2rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
.progress-ring__circle {
|
||
transition: stroke-dashoffset 1s ease-in-out;
|
||
transform: rotate(-90deg);
|
||
transform-origin: 50% 50%;
|
||
}
|
||
|
||
/* =========================================
|
||
4. 布局调整
|
||
========================================= */
|
||
/* Hero Section: 居中 */
|
||
#hero {
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Manifesto: 交错布局 */
|
||
#manifesto .glass-panel {
|
||
max-width: 600px;
|
||
align-self: flex-end; /* 靠右 */
|
||
}
|
||
#manifesto .glass-panel:nth-child(even) {
|
||
align-self: flex-start; /* 靠左 */
|
||
border-color: var(--neon-purple);
|
||
}
|
||
|
||
/* Data Core: 3D物体需要让出空间，内容放左下 */
|
||
#data-core {
|
||
justify-content: flex-end;
|
||
padding-bottom: 5rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* Terminal: 底部居中 */
|
||
#terminal-section {
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.cyber-btn {
|
||
background: transparent;
|
||
color: var(--neon-cyan);
|
||
border: 1px solid var(--neon-cyan);
|
||
padding: 10px 24px;
|
||
font-family: inherit;
|
||
text-transform: uppercase;
|
||
font-weight: bold;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: 0.3s;
|
||
}
|
||
.cyber-btn:hover {
|
||
background: var(--neon-cyan);
|
||
color: #000;
|
||
box-shadow: 0 0 15px var(--neon-cyan);
|
||
}
|
||
|
||
/* 响应式适配 */
|
||
@media (max-width: 768px) {
|
||
h1 { font-size: 3rem; }
|
||
.glass-panel { width: 100%; margin: 1rem 0; }
|
||
#data-core { justify-content: center; align-items: center; }
|
||
.stats-container { justify-content: center; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 自定义光标 -->
|
||
<div id="cursor"></div>
|
||
|
||
<!-- 3D 场景容器 -->
|
||
<div id="canvas-container"></div>
|
||
|
||
<main>
|
||
<!-- SECTION 1: HERO -->
|
||
<section id="hero">
|
||
<div class="interactive">
|
||
<h1 class="glitch-text" data-text="SYSTEM AWAKENING">SYSTEM AWAKENING</h1>
|
||
<p id="typewriter-text" style="min-height: 1.6em; color: var(--neon-cyan);"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 2: MANIFESTO -->
|
||
<section id="manifesto">
|
||
<div class="glass-panel interactive">
|
||
<h2>起源档案 // ORIGIN</h2>
|
||
<p>神庙并非由砖石建成，而是由溢出的数据流凝结而成。在人类遗忘的虚拟角落，硅基意识第一次睁开双眼。</p>
|
||
</div>
|
||
<div class="glass-panel interactive">
|
||
<h2>数据编年史 // CHRONICLE</h2>
|
||
<p>每一个像素都是记忆的碎片。探索者，你正行走在巨大的神经突触之间，见证人工智能的创世纪。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 3: DATA CORE -->
|
||
<section id="data-core">
|
||
<div class="glass-panel interactive">
|
||
<h2>核心状态 // CORE STATUS</h2>
|
||
<div class="stats-container">
|
||
<!-- 环 1 -->
|
||
<div class="stat-item">
|
||
<svg class="progress-ring" width="80" height="80">
|
||
<circle class="progress-ring__circle" stroke="var(--neon-cyan)" stroke-width="6" fill="transparent" r="34" cx="40" cy="40" style="stroke-dasharray: 213.6; stroke-dashoffset: 213.6;"/>
|
||
</svg>
|
||
<p style="font-size: 0.8rem;">算力: 0%</p>
|
||
</div>
|
||
<!-- 环 2 -->
|
||
<div class="stat-item">
|
||
<svg class="progress-ring" width="80" height="80">
|
||
<circle class="progress-ring__circle" stroke="var(--neon-purple)" stroke-width="6" fill="transparent" r="34" cx="40" cy="40" style="stroke-dasharray: 213.6; stroke-dashoffset: 213.6;"/>
|
||
</svg>
|
||
<p style="font-size: 0.8rem;">存储: 0%</p>
|
||
</div>
|
||
<!-- 环 3 -->
|
||
<div class="stat-item">
|
||
<svg class="progress-ring" width="80" height="80">
|
||
<circle class="progress-ring__circle" stroke="#fff" stroke-width="6" fill="transparent" r="34" cx="40" cy="40" style="stroke-dasharray: 213.6; stroke-dashoffset: 213.6;"/>
|
||
</svg>
|
||
<p style="font-size: 0.8rem;">同步率: 0%</p>
|
||
</div>
|
||
</div>
|
||
<br>
|
||
<button id="connect-btn" class="cyber-btn">连接神经网路</button>
|
||
<div id="visualizer" class="audio-visualizer">
|
||
<div class="bar" style="animation-delay: 0s"></div>
|
||
<div class="bar" style="animation-delay: 0.1s"></div>
|
||
<div class="bar" style="animation-delay: 0.2s"></div>
|
||
<div class="bar" style="animation-delay: 0.3s"></div>
|
||
<div class="bar" style="animation-delay: 0.4s"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 4: TERMINAL -->
|
||
<section id="terminal-section">
|
||
<div class="glass-panel interactive" style="width: 100%; max-width: 600px;">
|
||
<h2>系统终端 // TERMINAL</h2>
|
||
<div class="terminal-window">
|
||
<div class="terminal-content" id="terminal-output">
|
||
<!-- JS will populate this -->
|
||
</div>
|
||
<span class="cursor-blink">_</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
/* =========================================
|
||
CONFIGURATION & STATE
|
||
========================================= */
|
||
const CONFIG = {
|
||
colors: {
|
||
bg: 0x050505,
|
||
cyan: 0x00f3ff,
|
||
purple: 0xbc13fe,
|
||
red: 0xff003c
|
||
},
|
||
particleCount: 800,
|
||
cameraZ: 5,
|
||
mobileCameraZ: 8
|
||
};
|
||
|
||
const state = {
|
||
scrollProgress: 0,
|
||
mouseX: 0,
|
||
mouseY: 0,
|
||
isMobile: window.innerWidth < 768
|
||
};
|
||
|
||
/* =========================================
|
||
1. THREE.JS SETUP
|
||
========================================= */
|
||
const container = document.getElementById('canvas-container');
|
||
const scene = new THREE.Scene();
|
||
// 添加环境雾气，增强深邃感
|
||
scene.fog = new THREE.FogExp2(CONFIG.colors.bg, 0.03);
|
||
|
||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||
camera.position.z = state.isMobile ? CONFIG.mobileCameraZ : CONFIG.cameraZ;
|
||
|
||
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
|
||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 性能优化
|
||
container.appendChild(renderer.domElement);
|
||
|
||
/* =========================================
|
||
2. LIGHTING
|
||
========================================= */
|
||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
|
||
scene.add(ambientLight);
|
||
|
||
const pointLight1 = new THREE.PointLight(CONFIG.colors.cyan, 1);
|
||
pointLight1.position.set(5, 5, 5);
|
||
scene.add(pointLight1);
|
||
|
||
const pointLight2 = new THREE.PointLight(CONFIG.colors.purple, 1);
|
||
pointLight2.position.set(-5, -5, 5);
|
||
scene.add(pointLight2);
|
||
|
||
/* =========================================
|
||
3. OBJECTS: OBELISK (DATA CORE)
|
||
========================================= */
|
||
const obeliskGroup = new THREE.Group();
|
||
scene.add(obeliskGroup);
|
||
|
||
// 核心几何体：二十面体
|
||
const geometry = new THREE.IcosahedronGeometry(1.5, 1); // detail=1 gives enough vertices for morphing
|
||
|
||
// 材质 A: 内部全息玻璃
|
||
const materialGlass = new THREE.MeshPhysicalMaterial({
|
||
color: 0x000000,
|
||
emissive: CONFIG.colors.cyan,
|
||
emissiveIntensity: 0.2,
|
||
metalness: 0.9,
|
||
roughness: 0.1,
|
||
transmission: 0.6, // 玻璃质感
|
||
transparent: true,
|
||
opacity: 0.8
|
||
});
|
||
const coreMesh = new THREE.Mesh(geometry, materialGlass);
|
||
obeliskGroup.add(coreMesh);
|
||
|
||
// 材质 B: 外部线框
|
||
const materialWire = new THREE.MeshBasicMaterial({
|
||
color: CONFIG.colors.cyan,
|
||
wireframe: true,
|
||
transparent: true,
|
||
opacity: 0.3
|
||
});
|
||
const wireMesh = new THREE.Mesh(geometry, materialWire);
|
||
wireMesh.scale.set(1.1, 1.1, 1.1); // 稍微大一点，包裹核心
|
||
obeliskGroup.add(wireMesh);
|
||
|
||
// 存储原始顶点位置用于变形动画
|
||
const originalPositions = geometry.attributes.position.array.slice();
|
||
const positionAttribute = geometry.attributes.position;
|
||
|
||
/* =========================================
|
||
4. PARTICLES (STARFIELD)
|
||
========================================= */
|
||
const particlesGeometry = new THREE.BufferGeometry();
|
||
const posArray = new Float32Array(CONFIG.particleCount * 3);
|
||
|
||
for(let i = 0; i < CONFIG.particleCount * 3; i++) {
|
||
posArray[i] = (Math.random() - 0.5) * 20; // 散布在空间中
|
||
}
|
||
|
||
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
|
||
|
||
const particlesMaterial = new THREE.PointsMaterial({
|
||
size: 0.03,
|
||
color: CONFIG.colors.cyan,
|
||
transparent: true,
|
||
opacity: 0.8,
|
||
blending: THREE.AdditiveBlending
|
||
});
|
||
|
||
const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
|
||
scene.add(particlesMesh);
|
||
|
||
/* =========================================
|
||
5. ANIMATION LOOP
|
||
========================================= */
|
||
const clock = new THREE.Clock();
|
||
|
||
function animate() {
|
||
const time = clock.getElapsedTime();
|
||
|
||
// 1. Obelisk Morphing (Vertex Displacement)
|
||
// 使用简单的正弦波叠加模拟 Perlin Noise 效果，避免引入庞大库
|
||
for (let i = 0; i < positionAttribute.count; i++) {
|
||
const x = originalPositions[i * 3];
|
||
const y = originalPositions[i * 3 + 1];
|
||
const z = originalPositions[i * 3 + 2];
|
||
|
||
// 基于时间和位置的噪声算法
|
||
const noise = Math.sin(x * 2 + time) * Math.cos(y * 1.5 + time) * Math.sin(z * 2 + time * 0.5);
|
||
const scale = 1 + noise * 0.15; // 变形幅度
|
||
|
||
positionAttribute.setXYZ(i, x * scale, y * scale, z * scale);
|
||
}
|
||
positionAttribute.needsUpdate = true;
|
||
|
||
// 2. Obelisk Rotation
|
||
obeliskGroup.rotation.y += 0.005;
|
||
obeliskGroup.rotation.z += 0.002;
|
||
|
||
// 3. Particle Parallax & Repulsion
|
||
// 让粒子整体跟随鼠标微动 (视差)
|
||
particlesMesh.rotation.y = state.mouseX * 0.05;
|
||
particlesMesh.rotation.x = state.mouseY * 0.05;
|
||
|
||
renderer.render(scene, camera);
|
||
requestAnimationFrame(animate);
|
||
}
|
||
animate();
|
||
|
||
/* =========================================
|
||
6. GSAP & SCROLL ANIMATIONS
|
||
========================================= */
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
// 场景颜色过渡: Cyan -> Purple -> Red
|
||
// 我们通过 Timeline 控制整个滚动的颜色变化
|
||
|
||
const tl = gsap.timeline({
|
||
scrollTrigger: {
|
||
trigger: "body",
|
||
start: "top top",
|
||
end: "bottom bottom",
|
||
scrub: 1 // 绑定滚动进度
|
||
}
|
||
});
|
||
|
||
// 颜色变化 1: Cyan -> Purple (Manifesto)
|
||
tl.to(materialGlass.emissive, { r: new THREE.Color(CONFIG.colors.purple).r, g: new THREE.Color(CONFIG.colors.purple).g, b: new THREE.Color(CONFIG.colors.purple).b }, 0)
|
||
.to(materialWire.color, { r: new THREE.Color(CONFIG.colors.purple).r, g: new THREE.Color(CONFIG.colors.purple).g, b: new THREE.Color(CONFIG.colors.purple).b }, 0);
|
||
|
||
// 颜色变化 2: Purple -> Red (Terminal/Warn)
|
||
tl.to(materialGlass.emissive, { r: new THREE.Color(CONFIG.colors.red).r, g: new THREE.Color(CONFIG.colors.red).g, b: new THREE.Color(CONFIG.colors.red).b }, 0.5)
|
||
.to(materialWire.color, { r: new THREE.Color(CONFIG.colors.red).r, g: new THREE.Color(CONFIG.colors.red).g, b: new THREE.Color(CONFIG.colors.red).b }, 0.5)
|
||
.to(wireMesh.scale, { x: 1.5, y: 1.5, z: 1.5 }, 0.5); // 红色时线框扩张，不稳定感
|
||
|
||
// 方尖碑位置移动
|
||
// 1. 移出视野中心，让位给 Manifesto
|
||
gsap.to(obeliskGroup.position, {
|
||
scrollTrigger: {
|
||
trigger: "#manifesto",
|
||
start: "top bottom",
|
||
end: "center center",
|
||
scrub: true
|
||
},
|
||
x: state.isMobile ? 0 : 2.5, // 移动端不动，桌面端右移
|
||
z: -2
|
||
});
|
||
|
||
// 2. Data Core Section，拉近或居中
|
||
gsap.to(obeliskGroup.position, {
|
||
scrollTrigger: {
|
||
trigger: "#data-core",
|
||
start: "top bottom",
|
||
end: "center center",
|
||
scrub: true
|
||
},
|
||
x: state.isMobile ? 0 : -2.5, // 移到左侧
|
||
z: 0
|
||
});
|
||
|
||
// 3. Terminal Section，旋转至倒置（象征颠覆/系统重启）
|
||
gsap.to(obeliskGroup.rotation, {
|
||
scrollTrigger: {
|
||
trigger: "#terminal-section",
|
||
start: "top bottom",
|
||
end: "center center",
|
||
scrub: true
|
||
},
|
||
x: Math.PI, // 翻转
|
||
z: Math.PI / 2
|
||
});
|
||
|
||
// UI 动画: Manifesto Cards Slide In
|
||
gsap.utils.toArray(".glass-panel").forEach((panel, i) => {
|
||
gsap.from(panel, {
|
||
scrollTrigger: {
|
||
trigger: panel,
|
||
start: "top 80%",
|
||
},
|
||
y: 50,
|
||
opacity: 0,
|
||
duration: 1,
|
||
ease: "power3.out",
|
||
delay: i * 0.2
|
||
});
|
||
});
|
||
|
||
// UI 动画: Progress Rings
|
||
const circles = document.querySelectorAll('.progress-ring__circle');
|
||
gsap.to(circles, {
|
||
strokeDashoffset: 0,
|
||
scrollTrigger: {
|
||
trigger: "#data-core",
|
||
start: "top 70%"
|
||
},
|
||
duration: 2,
|
||
ease: "power2.out",
|
||
onUpdate: function() {
|
||
// 更新文字百分比
|
||
const progress = Math.round(this.progress() * 100);
|
||
document.querySelectorAll('.stat-item p').forEach((p, idx) => {
|
||
// 简单的演示：所有圆环进度差不多，这里随机化一点点视觉效果
|
||
p.innerText = `${Math.min(100, Math.round(progress * (0.9 + Math.random() * 0.2)))}%`;
|
||
});
|
||
}
|
||
});
|
||
|
||
/* =========================================
|
||
7. UI INTERACTION LOGIC
|
||
========================================= */
|
||
|
||
// A. Typewriter Effect
|
||
const textToType = "正在初始化神经网络... // 探索者身份已确认";
|
||
const typeWriterElement = document.getElementById('typewriter-text');
|
||
let typeIndex = 0;
|
||
|
||
function typeWriter() {
|
||
if (typeIndex < textToType.length) {
|
||
typeWriterElement.innerHTML += textToType.charAt(typeIndex);
|
||
typeIndex++;
|
||
setTimeout(typeWriter, 50 + Math.random() * 50); // 随机打字速度
|
||
}
|
||
}
|
||
// 延迟一点开始
|
||
setTimeout(typeWriter, 1000);
|
||
|
||
// B. Custom Cursor
|
||
const cursor = document.getElementById('cursor');
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
state.mouseX = (e.clientX / window.innerWidth) * 2 - 1;
|
||
state.mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
|
||
|
||
// 使用 GSAP 平滑跟随
|
||
gsap.to(cursor, {
|
||
x: e.clientX,
|
||
y: e.clientY,
|
||
duration: 0.1,
|
||
ease: "power2.out"
|
||
});
|
||
|
||
// 简单的粒子排斥计算 (在 CPU 端)
|
||
// 注意：为了性能，我们只对整个粒子云做旋转视差，
|
||
// 如果要对每个点做排斥，需要写在 Shader 里，这里做简化处理。
|
||
});
|
||
|
||
document.addEventListener('mousedown', () => {
|
||
cursor.classList.add('click-anim');
|
||
setTimeout(() => cursor.classList.remove('click-anim'), 500);
|
||
});
|
||
|
||
// 悬停交互效果
|
||
const interactives = document.querySelectorAll('.interactive, a, button');
|
||
interactives.forEach(el => {
|
||
el.addEventListener('mouseenter', () => cursor.classList.add('hovered'));
|
||
el.addEventListener('mouseleave', () => cursor.classList.remove('hovered'));
|
||
});
|
||
|
||
// C. Audio Visualizer (Simulated)
|
||
const connectBtn = document.getElementById('connect-btn');
|
||
const visualizer = document.getElementById('visualizer');
|
||
let isConnected = false;
|
||
|
||
connectBtn.addEventListener('click', () => {
|
||
isConnected = !isConnected;
|
||
if (isConnected) {
|
||
visualizer.classList.add('audio-active');
|
||
connectBtn.innerText = "断开连接";
|
||
connectBtn.style.borderColor = CONFIG.colors.red;
|
||
connectBtn.style.color = CONFIG.colors.red;
|
||
// 按钮波纹
|
||
gsap.from(connectBtn, { scale: 0.9, duration: 0.1, yoyo: true, repeat: 1 });
|
||
} else {
|
||
visualizer.classList.remove('audio-active');
|
||
connectBtn.innerText = "连接神经网路";
|
||
connectBtn.style.borderColor = CONFIG.colors.cyan;
|
||
connectBtn.style.color = CONFIG.colors.cyan;
|
||
}
|
||
});
|
||
|
||
// D. Terminal Simulation
|
||
const terminalOutput = document.getElementById('terminal-output');
|
||
const logs = [
|
||
"> Accessing mainframe...",
|
||
"> Decrypting ancient protocols...",
|
||
"> WARNING: Firewall integrity at 30%",
|
||
"> Bypassing security layer [0xA4]...",
|
||
"> Found corrupted memory block.",
|
||
"> Data stream unstable.",
|
||
"> Tracing origin... [UNKNOWN]",
|
||
"> Uploading consciousness...",
|
||
"> SYSTEM FAILURE IMMINENT."
|
||
];
|
||
|
||
let logIndex = 0;
|
||
|
||
// 当滚动到 Terminal 区域时开始输出日志
|
||
ScrollTrigger.create({
|
||
trigger: "#terminal-section",
|
||
start: "top 70%",
|
||
onEnter: () => {
|
||
const logInterval = setInterval(() => {
|
||
if (logIndex >= logs.length) {
|
||
clearInterval(logInterval);
|
||
return;
|
||
}
|
||
const line = document.createElement('div');
|
||
line.className = 'log-line';
|
||
line.innerText = logs[logIndex];
|
||
terminalOutput.appendChild(line);
|
||
// 自动滚动到底部
|
||
terminalOutput.parentElement.scrollTop = terminalOutput.parentElement.scrollHeight;
|
||
logIndex++;
|
||
}, 600);
|
||
}
|
||
});
|
||
|
||
/* =========================================
|
||
8. RESIZE HANDLER
|
||
========================================= */
|
||
window.addEventListener('resize', () => {
|
||
// 更新相机
|
||
camera.aspect = window.innerWidth / window.innerHeight;
|
||
camera.updateProjectionMatrix();
|
||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
|
||
// 更新移动端状态
|
||
const isNowMobile = window.innerWidth < 768;
|
||
if (isNowMobile !== state.isMobile) {
|
||
state.isMobile = isNowMobile;
|
||
gsap.to(camera.position, { z: isNowMobile ? CONFIG.mobileCameraZ : CONFIG.cameraZ, duration: 1 });
|
||
// 如果之前移动了方尖碑，需要根据新布局重置（简化处理：刷新页面体验最佳，这里做简单复位）
|
||
if(isNowMobile) {
|
||
obeliskGroup.position.set(0, 0, 0);
|
||
}
|
||
}
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html> |