SOURCE

// 创建容器元素
const container = document.createElement('div');
container.id = 'container';
container.style.position = 'relative';
container.style.width = '400px';
container.style.height = '400px';
container.style.margin = '0 auto';

// 创建六边形元素
const hexagon = document.createElement('div');
hexagon.id = 'hexagon';
hexagon.style.position = 'absolute';
hexagon.style.width = '100%';
hexagon.style.height = '100%';
hexagon.style.backgroundColor = '#333';
hexagon.style.clipPath = 'polygon(25% 5%, 75% 5%, 95% 50%, 75% 95%, 25% 95%, 5% 50%)';
hexagon.style.transformOrigin = 'center';

// 创建球元素
const ball = document.createElement('div');
ball.id = 'ball';
ball.style.position = 'absolute';
ball.style.width = '30px';
ball.style.height = '30px';
ball.style.backgroundColor = '#e74c3c';
ball.style.borderRadius = '50%';
ball.style.transformOrigin = 'center';

// 添加到容器和DOM
container.appendChild(hexagon);
container.appendChild(ball);
document.body.appendChild(container);

// 设置页面样式
document.body.style.margin = '0';
document.body.style.overflow = 'hidden';
document.body.style.display = 'flex';
document.body.style.justifyContent = 'center';
document.body.style.alignItems = 'center';
document.body.style.height = '100vh';
document.body.style.backgroundColor = '#f0f0f0';

// 六边形参数
const hexagonSize = 400;
const hexagonPoints = [
    {x: 100, y: 20},    // 左上
    {x: 300, y: 20},    // 右上
    {x: 380, y: 200},   // 右
    {x: 300, y: 380},   // 右下
    {x: 100, y: 380},   // 左下
    {x: 20, y: 200}     // 左
];

// 球参数
const ballSize = 30;
let ballPos = {x: 200, y: 200};
let ballVel = {x: 0, y: 0};

// 物理参数
const gravity = 0.2;
const friction = 0.99;
const bounceFactor = 0.8;
const rotationSpeed = 0.5;
let rotationAngle = 0;

// 获取旋转后的六边形顶点
function getRotatedHexagonPoints() {
    const centerX = hexagonSize / 2;
    const centerY = hexagonSize / 2;
    
    return hexagonPoints.map(point => {
        // 转换为以中心为原点的坐标
        const x = point.x - centerX;
        const y = point.y - centerY;
        
        // 旋转
        const rotatedX = x * Math.cos(rotationAngle) - y * Math.sin(rotationAngle);
        const rotatedY = x * Math.sin(rotationAngle) + y * Math.cos(rotationAngle);
        
        // 转换回绝对坐标
        return {
            x: rotatedX + centerX,
            y: rotatedY + centerY
        };
    });
}

// 检查球与六边形边的碰撞
function checkCollision() {
    const points = getRotatedHexagonPoints();
    
    for (let i = 0; i < points.length; i++) {
        const p1 = points[i];
        const p2 = points[(i + 1) % points.length];
        
        // 计算边的向量
        const edge = {
            x: p2.x - p1.x,
            y: p2.y - p1.y
        };
        
        // 边的法向量（指向六边形内部）
        const normal = {
            x: -edge.y,
            y: edge.x
        };
        
        // 归一化法向量
        const length = Math.sqrt(normal.x * normal.x + normal.y * normal.y);
        normal.x /= length;
        normal.y /= length;
        
        // 球中心到边的距离
        const ballToEdge = {
            x: ballPos.x - p1.x,
            y: ballPos.y - p1.y
        };
        
        // 计算投影距离
        const distance = ballToEdge.x * normal.x + ballToEdge.y * normal.y;
        
        // 如果距离小于球半径，则发生碰撞
        if (distance < ballSize / 2 && distance > -ballSize / 2) {
            // 检查球是否在边的范围内
            const edgeLength = Math.sqrt(edge.x * edge.x + edge.y * edge.y);
            const edgeDir = {
                x: edge.x / edgeLength,
                y: edge.y / edgeLength
            };
            
            const projection = ballToEdge.x * edgeDir.x + ballToEdge.y * edgeDir.y;
            
            if (projection >= 0 && projection <= edgeLength) {
                // 碰撞响应
                const penetration = ballSize / 2 - distance;
                
                // 移动球以避免穿透
                ballPos.x += normal.x * penetration;
                ballPos.y += normal.y * penetration;
                
                // 计算速度在法向量上的投影
                const velocityProjection = ballVel.x * normal.x + ballVel.y * normal.y;
                
                // 如果球正在向边移动（避免粘滞）
                if (velocityProjection < 0) {
                    // 反弹 - 反转法线方向的速度分量
                    ballVel.x -= (1 + bounceFactor) * velocityProjection * normal.x;
                    ballVel.y -= (1 + bounceFactor) * velocityProjection * normal.y;
                    
                    // 添加摩擦力 - 只影响切线方向的速度
                    const tangentVel = {
                        x: ballVel.x - velocityProjection * normal.x,
                        y: ballVel.y - velocityProjection * normal.y
                    };
                    
                    ballVel.x = tangentVel.x * friction + velocityProjection * normal.x * bounceFactor;
                    ballVel.y = tangentVel.y * friction + velocityProjection * normal.y * bounceFactor;
                }
                
                return true;
            }
        }
    }
    
    return false;
}

