礼物爆炸动画特效

最新推荐文章于 2025-06-14 03:20:31 发布

原创最新推荐文章于 2025-06-14 03:20:31 发布

· 487 阅读

16 ·

版权

文章标签：

#arcgis

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>礼物爆炸动画特效</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #1a1a2e, #16213e);
font-family: 'Arial', sans-serif;
}

#container {
position: absolute;
width: 100%;
height: 100%;
}

#info {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
color: white;
z-index: 100;
pointer-events: none;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

#info h1 {
font-size: 2.5em;
margin-bottom: 10px;
}

#info p {
font-size: 1.2em;
margin-top: 0;
}

#openBtn {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
padding: 15px 30px;
font-size: 1.2em;
background: linear-gradient(45deg, #ff3366, #ff6b6b);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
z-index: 100;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: all 0.3s ease;
}

#openBtn:hover {
transform: translateX(-50%) scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

#openBtn:active {
transform: translateX(-50%) scale(0.95);
}

.link {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
font-size: 14px;
text-decoration: none;
z-index: 100;
}

.link:hover {
color: white;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container"></div>

<div id="info">
<h1>惊喜礼物盒</h1>
<p>点击下方按钮打开礼物</p>
</div>

<button id="openBtn">打开礼物</button>

<a href="http://9gm.100wanfu.com" class="link" target="_blank">获取更多惊喜</a>

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.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.setClearColor(0x16213e, 1);
document.getElementById('container').appendChild(renderer.domElement);

// 添加环境光和定向光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// 创建礼物盒
let giftBox;
let particles = [];
let explosionActive = false;
let particleCount = 200;

function createGiftBox() {
// 移除现有的礼物盒和粒子
if (giftBox) scene.remove(giftBox);
particles.forEach(particle => scene.remove(particle));
particles = [];
explosionActive = false;

// 创建礼物盒
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);

// 礼物盒材质 - 红色主体
const boxMaterials = [
new THREE.MeshPhongMaterial({ color: 0xff0000 }), // 右
new THREE.MeshPhongMaterial({ color: 0xff0000 }), // 左
new THREE.MeshPhongMaterial({ color: 0xffffff }), // 上
new THREE.MeshPhongMaterial({ color: 0xffffff }), // 下
new THREE.MeshPhongMaterial({ color: 0xff0000 }), // 前
new THREE.MeshPhongMaterial({ color: 0xff0000 }) // 后
];

giftBox = new THREE.Mesh(boxGeometry, boxMaterials);
giftBox.position.y = 1;
scene.add(giftBox);

// 创建蝴蝶结
const ribbonGeometry = new THREE.BoxGeometry(0.2, 0.5, 2.2);
const ribbonMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });
const ribbon1 = new THREE.Mesh(ribbonGeometry, ribbonMaterial);
ribbon1.position.set(0, 2.2, 0);
giftBox.add(ribbon1);

const ribbon2 = new THREE.Mesh(new THREE.BoxGeometry(2.2, 0.5, 0.2), ribbonMaterial);
ribbon2.position.set(0, 2.2, 0);
giftBox.add(ribbon2);

// 创建蝴蝶结中心
const bowCenterGeometry = new THREE.SphereGeometry(0.3, 16, 16);
const bowCenter = new THREE.Mesh(bowCenterGeometry, ribbonMaterial);
bowCenter.position.set(0, 2.2, 0);
giftBox.add(bowCenter);
}

// 创建爆炸粒子
function createParticles() {
const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff];

for (let i = 0; i < particleCount; i++) {
const size = Math.random() * 0.2 + 0.1;
const geometry = new THREE.SphereGeometry(size, 16, 16);
const material = new THREE.MeshPhongMaterial({
color: colors[Math.floor(Math.random() * colors.length)],
emissive: 0x222222,
emissiveIntensity: 0.5
});

const particle = new THREE.Mesh(geometry, material);

// 初始位置在礼物盒内部
particle.position.x = (Math.random() - 0.5) * 2;
particle.position.y = (Math.random() - 0.5) * 2 + 1;
particle.position.z = (Math.random() - 0.5) * 2;

// 随机速度
particle.userData = {
velocity: new THREE.Vector3(
(Math.random() - 0.5) * 0.2,
Math.random() * 0.2,
(Math.random() - 0.5) * 0.2
),
rotationSpeed: new THREE.Vector3(
Math.random() * 0.1,
Math.random() * 0.1,
Math.random() * 0.1
)
};

scene.add(particle);
particles.push(particle);
}
}

// 爆炸动画
function explode() {
explosionActive = true;
scene.remove(giftBox);
createParticles();

// 3秒后重新创建礼物盒
setTimeout(() => {
createGiftBox();
}, 3000);
}

// 相机位置
camera.position.z = 5;
camera.position.y = 2;

// 添加轨道控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

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

// 打开礼物按钮
document.getElementById('openBtn').addEventListener('click', explode);

// 初始创建礼物盒
createGiftBox();

// 动画循环
function animate() {
requestAnimationFrame(animate);

// 旋转礼物盒
if (giftBox && !explosionActive) {
giftBox.rotation.y += 0.01;
}

// 更新粒子位置
if (explosionActive) {
particles.forEach(particle => {
particle.position.x += particle.userData.velocity.x;
particle.position.y += particle.userData.velocity.y;
particle.position.z += particle.userData.velocity.z;

// 应用重力
particle.userData.velocity.y -= 0.01;

// 旋转粒子
particle.rotation.x += particle.userData.rotationSpeed.x;
particle.rotation.y += particle.userData.rotationSpeed.y;
particle.rotation.z += particle.userData.rotationSpeed.z;
});
}

controls.update();
renderer.render(scene, camera);
}

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