@
目录
- 🌟 第一步：准备好你的 GitHub 账号
- 🌟 第二步：创建一个特殊的仓库 (Repository)，配置网站
- 🌟 第三步：把你的网站放上去哦
- 🌟 第四步：配置GitHub Pages
- 🌟 第五步：见证奇迹的时刻！🎉
- 查看搭建状态
- 查看网站
- 💖 Conclusion | 结语
宝子们又来看我啦~欢迎！👋
是不是一直想拥有一个属于自己的网页？放放作品集、写写碎碎念，或者单纯用来分享一个个人网站？
但是一听到“服务器”、“域名”、“部署”这些词就头大，而且还不想花钱？💸
来来来，今天教大家用 GitHub Pages “白嫖”一个静态网站！不需要你是程序猿，只要会点鼠标，三分钟就能搞定！✨
🌟 第一步：准备好你的 GitHub 账号
首先，你要有一个 GitHub 账号。
如果你还没有，去 github.com 注册一个，起个好听的英文名哦！
🌟 第二步：创建一个特殊的仓库 (Repository)，配置网站
登录后，点击右上角的 + 号，选择 New repository。
确保选中 Public (公开)，然后点击最下面的绿色按钮 Create repository。搞定！✅
🌟 第三步：把你的网站放上去哦
现在仓库是空的，我们需要放一个网页进去。
为了演示方便，我们直接在网页上操作：
- 点击蓝色的链接 creating a new file。
- 文件名填
index.html(这是网页的“大门”)。 - 在下面的大框框里，随便写点什么！比如：
4.点击 Commit ... 保存。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>WebGL 手势控制爱心粒子</title><style>body { margin: 0; overflow: hidden; background-color: #000; }#canvas-container { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; }/* 隐藏摄像头视频流，只用于后台分析 */.input_video { display: none; }#loading {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);color: white; font-family: sans-serif; font-size: 24px; pointer-events: none; z-index: 10;}</style><!-- 引入 Three.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><!-- 引入 MediaPipe Hands --><script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
</head>
<body><div id="loading">正在加载模型与摄像头...<br>请允许摄像头权限</div>
<div id="canvas-container"></div>
<video class="input_video"></video><script>// --- 1. Three.js 场景初始化 ---const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 30;const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });renderer.setSize(window.innerWidth, window.innerHeight);document.getElementById('canvas-container').appendChild(renderer.domElement);// --- 2. 创建爱心粒子系统 ---const particleCount = 3000; // 粒子数量const geometry = new THREE.BufferGeometry();const positions = new Float32Array(particleCount * 3);const targetPositions = new Float32Array(particleCount * 3); // 存储爱心形状的目标位置const randomPositions = new Float32Array(particleCount * 3); // 存储散开时的随机位置// 爱心方程函数function getHeartPosition(t, scale = 1) {const x = 16 * Math.pow(Math.sin(t), 3);const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);const z = 0; return { x: x * scale, y: y * scale, z: z * scale };}for (let i = 0; i < particleCount; i++) {// 生成爱心形状的目标点// 为了让爱心立体一点，我们随机分布t，并在Z轴加一点随机扰动const t = Math.random() * Math.PI * 2;const scale = 0.5; const heartPos = getHeartPosition(t, scale);// 填充爱心内部 (随机缩放)const r = Math.sqrt(Math.random()); targetPositions[i * 3] = heartPos.x * r;targetPositions[i * 3 + 1] = heartPos.y * r;targetPositions[i * 3 + 2] = (Math.random() - 0.5) * 5; // Z轴厚度// 生成散开的随机位置 (爆炸效果)randomPositions[i * 3] = (Math.random() - 0.5) * 100;randomPositions[i * 3 + 1] = (Math.random() - 0.5) * 60;randomPositions[i * 3 + 2] = (Math.random() - 0.5) * 50;// 初始位置设为散开状态positions[i * 3] = randomPositions[i * 3];positions[i * 3 + 1] = randomPositions[i * 3 + 1];positions[i * 3 + 2] = randomPositions[i * 3 + 2];}geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));// 粒子材质const material = new THREE.PointsMaterial({color: 0xff69b4, // 热粉色size: 0.4,transparent: true,opacity: 0.8,blending: THREE.AdditiveBlending});const particles = new THREE.Points(geometry, material);scene.add(particles);// --- 3. 交互逻辑变量 ---let gatherFactor = 0; // 0 = 完全散开, 1 = 完全聚合成爱心let targetGatherFactor = 0; // 目标聚合度，由手势控制// --- 4. MediaPipe Hands 配置 ---const videoElement = document.getElementsByClassName('input_video')[0];function onResults(results) {document.getElementById('loading').style.display = 'none';if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {const landmarks = results.multiHandLandmarks[0];// 计算手掌开合程度// 简单算法：计算拇指指尖(4)与其他四指指尖(8,12,16,20)到手腕(0)的平均距离const wrist = landmarks[0];const fingerTips = [4, 8, 12, 16, 20];let totalDist = 0;fingerTips.forEach(idx => {const tip = landmarks[idx];const dist = Math.sqrt(Math.pow(tip.x - wrist.x, 2) + Math.pow(tip.y - wrist.y, 2));totalDist += dist;});const avgDist = totalDist / 5;// 经验阈值：// 握拳时，指尖距离手腕很近 (avgDist 约 0.1 - 0.2)// 张开时，指尖距离手腕较远 (avgDist 约 0.4 - 0.6)// 我们做一个映射：握拳(distance small) -> 聚合(factor 1), 张开 -> 散开(factor 0)// 动态调整这些阈值以适应摄像头的距离const closeThreshold = 0.25; const openThreshold = 0.5;let normalized = (avgDist - closeThreshold) / (openThreshold - closeThreshold);normalized = 1 - Math.min(Math.max(normalized, 0), 1); // 反转：距离越小(握拳)，值越大(1)targetGatherFactor = normalized; } else {// 如果没有检测到手，默认缓慢散开targetGatherFactor = 0;}}const hands = new Hands({locateFile: (file) => {return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;}});hands.setOptions({maxNumHands: 1,modelComplexity: 1,minDetectionConfidence: 0.5,minTrackingConfidence: 0.5});hands.onResults(onResults);const cameraUtils = new Camera(videoElement, {onFrame: async () => {await hands.send({image: videoElement});},width: 640,height: 480});cameraUtils.start();// --- 5. 动画循环 ---function animate() {requestAnimationFrame(animate);// 粒子自身旋转动画particles.rotation.y += 0.002;// 平滑过渡聚合系数 (Lerp)gatherFactor += (targetGatherFactor - gatherFactor) * 0.05;// 更新粒子位置const posAttr = particles.geometry.attributes.position;const currentPositions = posAttr.array;for (let i = 0; i < particleCount; i++) {const idx = i * 3;// 目标位置插值：从 randomPositions 过渡到 targetPositionsconst tx = randomPositions[idx] + (targetPositions[idx] - randomPositions[idx]) * gatherFactor;const ty = randomPositions[idx+1] + (targetPositions[idx+1] - randomPositions[idx+1]) * gatherFactor;const tz = randomPositions[idx+2] + (targetPositions[idx+2] - randomPositions[idx+2]) * gatherFactor;// 增加一点动态浮动效果currentPositions[idx] += (tx - currentPositions[idx]) * 0.1;currentPositions[idx+1] += (ty - currentPositions[idx+1]) * 0.1;currentPositions[idx+2] += (tz - currentPositions[idx+2]) * 0.1;}posAttr.needsUpdate = true;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>🌟 第四步：配置GitHub Pages
- 在GitHub仓库页面：
-
- 点击"Settings"选项卡
-
- 在左侧菜单中选择"Pages"
-
- 在"Source"部分，选择要部署的分支（通常是main）
-
- 选择根目录（/root）或文档目录（/docs）
-
- 点击"Save"
-
- 等待几分钟，网站将部署完成
这里是最最关键的一步！⚠️
- 等待几分钟，网站将部署完成
🌟 第五步：见证奇迹的时刻！🎉
保存好之后，其实 GitHub 已经在后台偷偷帮你部署啦！
稍等几十秒（有时候可能要一两分钟，喝口水的时间~ ☕️）。
查看搭建状态
点击仓库上方的 Actions -> 可以查看你的网站搭建状态。
查看网站
点击仓库上方的 Settings (设置) ⚙️ -> 左侧栏找到 Pages。
恭喜你！！点击那个链接，你就看到了你刚刚写的网页啦！🌏
不管你在地球的哪个角落，只要有网，都能访问这个链接！
💖 Conclusion | 结语
-
That's all for today~ - | 今天就写到这里啦~
-
Guys, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~~ | 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
-
Everyone, be happy every day! 大家要天天开心哦
-
Welcome everyone to point out any mistakes in the article~ | 欢迎大家指出文章需要改正之处~
-
Learning has no end; win-win cooperation | 学无止境，合作共赢
-
Welcome all the passers-by, boys and girls, to offer better suggestions! ~~~ | 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
