运行结果
代码解读
这段代码是一个使用Three.js创建交互式粒子系统的示例。下面对代码进行详解：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Three.js Interactive Particle System Example</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>
在头部，我们设置了页面的标题，并引入了Three.js库。
// 创建场景 var scene = new THREE.Scene();
在这里，我们创建了一个Three.js场景。
// 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 100;
接着，我们创建了一个透视相机，并将其位置设置为 z 轴上的 100。
// 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
然后，我们创建了一个WebGL渲染器，并将其大小设置为窗口的宽度和高度。最后，将渲染器的canvas元素添加到网页的body中。
// 创建粒子系统 var particleCount = 1000; var particles = new THREE.Geometry(); for (var i = 0; i < particleCount; i++) { var particle = new THREE.Vector3( Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * 200 - 100 ); particles.vertices.push(particle); } var particleMaterial = new THREE.PointsMaterial({ color: 0xffffff }); var particleSystem = new THREE.Points(particles, particleMaterial); scene.add(particleSystem);
接下来，我们创建了一个粒子系统。首先定义了粒子数量（这里是1000个），然后使用循环生成了每个粒子的位置坐标。通过THREE.Vector3类创建了三维向量，并将其添加到particles对象的顶点数组中。然后，创建了一个用于渲染粒子的材质，并使用THREE.Points对象将粒子集合和材质组合起来。最后，将粒子系统添加到场景中。
// 交互事件监听器 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove(event) { event.preventDefault(); mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; } function onClick(event) { event.preventDefault(); raycaster.setFromCamera(mouse, camera); var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { var selectedParticle = intersects[0].object; selectedParticle.material.color.set(Math.random() * 0xffffff); } } window.addEventListener('mousemove', onMouseMove, false); window.addEventListener('click', onClick, false);
这部分代码实现了交互事件的监听。首先创建了一个THREE.Raycaster对象和一个THREE.Vector2对象。然后定义了onMouseMove和onClick两个函数来处理鼠标移动和点击事件。onMouseMove函数用于更新鼠标位置，将其转换为Three.js坐标系中的标准化设备坐标（NDC）。onClick函数会根据鼠标点击的位置发射一条射线，并检测是否与场景中的物体相交。如果有物体相交，则将第一个相交物体的颜色设置为随机的新颜色。
最后，通过window.addEventListener方法将鼠标移动和点击事件绑定到窗口上。
```javascript // 动画循环 function animate() { requestAnimationFrame(animate); particleSystem.rotation.y += 0.005; renderer.render(scene, camera); } animate(); </script> </body> </html>
最后，我们定义了一个动画循环函数animate。在每一帧中，我们更新粒子系统的旋转角度并使用渲染器将场景渲染到屏幕上。requestAnimationFrame方法用于递归调用animate函数，以实现流畅的动画效果。
最后，在页面加载完毕之后，我们调用animate函数启动动画循环。
整个代码实例演示了如何使用Three.js创建一个交互式的粒子系统，并通过鼠标移动和点击事件对粒子进行操作。
