three.js雪花效果
时间: 2023-12-16 16:28:01 浏览: 21
以下是使用three.js实现雪花效果的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js Snowfall</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
<script>
var scene, camera, renderer, snowflakes = [];
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 100;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
for (var i = 0; i < 200; i++) {
var snowflakeGeometry = new THREE.BoxGeometry(1, 1, 1);
var snowflakeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
var snowflake = new THREE.Mesh(snowflakeGeometry, snowflakeMaterial);
snowflake.position.x = Math.random() * 200 - 100;
snowflake.position.y = Math.random() * 200 - 100;
snowflake.position.z = Math.random() * 200 - 100;
snowflakes.push(snowflake);
scene.add(snowflake);
}
}
function animate() {
requestAnimationFrame(animate);
for (var i = 0; i < snowflakes.length; i++) {
snowflakes[i].position.y -= Math.random() * 0.5;
snowflakes[i].position.x += Math.random() * 0.5 - 0.25;
snowflakes[i].position.z += Math.random() * 0.5 - 0.25;
if (snowflakes[i].position.y < -100) {
snowflakes[i].position.y = 100;
}
}
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
```