// 动画循环
function animate() {
    // 旋转六边形
    rotationAngle += rotationSpeed * Math.PI / 500;
    hexagon.style.transform = `rotate(${rotationAngle}rad)`;
    
    // 应用重力
    ballVel.y += gravity;
    
    // 更新球位置
    ballPos.x += ballVel.x;
    ballPos.y += ballVel.y;
    
    // 检查碰撞
    checkCollision();
    
    // 更新球的位置
    ball.style.left = `${ballPos.x - ballSize / 2}px`;
    ball.style.top = `${ballPos.y - ballSize / 2}px`;
    
    requestAnimationFrame(animate);
}

// 初始化球位置和速度
ballPos = {x: 200, y: 250};
ballVel = {x: 2, y: 0};

// 开始动画
animate();

<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="gTnKp.js"></script>
  </body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>震撼3D粒子交互动画</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        canvas {
            display: block;
        }
        .info {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-family: Arial, sans-serif;
            pointer-events: none;
            text-shadow: 0 0 5px #000;
        }
    </style>
</head>
<body>
    <div class="info">移动鼠标与粒子互动</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <script>
        // 初始化场景、相机和渲染器
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.body.appendChild(renderer.domElement);

        // 添加环境光和点光源
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);
        
        const pointLight = new THREE.PointLight(0xffffff, 1, 100);
        pointLight.position.set(10, 10, 10);
        scene.add(pointLight);

        // 创建粒子系统
        const particleCount = 15000;
        const particles = new THREE.BufferGeometry();
        const positions = new Float32Array(particleCount * 3);
        const colors = new Float32Array(particleCount * 3);
        const sizes = new Float32Array(particleCount);

        // 随机位置、颜色和大小
        for (let i = 0; i < particleCount; i++) {
            // 初始位置在一个球体内
            const radius = 20;
            const theta = Math.random() * Math.PI * 2;
            const phi = Math.random() * Math.PI;
            
            positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
            positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
            positions[i * 3 + 2] = radius * Math.cos(phi);
            
            // 随机颜色
            colors[i * 3] = Math.random() * 0.5 + 0.5; // 红色分量
            colors[i * 3 + 1] = Math.random() * 0.3 + 0.2; // 绿色分量
            colors[i * 3 + 2] = Math.random() * 0.5 + 0.5; // 蓝色分量
            
            // 随机大小
            sizes[i] = Math.random() * 0.5 + 0.5;
        }

        particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));
        particles.setAttribute('size', new THREE.BufferAttribute(sizes, 1));

        // 创建粒子材质
        const particleMaterial = new THREE.PointsMaterial({
            size: 0.2,
            vertexColors: true,
            transparent: true,
            opacity: 0.8,
            blending: THREE.AdditiveBlending,
            sizeAttenuation: true
        });

        // 创建粒子系统
        const particleSystem = new THREE.Points(particles, particleMaterial);
        scene.add(particleSystem);

        // 鼠标交互变量
        const mouse = new THREE.Vector2();
        const mouseTarget = new THREE.Vector2();
        const windowHalf = new THREE.Vector2(window.innerWidth / 2, window.innerHeight / 2);

        // 鼠标移动事件
        document.addEventListener('mousemove', (event) => {
            mouse.x = (event.clientX - windowHalf.x) / windowHalf.x;
            mouse.y = (event.clientY - windowHalf.y) / windowHalf.y;
            
            // 平滑跟随鼠标
            mouseTarget.x = (event.clientX - windowHalf.x) / windowHalf.x;
            mouseTarget.y = (event.clientY - windowHalf.y) / windowHalf.y;
        });

        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            windowHalf.set(window.innerWidth / 2, window.innerHeight / 2);
        });

        // 动画变量
        let time = 0;
        const originalPositions = particles.attributes.position.array.slice();
        const noise = new Float32Array(particleCount * 3);

        // 生成一些随机噪声
        for (let i = 0; i < particleCount * 3; i++) {
            noise[i] = Math.random() * 2 - 1;
        }

        // 相机位置
        camera.position.z = 30;

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            
            time += 0.005;
            
            // 平滑鼠标移动
            mouse.x += (mouseTarget.x - mouse.x) * 0.05;
            mouse.y += (mouseTarget.y - mouse.y) * 0.05;
            
            // 更新粒子位置
            const positions = particles.attributes.position.array;
            
            for (let i = 0; i < particleCount; i++) {
                const i3 = i * 3;
                
                // 原始位置
                const ox = originalPositions[i3];
                const oy = originalPositions[i3 + 1];
                const oz = originalPositions[i3 + 2];
                
                // 鼠标影响
                const dx = mouse.x * 10;
                const dy = mouse.y * 10;
                
                // 距离计算
                const dist = Math.sqrt(
                    Math.pow(positions[i3] - dx, 2) + 
                    Math.pow(positions[i3 + 1] - dy, 2)
                );
                
                // 鼠标排斥力
                const force = Math.max(0, 1 - dist / 15);
                const angle = Math.atan2(positions[i3 + 1] - dy, positions[i3] - dx);
                
                // 应用各种力
                positions[i3] = ox + 
                    Math.sin(time + oz * 0.1) * 2 + 
                    noise[i3] * 0.3 + 
                    Math.cos(angle) * force * 10;
                
                positions[i3 + 1] = oy + 
                    Math.cos(time + ox * 0.1) * 2 + 
                    noise[i3 + 1] * 0.3 + 
                    Math.sin(angle) * force * 10;
                
                positions[i3 + 2] = oz + 
                    Math.sin(time + oy * 0.1) * 2 + 
                    noise[i3 + 2] * 0.3;
            }
            
            particles.attributes.position.needsUpdate = true;
            
            // 旋转粒子系统
            particleSystem.rotation.x = time * 0.1;
            particleSystem.rotation.y = time * 0.15;
            
            // 渲染场景
            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html> -->