前言
今天我们来聊聊如何用JS来创造一个3D的粒子化星空，十分地酷炫，小伙伴们一起来试试叭！
首先我们先来看看我们的星空，将鼠标放在上面可以出现3D移动的效果，大家一起试试
html
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粒子化</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #container{ color: red; width: 100%; height: 100%; } </style> </head> <body> <div id="container"></div> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.150.1/three.js"></script> <script src="./index.js"></script> </body> </html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">设置IE浏览器使用最新的渲染引擎。<meta name="viewport" content="width=device-width, initial-scale=1.0">设置视口的宽度为设备宽度，并且初始缩放比例为1.0。<title>粒子化</title>设置网页的标题为"粒子化"。<style>标签用于定义内部样式表。*选择器用于选择所有元素。html, body选择器用于选择html和body元素。#container选择器用于选择id为"container"的元素。<body>标签包含了网页的可见内容。<div id="container"></div>创建一个id为"container"的div元素，用于容纳粒子效果。<script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.150.1/three.js"></script>引入了一个外部的JavaScript库，用于创建3D效果。<script src="./index.js"></script>引入了一个名为"index.js"的JavaScript文件，用于实现粒子效果的逻辑
CSS样式
*选择器用于选择所有元素，并将其边距和内边距都设置为0，这样可以消除不同浏览器的默认样式差异。html, body选择器用于选择html和body元素，并将它们的宽度和高度都设置为100%，这样可以使网页占据整个可视区域。#container选择器用于选择id为"container"的元素，并将其文字颜色设置为红色，宽度和高度都设置为100%。<div id="container"></div>创建了一个id为"container"的div元素，它的宽度和高度都会被CSS样式设置为100%。
这些CSS样式的设置可以确保网页占据整个可视区域，并将id为"container"的div元素的文字颜色设置为红色。
JS
使用了Three.js库来创建一个粒子效果的动画。
scene、camera、renderer、material、mouseX、mouseY是全局变量，用于存储场景、相机、渲染器、材质以及鼠标的位置信息。init()函数用于初始化场景、相机、粒子和渲染器等元素。camera是一个透视相机，其位置设置在 z 轴上，距离原点 500 个单位。scene是一个场景对象，通过创建THREE.Scene()实例来创建。scene.fog是一个雾化效果，通过创建THREE.FogExp2()实例来创建。geometry是一个缓冲几何体，通过创建THREE.BufferGeometry()实例来创建。vertices是一个数组，用于存储粒子的位置信息。- 通过循环生成了 20000 个粒子的随机位置，并将其存储在
vertices数组中。 geometry.setAttribute()方法用于设置几何体的顶点位置属性。material是一个点材质，通过创建THREE.PointsMaterial()实例来创建。particles是一个点对象，通过创建THREE.Points()实例，并传入几何体和材质来创建。scene.add()方法用于将点对象添加到场景中。renderer是一个 WebGL 渲染器，通过创建THREE.WebGLRenderer()实例来创建。renderer.setPixelRatio()方法用于设置渲染器的像素比例。renderer.setSize()方法用于设置渲染器的尺寸。renderer.render()方法用于渲染场景和相机。document.getElementById().appendChild()方法用于将渲染器的 DOM 元素添加到 HTML 页面中。document.getElementById().addEventListener()方法用于给容器元素添加鼠标移动事件监听器。animate()函数用于控制摄像机的动画效果。requestAnimationFrame()方法用于在下一帧执行动画函数。render()函数用于更新摄像机的位置、视角，并渲染场景。onPointerMove()函数用于获取鼠标的位置，并将其转换为相对于窗口中心的坐标。
整体来说，这段代码通过 Three.js 库创建了一个粒子效果的动画，当鼠标移动时，摄像机会跟随鼠标位置动态变化，同时场景中的粒子也会旋转。
我们放上代码
let scene let camear let renderer let material let mouseX = 0 let mouseY = 0 function init() { camear = new THREE.PerspectiveCamera() camear.position.z = 500 scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000ff, 0.001) const geometry = new THREE.BufferGeometry() var vertices = [] const size = 2000 for (let i = 0; i < 20000; i++) { const x = (Math.random() * size + Math.random() * size) / 2 - size / 2 const y = (Math.random() * size + Math.random() * size) / 2 - size / 2 const z = (Math.random() * size + Math.random() * size) / 2 - size / 2 vertices.push(x, y, z) } geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)) material = new THREE.PointsMaterial({ size: 2, color: 0xffffff }) const particles = new THREE.Points(geometry, material) scene.add(particles) renderer = new THREE.WebGLRenderer() renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(window.innerWidth, window.innerHeight) renderer.render(scene, camear) document.getElementById('container').appendChild(renderer.domElement) document.getElementById('container').addEventListener('pointermove', onPointerMove) } init() animate() function animate() { // 控制摄像头动起来 requestAnimationFrame(animate) render() } function render() { camear.position.x += (mouseX * 2 - camear.position.x) * 0.02 camear.position.y += (-mouseY * 2 - camear.position.y) * 0.02 camear.lookAt(scene.position) renderer.render(scene, camear) scene.rotation.x += 0.001 scene.rotation.y += 0.002 } function onPointerMove(event) { mouseX = event.clientX - (window.innerWidth / 2) mouseY = event.clientY - (window.innerHeight / 2) }
今天的讲解就到这里啦，大家快来试试，效果十分的酷炫哦~
今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧
