前言

今天我们来聊聊如何用JS来创造一个3D的粒子化星空，十分地酷炫，小伙伴们一起来试试叭！

首先我们先来看看我们的星空，将鼠标放在上面可以出现3D移动的效果，大家一起试试

html

<!DOCTYPE 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)
}

今天的讲解就到这里啦，大家快来试试，效果十分的酷炫哦~

今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧

使用JS创造一个3D粒子化星空，十分酷炫，大家快进来看看吧

前言

html

CSS样式

JS