首页html3d粒子圣诞树代码

html3d粒子圣诞树代码

时间: 2023-12-25 16:05:25 浏览: 203

以下是一个使用HTML5和Three.js库创建3D粒子圣诞树效果的代码示例： ```html <!DOCTYPE html> <html> <head> <title>3D粒子圣诞树</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script> <script> // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建粒子系统 var particles = new THREE.Geometry(); var particleMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 }); // 添加粒子 for (var i = 0; i < 1000; i++) { var x = Math.random() * 10 - 5; var y = Math.random() * 10 - 5; var z = Math.random() * 10 - 5; var particle = new THREE.Vector3(x, y, z); particles.vertices.push(particle); } // 创建粒子系统对象 var particleSystem = new THREE.Points(particles, particleMaterial); // 将粒子系统添加到场景中 scene.add(particleSystem); // 渲染循环 function animate() { requestAnimationFrame(animate); particleSystem.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 这段代码使用了Three.js库来创建一个粒子系统，粒子系统中的每个粒子都是一个3D坐标点。通过改变粒子的位置和旋转，可以实现3D粒子圣诞树的效果。

阅读全文