feat(christmas): 添加圣诞主题3D互动页面
- 创建了基于Three.js的3D圣诞树场景 - 实现了粒子系统，包括装饰球、礼盒和彩带 - 添加了照片上传功能，支持用户自定义装饰 - 集成了手势识别，可通过手势控制视角和模式 - 设计了多种显示模式：散落、树形和聚焦视图 - 添加了后期处理效果，增强视觉体验 - 实现了响应式设计，适配不同屏幕尺寸 - 添加了节日加载动画和UI界面 - 配置了SEO和社交平台分享元数据
This commit is contained in:
hehh
672
christmas.html
Normal file
672
christmas.html
Normal file
@@ -0,0 +1,672 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>关于我 - Honesty</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
|
||||
<!--SEO信息 -->
|
||||
<meta name="description" content="关于Honesty,关于HeHouHui,关于HeHui,关于明厚, About Me Honesty, About Me HeHouHui, About Me HeHui">
|
||||
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
|
||||
<link rel="canonical" href="https://www.hehouhui.cn/about.html">
|
||||
<meta name="author" content="Honesty">
|
||||
|
||||
<!-- 社交平台分享优化 -->
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://www.hehouhui.cn/christmas.html">
|
||||
<meta property="og:title" content="🎄圣诞快乐🎉 - Honesty的个人主页">
|
||||
<meta property="og:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
||||
<meta property="og:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||||
<meta property="og:site_name" content="Honesty的个人主页">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:url" content="https://www.hehouhui.cn/christmas.html">
|
||||
<meta property="twitter:title" content="🎄圣诞快乐🎉 - Honesty的个人主页">
|
||||
<meta property="twitter:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
||||
<meta property="twitter:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||||
<meta property="twitter:site" content="@Honesty861024">
|
||||
<link rel="alternate" hreflang="zh-cn" href="https://www.hehouhui.cn/about.html">
|
||||
<link rel="alternate" hreflang="en" href="https://www.hehouhui.cn/about.html?lang=en">
|
||||
<link rel="alternate" hreflang="x-default" href="https://www.hehouhui.cn/about.html">
|
||||
|
||||
<!-- 微信小程序/朋友圈分享 -->
|
||||
<meta property="wechat:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||||
<meta property="wechat:title" content="关于我 - Honesty的个人主页">
|
||||
<meta property="wechat:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。">
|
||||
<title>Grand Luxury Tree Final v2</title>
|
||||
<style>
|
||||
body { margin: 0; overflow: hidden; background-color: #000000; font-family: 'Times New Roman', serif; }
|
||||
#canvas-container { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
|
||||
/* UI Overlay - Minimalist */
|
||||
#ui-layer {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
z-index: 10; pointer-events: none;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
box-sizing: border-box;
|
||||
/* Remove transition here as we don't hide the whole layer anymore */
|
||||
}
|
||||
|
||||
/* When hidden class is applied to specific elements */
|
||||
.ui-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
#loader {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: #000; z-index: 100;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
transition: opacity 0.8s ease-out;
|
||||
}
|
||||
.loader-text {
|
||||
color: #d4af37; font-size: 14px; letter-spacing: 4px; margin-top: 20px;
|
||||
text-transform: uppercase; font-weight: 100;
|
||||
}
|
||||
.spinner {
|
||||
width: 40px; height: 40px; border: 1px solid rgba(212, 175, 55, 0.2);
|
||||
border-top: 1px solid #d4af37; border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||||
|
||||
/* Typography - Centerpiece */
|
||||
h1 {
|
||||
color: #fceea7; font-size: 56px; margin: 0; font-weight: 400;
|
||||
letter-spacing: 6px;
|
||||
text-shadow: 0 0 50px rgba(252, 238, 167, 0.6);
|
||||
background: linear-gradient(to bottom, #fff, #eebb66);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
font-family: 'Cinzel', 'Times New Roman', serif;
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.5s ease; /* Ensure smooth transitions if needed */
|
||||
}
|
||||
|
||||
/* Upload Button - Restored & Elegant */
|
||||
.upload-wrapper {
|
||||
margin-top: 20px;
|
||||
pointer-events: auto;
|
||||
text-align: center;
|
||||
transition: opacity 0.5s ease; /* Add transition for smooth hiding */
|
||||
}
|
||||
.upload-btn {
|
||||
background: rgba(20, 20, 20, 0.6);
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
color: #d4af37;
|
||||
padding: 10px 25px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-size: 10px;
|
||||
transition: all 0.4s;
|
||||
display: inline-block;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.upload-btn:hover {
|
||||
background: #d4af37;
|
||||
color: #000;
|
||||
box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
|
||||
}
|
||||
.hint-text {
|
||||
color: rgba(212, 175, 55, 0.5);
|
||||
font-size: 9px;
|
||||
margin-top: 8px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#file-input { display: none; }
|
||||
|
||||
/* Webcam feedback */
|
||||
#webcam-wrapper {
|
||||
position: absolute; bottom: 40px; right: 40px;
|
||||
width: 120px; height: 90px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
overflow: hidden; opacity: 0; /* Hidden by default but functional */
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
|
||||
</style>
|
||||
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/",
|
||||
"@mediapipe/tasks-vision": "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/+esm"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="loader">
|
||||
<div class="spinner"></div>
|
||||
<div class="loader-text">Loading Holiday Magic</div>
|
||||
</div>
|
||||
|
||||
<div id="canvas-container"></div>
|
||||
|
||||
<div id="ui-layer">
|
||||
<h1>Merry Christmas - Honesty</h1>
|
||||
|
||||
<div class="upload-wrapper">
|
||||
<label class="upload-btn">
|
||||
Add Memories
|
||||
<input type="file" id="file-input" multiple accept="image/*">
|
||||
</label>
|
||||
<div class="hint-text">Press 'H' to Hide Controls</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Webcam hidden structure -->
|
||||
<div id="webcam-wrapper">
|
||||
<video id="webcam" autoplay playsinline style="display:none;"></video>
|
||||
<canvas id="webcam-preview"></canvas>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import * as THREE from 'three';
|
||||
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
|
||||
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
||||
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
|
||||
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
|
||||
import { FilesetResolver, HandLandmarker } from '@mediapipe/tasks-vision';
|
||||
|
||||
// --- CONFIGURATION ---
|
||||
const CONFIG = {
|
||||
colors: {
|
||||
bg: 0x000000,
|
||||
champagneGold: 0xffd966,
|
||||
deepGreen: 0x03180a,
|
||||
accentRed: 0x990000,
|
||||
},
|
||||
particles: {
|
||||
count: 1500,
|
||||
dustCount: 2500,
|
||||
treeHeight: 24,
|
||||
treeRadius: 8
|
||||
},
|
||||
camera: {
|
||||
z: 50
|
||||
}
|
||||
};
|
||||
|
||||
const STATE = {
|
||||
mode: 'SCATTER',
|
||||
focusIndex: -1,
|
||||
focusTarget: null,
|
||||
hand: { detected: false, x: 0, y: 0 },
|
||||
rotation: { x: 0, y: 0 }
|
||||
};
|
||||
|
||||
let scene, camera, renderer, composer;
|
||||
let mainGroup;
|
||||
let clock = new THREE.Clock();
|
||||
let particleSystem = [];
|
||||
let photoMeshGroup = new THREE.Group();
|
||||
let handLandmarker, video, webcamCanvas, webcamCtx;
|
||||
let caneTexture;
|
||||
|
||||
async function init() {
|
||||
initThree();
|
||||
setupEnvironment();
|
||||
setupLights();
|
||||
createTextures();
|
||||
createParticles();
|
||||
createDust();
|
||||
createDefaultPhotos();
|
||||
setupPostProcessing();
|
||||
setupEvents();
|
||||
await initMediaPipe();
|
||||
|
||||
const loader = document.getElementById('loader');
|
||||
loader.style.opacity = 0;
|
||||
setTimeout(() => loader.remove(), 800);
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
function initThree() {
|
||||
const container = document.getElementById('canvas-container');
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(CONFIG.colors.bg);
|
||||
scene.fog = new THREE.FogExp2(CONFIG.colors.bg, 0.01);
|
||||
|
||||
camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 2, CONFIG.camera.z);
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false, powerPreference: "high-performance" });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
renderer.toneMapping = THREE.ReinhardToneMapping;
|
||||
renderer.toneMappingExposure = 2.2;
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
mainGroup = new THREE.Group();
|
||||
scene.add(mainGroup);
|
||||
}
|
||||
|
||||
function setupEnvironment() {
|
||||
const pmremGenerator = new THREE.PMREMGenerator(renderer);
|
||||
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
|
||||
}
|
||||
|
||||
function setupLights() {
|
||||
const ambient = new THREE.AmbientLight(0xffffff, 0.6);
|
||||
scene.add(ambient);
|
||||
|
||||
const innerLight = new THREE.PointLight(0xffaa00, 2, 20);
|
||||
innerLight.position.set(0, 5, 0);
|
||||
mainGroup.add(innerLight);
|
||||
|
||||
const spotGold = new THREE.SpotLight(0xffcc66, 1200);
|
||||
spotGold.position.set(30, 40, 40);
|
||||
spotGold.angle = 0.5;
|
||||
spotGold.penumbra = 0.5;
|
||||
scene.add(spotGold);
|
||||
|
||||
const spotBlue = new THREE.SpotLight(0x6688ff, 600);
|
||||
spotBlue.position.set(-30, 20, -30);
|
||||
scene.add(spotBlue);
|
||||
|
||||
const fill = new THREE.DirectionalLight(0xffeebb, 0.8);
|
||||
fill.position.set(0, 0, 50);
|
||||
scene.add(fill);
|
||||
}
|
||||
|
||||
function setupPostProcessing() {
|
||||
const renderScene = new RenderPass(scene, camera);
|
||||
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
|
||||
bloomPass.threshold = 0.7;
|
||||
bloomPass.strength = 0.45;
|
||||
bloomPass.radius = 0.4;
|
||||
|
||||
composer = new EffectComposer(renderer);
|
||||
composer.addPass(renderScene);
|
||||
composer.addPass(bloomPass);
|
||||
}
|
||||
|
||||
function createTextures() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 128; canvas.height = 128;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0,0,128,128);
|
||||
ctx.fillStyle = '#880000';
|
||||
ctx.beginPath();
|
||||
for(let i=-128; i<256; i+=32) {
|
||||
ctx.moveTo(i, 0); ctx.lineTo(i+32, 128); ctx.lineTo(i+16, 128); ctx.lineTo(i-16, 0);
|
||||
}
|
||||
ctx.fill();
|
||||
caneTexture = new THREE.CanvasTexture(canvas);
|
||||
caneTexture.wrapS = THREE.RepeatWrapping;
|
||||
caneTexture.wrapT = THREE.RepeatWrapping;
|
||||
caneTexture.repeat.set(3, 3);
|
||||
}
|
||||
|
||||
class Particle {
|
||||
constructor(mesh, type, isDust = false) {
|
||||
this.mesh = mesh;
|
||||
this.type = type;
|
||||
this.isDust = isDust;
|
||||
|
||||
this.posTree = new THREE.Vector3();
|
||||
this.posScatter = new THREE.Vector3();
|
||||
this.baseScale = mesh.scale.x;
|
||||
|
||||
// Individual Spin Speed
|
||||
// Photos spin slower to be readable
|
||||
const speedMult = (type === 'PHOTO') ? 0.3 : 2.0;
|
||||
|
||||
this.spinSpeed = new THREE.Vector3(
|
||||
(Math.random() - 0.5) * speedMult,
|
||||
(Math.random() - 0.5) * speedMult,
|
||||
(Math.random() - 0.5) * speedMult
|
||||
);
|
||||
|
||||
this.calculatePositions();
|
||||
}
|
||||
|
||||
calculatePositions() {
|
||||
// TREE: Tight Spiral
|
||||
const h = CONFIG.particles.treeHeight;
|
||||
const halfH = h / 2;
|
||||
let t = Math.random();
|
||||
t = Math.pow(t, 0.8);
|
||||
const y = (t * h) - halfH;
|
||||
let rMax = CONFIG.particles.treeRadius * (1.0 - t);
|
||||
if (rMax < 0.5) rMax = 0.5;
|
||||
const angle = t * 50 * Math.PI + Math.random() * Math.PI;
|
||||
const r = rMax * (0.8 + Math.random() * 0.4);
|
||||
this.posTree.set(Math.cos(angle) * r, y, Math.sin(angle) * r);
|
||||
|
||||
// SCATTER: 3D Sphere
|
||||
let rScatter = this.isDust ? (12 + Math.random()*20) : (8 + Math.random()*12);
|
||||
const theta = Math.random() * Math.PI * 2;
|
||||
const phi = Math.acos(2 * Math.random() - 1);
|
||||
this.posScatter.set(
|
||||
rScatter * Math.sin(phi) * Math.cos(theta),
|
||||
rScatter * Math.sin(phi) * Math.sin(theta),
|
||||
rScatter * Math.cos(phi)
|
||||
);
|
||||
}
|
||||
|
||||
update(dt, mode, focusTargetMesh) {
|
||||
let target = this.posScatter;
|
||||
|
||||
if (mode === 'TREE') target = this.posTree;
|
||||
else if (mode === 'FOCUS') {
|
||||
if (this.mesh === focusTargetMesh) {
|
||||
const desiredWorldPos = new THREE.Vector3(0, 2, 35);
|
||||
const invMatrix = new THREE.Matrix4().copy(mainGroup.matrixWorld).invert();
|
||||
target = desiredWorldPos.applyMatrix4(invMatrix);
|
||||
} else {
|
||||
target = this.posScatter;
|
||||
}
|
||||
}
|
||||
|
||||
// Movement Easing
|
||||
const lerpSpeed = (mode === 'FOCUS' && this.mesh === focusTargetMesh) ? 5.0 : 2.0;
|
||||
this.mesh.position.lerp(target, lerpSpeed * dt);
|
||||
|
||||
// Rotation Logic - CRITICAL: Ensure spin happens in Scatter
|
||||
if (mode === 'SCATTER') {
|
||||
this.mesh.rotation.x += this.spinSpeed.x * dt;
|
||||
this.mesh.rotation.y += this.spinSpeed.y * dt;
|
||||
this.mesh.rotation.z += this.spinSpeed.z * dt; // Added Z for more natural tumble
|
||||
} else if (mode === 'TREE') {
|
||||
// Reset rotations slowly
|
||||
this.mesh.rotation.x = THREE.MathUtils.lerp(this.mesh.rotation.x, 0, dt);
|
||||
this.mesh.rotation.z = THREE.MathUtils.lerp(this.mesh.rotation.z, 0, dt);
|
||||
this.mesh.rotation.y += 0.5 * dt;
|
||||
}
|
||||
|
||||
if (mode === 'FOCUS' && this.mesh === focusTargetMesh) {
|
||||
this.mesh.lookAt(camera.position);
|
||||
}
|
||||
|
||||
// Scale Logic
|
||||
let s = this.baseScale;
|
||||
if (this.isDust) {
|
||||
s = this.baseScale * (0.8 + 0.4 * Math.sin(clock.elapsedTime * 4 + this.mesh.id));
|
||||
if (mode === 'TREE') s = 0;
|
||||
} else if (mode === 'SCATTER' && this.type === 'PHOTO') {
|
||||
// Large preview size in scatter
|
||||
s = this.baseScale * 2.5;
|
||||
} else if (mode === 'FOCUS') {
|
||||
if (this.mesh === focusTargetMesh) s = 4.5;
|
||||
else s = this.baseScale * 0.8;
|
||||
}
|
||||
|
||||
this.mesh.scale.lerp(new THREE.Vector3(s,s,s), 4*dt);
|
||||
}
|
||||
}
|
||||
|
||||
// --- CREATION ---
|
||||
function createParticles() {
|
||||
const sphereGeo = new THREE.SphereGeometry(0.5, 32, 32);
|
||||
const boxGeo = new THREE.BoxGeometry(0.55, 0.55, 0.55);
|
||||
const curve = new THREE.CatmullRomCurve3([
|
||||
new THREE.Vector3(0, -0.5, 0), new THREE.Vector3(0, 0.3, 0),
|
||||
new THREE.Vector3(0.1, 0.5, 0), new THREE.Vector3(0.3, 0.4, 0)
|
||||
]);
|
||||
const candyGeo = new THREE.TubeGeometry(curve, 16, 0.08, 8, false);
|
||||
|
||||
const goldMat = new THREE.MeshStandardMaterial({
|
||||
color: CONFIG.colors.champagneGold,
|
||||
metalness: 1.0, roughness: 0.1,
|
||||
envMapIntensity: 2.0,
|
||||
emissive: 0x443300,
|
||||
emissiveIntensity: 0.3
|
||||
});
|
||||
|
||||
const greenMat = new THREE.MeshStandardMaterial({
|
||||
color: CONFIG.colors.deepGreen,
|
||||
metalness: 0.2, roughness: 0.8,
|
||||
emissive: 0x002200,
|
||||
emissiveIntensity: 0.2
|
||||
});
|
||||
|
||||
const redMat = new THREE.MeshPhysicalMaterial({
|
||||
color: CONFIG.colors.accentRed,
|
||||
metalness: 0.3, roughness: 0.2, clearcoat: 1.0,
|
||||
emissive: 0x330000
|
||||
});
|
||||
|
||||
const candyMat = new THREE.MeshStandardMaterial({ map: caneTexture, roughness: 0.4 });
|
||||
|
||||
for (let i = 0; i < CONFIG.particles.count; i++) {
|
||||
const rand = Math.random();
|
||||
let mesh, type;
|
||||
|
||||
if (rand < 0.40) {
|
||||
mesh = new THREE.Mesh(boxGeo, greenMat);
|
||||
type = 'BOX';
|
||||
} else if (rand < 0.70) {
|
||||
mesh = new THREE.Mesh(boxGeo, goldMat);
|
||||
type = 'GOLD_BOX';
|
||||
} else if (rand < 0.92) {
|
||||
mesh = new THREE.Mesh(sphereGeo, goldMat);
|
||||
type = 'GOLD_SPHERE';
|
||||
} else if (rand < 0.97) {
|
||||
mesh = new THREE.Mesh(sphereGeo, redMat);
|
||||
type = 'RED';
|
||||
} else {
|
||||
mesh = new THREE.Mesh(candyGeo, candyMat);
|
||||
type = 'CANE';
|
||||
}
|
||||
|
||||
const s = 0.4 + Math.random() * 0.5;
|
||||
mesh.scale.set(s,s,s);
|
||||
mesh.rotation.set(Math.random()*6, Math.random()*6, Math.random()*6);
|
||||
|
||||
mainGroup.add(mesh);
|
||||
particleSystem.push(new Particle(mesh, type, false));
|
||||
}
|
||||
|
||||
const starGeo = new THREE.OctahedronGeometry(1.2, 0);
|
||||
const starMat = new THREE.MeshStandardMaterial({
|
||||
color: 0xffdd88, emissive: 0xffaa00, emissiveIntensity: 1.0,
|
||||
metalness: 1.0, roughness: 0
|
||||
});
|
||||
const star = new THREE.Mesh(starGeo, starMat);
|
||||
star.position.set(0, CONFIG.particles.treeHeight/2 + 1.2, 0);
|
||||
mainGroup.add(star);
|
||||
|
||||
mainGroup.add(photoMeshGroup);
|
||||
}
|
||||
|
||||
function createDust() {
|
||||
const geo = new THREE.TetrahedronGeometry(0.08, 0);
|
||||
const mat = new THREE.MeshBasicMaterial({ color: 0xffeebb, transparent: true, opacity: 0.8 });
|
||||
|
||||
for(let i=0; i<CONFIG.particles.dustCount; i++) {
|
||||
const mesh = new THREE.Mesh(geo, mat);
|
||||
mesh.scale.setScalar(0.5 + Math.random());
|
||||
mainGroup.add(mesh);
|
||||
particleSystem.push(new Particle(mesh, 'DUST', true));
|
||||
}
|
||||
}
|
||||
|
||||
function createDefaultPhotos() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 512; canvas.height = 512;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = '#050505'; ctx.fillRect(0,0,512,512);
|
||||
ctx.strokeStyle = '#eebb66'; ctx.lineWidth = 15; ctx.strokeRect(20,20,472,472);
|
||||
ctx.font = '500 60px Times New Roman'; ctx.fillStyle = '#eebb66';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText("JOYEUX", 256, 230);
|
||||
ctx.fillText("NOEL", 256, 300);
|
||||
|
||||
const tex = new THREE.CanvasTexture(canvas);
|
||||
tex.colorSpace = THREE.SRGBColorSpace;
|
||||
addPhotoToScene(tex);
|
||||
}
|
||||
|
||||
function addPhotoToScene(texture) {
|
||||
const frameGeo = new THREE.BoxGeometry(1.4, 1.4, 0.05);
|
||||
const frameMat = new THREE.MeshStandardMaterial({ color: CONFIG.colors.champagneGold, metalness: 1.0, roughness: 0.1 });
|
||||
const frame = new THREE.Mesh(frameGeo, frameMat);
|
||||
|
||||
const photoGeo = new THREE.PlaneGeometry(1.2, 1.2);
|
||||
const photoMat = new THREE.MeshBasicMaterial({ map: texture });
|
||||
const photo = new THREE.Mesh(photoGeo, photoMat);
|
||||
photo.position.z = 0.04;
|
||||
|
||||
const group = new THREE.Group();
|
||||
group.add(frame);
|
||||
group.add(photo);
|
||||
|
||||
const s = 0.8;
|
||||
group.scale.set(s,s,s);
|
||||
|
||||
photoMeshGroup.add(group);
|
||||
particleSystem.push(new Particle(group, 'PHOTO', false));
|
||||
}
|
||||
|
||||
function handleImageUpload(e) {
|
||||
const files = e.target.files;
|
||||
if(!files.length) return;
|
||||
Array.from(files).forEach(f => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (ev) => {
|
||||
new THREE.TextureLoader().load(ev.target.result, (t) => {
|
||||
t.colorSpace = THREE.SRGBColorSpace;
|
||||
addPhotoToScene(t);
|
||||
});
|
||||
}
|
||||
reader.readAsDataURL(f);
|
||||
});
|
||||
}
|
||||
|
||||
// --- MEDIAPIPE ---
|
||||
async function initMediaPipe() {
|
||||
video = document.getElementById('webcam');
|
||||
webcamCanvas = document.getElementById('webcam-preview');
|
||||
webcamCtx = webcamCanvas.getContext('2d');
|
||||
webcamCanvas.width = 160; webcamCanvas.height = 120;
|
||||
|
||||
const vision = await FilesetResolver.forVisionTasks(
|
||||
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm"
|
||||
);
|
||||
handLandmarker = await HandLandmarker.createFromOptions(vision, {
|
||||
baseOptions: {
|
||||
modelAssetPath: `https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task`,
|
||||
delegate: "GPU"
|
||||
},
|
||||
runningMode: "VIDEO",
|
||||
numHands: 1
|
||||
});
|
||||
|
||||
if (navigator.mediaDevices?.getUserMedia) {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
video.srcObject = stream;
|
||||
video.addEventListener("loadeddata", predictWebcam);
|
||||
}
|
||||
}
|
||||
|
||||
let lastVideoTime = -1;
|
||||
async function predictWebcam() {
|
||||
if (video.currentTime !== lastVideoTime) {
|
||||
lastVideoTime = video.currentTime;
|
||||
if (handLandmarker) {
|
||||
const result = handLandmarker.detectForVideo(video, performance.now());
|
||||
processGestures(result);
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(predictWebcam);
|
||||
}
|
||||
|
||||
function processGestures(result) {
|
||||
if (result.landmarks && result.landmarks.length > 0) {
|
||||
STATE.hand.detected = true;
|
||||
const lm = result.landmarks[0];
|
||||
STATE.hand.x = (lm[9].x - 0.5) * 2;
|
||||
STATE.hand.y = (lm[9].y - 0.5) * 2;
|
||||
|
||||
const thumb = lm[4]; const index = lm[8]; const wrist = lm[0];
|
||||
const pinchDist = Math.hypot(thumb.x - index.x, thumb.y - index.y);
|
||||
const tips = [lm[8], lm[12], lm[16], lm[20]];
|
||||
let avgDist = 0;
|
||||
tips.forEach(t => avgDist += Math.hypot(t.x - wrist.x, t.y - wrist.y));
|
||||
avgDist /= 4;
|
||||
|
||||
if (pinchDist < 0.05) {
|
||||
if (STATE.mode !== 'FOCUS') {
|
||||
STATE.mode = 'FOCUS';
|
||||
const photos = particleSystem.filter(p => p.type === 'PHOTO');
|
||||
if (photos.length) STATE.focusTarget = photos[Math.floor(Math.random()*photos.length)].mesh;
|
||||
}
|
||||
} else if (avgDist < 0.25) {
|
||||
STATE.mode = 'TREE';
|
||||
STATE.focusTarget = null;
|
||||
} else {
|
||||
STATE.mode = 'SCATTER';
|
||||
STATE.focusTarget = null;
|
||||
}
|
||||
} else {
|
||||
STATE.hand.detected = false;
|
||||
}
|
||||
}
|
||||
|
||||
function setupEvents() {
|
||||
window.addEventListener('resize', () => {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
composer.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
document.getElementById('file-input').addEventListener('change', handleImageUpload);
|
||||
|
||||
// Toggle UI logic - ONLY hide controls, keep title
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key.toLowerCase() === 'h') {
|
||||
const controls = document.querySelector('.upload-wrapper');
|
||||
if (controls) controls.classList.toggle('ui-hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
const dt = clock.getDelta();
|
||||
|
||||
// Rotation Logic
|
||||
if (STATE.mode === 'SCATTER' && STATE.hand.detected) {
|
||||
const targetRotY = STATE.hand.x * Math.PI * 0.9;
|
||||
const targetRotX = STATE.hand.y * Math.PI * 0.25;
|
||||
STATE.rotation.y += (targetRotY - STATE.rotation.y) * 3.0 * dt;
|
||||
STATE.rotation.x += (targetRotX - STATE.rotation.x) * 3.0 * dt;
|
||||
} else {
|
||||
if(STATE.mode === 'TREE') {
|
||||
STATE.rotation.y += 0.3 * dt;
|
||||
STATE.rotation.x += (0 - STATE.rotation.x) * 2.0 * dt;
|
||||
} else {
|
||||
STATE.rotation.y += 0.1 * dt;
|
||||
}
|
||||
}
|
||||
|
||||
mainGroup.rotation.y = STATE.rotation.y;
|
||||
mainGroup.rotation.x = STATE.rotation.x;
|
||||
|
||||
particleSystem.forEach(p => p.update(dt, STATE.mode, STATE.focusTarget));
|
||||
composer.render();
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
data/christmas.mp3
Normal file
BIN
data/christmas.mp3
Normal file
Binary file not shown.
Reference in New Issue
Block a user