three粒子飘动效果

1、总结template div idbox/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.depthTestfalse//第一种方案设置为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