three 粒子特效--point简单例子

threejs 实现一个球形点阵图

import * as THREE from "three";

// 创建场景
const scene = new THREE.Scene();

// 创建相机 
// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  300
);
camera.position.set(0, 0, 28);
scene.add(camera);

// 创建一个球形物体
const sphereGeometry = new THREE.SphereGeometry(15, 32, 32);
// 设置点材质
const pointsMaterial = new THREE.PointsMaterial();
pointsMaterial.size = 0.01;
pointsMaterial.color.set(0xfff000);
// 相机深度而衰减
pointsMaterial.sizeAttenuation = true;

const points = new THREE.Points(sphereGeometry, pointsMaterial);

scene.add(points);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
// 设置初始角度
let angle = 0;
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 // 旋转物体
  points.rotation.y = angle * Math.PI / 180;
  points.rotation.x = angle * Math.PI / 180;

 // 渲染场景
 renderer.render(scene, camera);

 // 增加角度
 angle += 1;
 if (angle >= 360) {
     angle = 0;
 }
   //   根据当前滚动的scrolly，去设置相机移动的位置
   renderer.render(scene, camera);

}
animate();

最终效果：