新年快乐3d烟花代码
时间: 2025-01-02 20:30:40 浏览: 17
### 实现3D烟花效果的新年快乐代码
为了创建一个具有新年氛围的3D烟花动画,可以采用WebGL技术结合Three.js库来简化开发过程。下面是一个简单的例子,用于展示如何构建这样的场景。
#### HTML部分
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New Year Fireworks</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html>
```
#### JavaScript (main.js) 部分
```javascript
import * as THREE from 'three';
// 创建场景对象
const scene = new THREE.Scene();
// 设置相机参数并添加到场景中
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 初始化渲染器并将它附加至DOM树上
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加一些基础光源以便观察物体颜色变化
const light = new THREE.AmbientLight(0xffffff); // 白色环境光
scene.add(light);
function createFirework() {
const geometry = new THREE.SphereGeometry(0.1, 32, 32);
let materialColor;
switch(Math.floor(Math.random()*5)){
case 0 : materialColor=0xff0000;break;//红色
case 1 : materialColor=0x00ff00;break;//绿色
case 2 : materialColor=0x0000ff;break;//蓝色
case 3 : materialColor=0xffff00;break;//黄色
default:materialColor=0xffffff;break;//白色
}
const material = new THREE.MeshBasicMaterial({ color: materialColor });
const sphere = new THREE.Mesh(geometry, material);
sphere.position.set(
Math.random() * 6 - 3,
Math.random() * 6 - 3,
Math.random() * 6 - 3
);
return sphere;
}
let fireworks = [];
for(let i = 0;i<100;i++){
let firework=createFirework();
scene.add(firework);
fireworks.push(firework);
}
function animateParticles(){
for(const particle of fireworks){
if(particle.material.opacity>0){
particle.scale.x +=Math.random()/100;
particle.scale.y +=Math.random()/100;
particle.scale.z +=Math.random()/100;
particle.material.opacity -=0.01;
}else{
particle.material.opacity=1;
particle.scale.set(.1,.1,.1);
particle.position.set(
Math.random() * 6 - 3,
Math.random() * 6 - 3,
Math.random() * 6 - 3
)
}
}
}
function animate() {
requestAnimationFrame(animate);
animateParticles();
renderer.render(scene, camera);
}
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate();[^1]
```
这段代码实现了基本的3D烟花爆炸视觉效果,并通过不断更新粒子的位置和透明度模拟出烟花绽放的效果。由于采用了随机数函数,在每次刷新页面时都会呈现出不同的色彩组合与分布模式[^1]。
阅读全文