three粒子飘动效果

1、总结

<template> <div id="box"></div> </template> <script setup> import * as three from 'three'; import { onMounted } from 'vue'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import ring from "../assets/ring_a.png" onMounted(() => { const box = document.querySelector("#box") const scene = new three.Scene() const textLoader = new three.TextureLoader() const ringMap = textLoader.load(ring) let count = 6000 //点的个数 const particleGeometry = new three.BufferGeometry() const positions = new Float32Array(count * 3) const colors = new Float32Array(count * 3) for (let i = 0; i < count * 3; i++) { positions[i] = (Math.random() - 0.5) * 20 //-5 - 5 //*后面的数表示的是范围 colors[i] = Math.random()// 0-1 } particleGeometry.setAttribute('position', new three.BufferAttribute(positions, 3)) particleGeometry.setAttribute('color', new three.BufferAttribute(colors, 3)) const particleMaterial = new three.PointsMaterial({ size: 0.1, transparent: true, sizeAttenuation: true//大小进行衰减 }) particleMaterial.map = ringMap // particleMaterial.depthTest=false//第一种方案，设置为false就可以看到后面的元素了 particleMaterial.depthWrite = false//第二种方案，设置为false就可以看到后面的元素了 particleMaterial.blending = three.AdditiveBlending //开启混合，就是颜色会混合 particleMaterial.vertexColors = true//开启后：粒子颜色 = 几何体顶点上设置的 colors 数组 const particle = new three.Points(particleGeometry, particleMaterial) scene.add(particle) // 聚光灯 const spotLight = new three.SpotLight(0xffffff, 200); spotLight.position.set(0, 0, 10); spotLight.castShadow = true spotLight.shadow.camera.near = 1 spotLight.shadow.camera.far = 300 spotLight.shadow.camera.fov = 20 scene.add(spotLight) const sizes = { width: window.innerWidth, height: window.innerHeight } const camera = new three.PerspectiveCamera(75, sizes.width / sizes.height) camera.position.set(-10, 0.5, 5) camera.lookAt(0, 0, 0) scene.add(camera) // const axesHelper = new three.AxesHelper(100) // scene.add(axesHelper) const renderer = new three.WebGLRenderer() renderer.setSize(sizes.width, sizes.height) renderer.shadowMap.enabled = true // 2. 必须开启渲染器阴影 const controls = new OrbitControls(camera, renderer.domElement) controls.addEventListener("change", () => { renderer.render(scene, camera) }) renderer.render(scene, camera) box.appendChild(renderer.domElement) const clock = new three.Clock() animation() function animation() { renderer.render(scene, camera) const time = clock.getElapsedTime() // particle.rotation.y = time * 0.2//旋转 for (let i = 0; i < count; i++) { const i3 = i * 3 const x = particleGeometry.attributes.position.array[i3] //particleGeometry.attributes.position.array获取的是1维数组 particleGeometry.attributes.position.array[i3 + 1] = Math.sin(time + x) } particleGeometry.attributes.position.needsUpdate = true // controls.update() requestAnimationFrame(animation) } }) </script>