Ubuntu
121 lines
4.1 KiB
HTML
121 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>01 - Hello Particles | 最简单的粒子</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background: #0a0a0a;
|
|
overflow: hidden;
|
|
font-family: 'Space Mono', monospace;
|
|
}
|
|
#canvas-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.info {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 20px;
|
|
color: #00ff88;
|
|
font-size: 14px;
|
|
pointer-events: none;
|
|
text-shadow: 0 0 10px #00ff88;
|
|
}
|
|
.info h1 { font-size: 18px; margin-bottom: 8px; }
|
|
.info p { opacity: 0.8; font-size: 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="canvas-container"></div>
|
|
<div class="info">
|
|
<h1>01 - Hello Particles</h1>
|
|
<p>最简单的静态粒子云</p>
|
|
<p>粒子数: <span id="count">0</span></p>
|
|
</div>
|
|
|
|
<!-- Three.js CDN -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script>
|
|
// 场景设置
|
|
const scene = new THREE.Scene();
|
|
scene.fog = new THREE.FogExp2(0x0a0a0a, 0.02);
|
|
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
camera.position.z = 50;
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
document.getElementById('canvas-container').appendChild(renderer.domElement);
|
|
|
|
// 粒子参数
|
|
const PARTICLE_COUNT = 500;
|
|
const geometry = new THREE.BufferGeometry();
|
|
const positions = new Float32Array(PARTICLE_COUNT * 3);
|
|
const colors = new Float32Array(PARTICLE_COUNT * 3);
|
|
|
|
// 生成随机粒子位置和颜色
|
|
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
|
// 位置: 在球体内随机分布
|
|
const theta = Math.random() * Math.PI * 2;
|
|
const phi = Math.acos(2 * Math.random() - 1);
|
|
const r = Math.cbrt(Math.random()) * 30; // 立方根让分布更均匀
|
|
|
|
positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
|
|
positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
|
|
positions[i * 3 + 2] = r * Math.cos(phi);
|
|
|
|
// 颜色: 青绿色渐变
|
|
const hue = 0.4 + Math.random() * 0.2; // 青绿色区间
|
|
const color = new THREE.Color().setHSL(hue, 0.8, 0.6);
|
|
colors[i * 3] = color.r;
|
|
colors[i * 3 + 1] = color.g;
|
|
colors[i * 3 + 2] = color.b;
|
|
}
|
|
|
|
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
|
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
|
|
|
|
// 粒子材质
|
|
const material = new THREE.PointsMaterial({
|
|
size: 0.5,
|
|
vertexColors: true,
|
|
transparent: true,
|
|
opacity: 0.8,
|
|
sizeAttenuation: true
|
|
});
|
|
|
|
const particles = new THREE.Points(geometry, material);
|
|
scene.add(particles);
|
|
|
|
// 更新计数显示
|
|
document.getElementById('count').textContent = PARTICLE_COUNT;
|
|
|
|
// 动画循环
|
|
let time = 0;
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
time += 0.001;
|
|
|
|
// 整体缓慢旋转
|
|
particles.rotation.y = time * 0.5;
|
|
particles.rotation.x = Math.sin(time * 0.3) * 0.2;
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
animate();
|
|
|
|
// 响应窗口调整
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|