Note: Ensure you have a basic Three.js scene setup before proceeding.
17 |18 | 19 | ```javascript 20 | import * as THREE from 'three' 21 | 22 | // Particle geometry 23 | const particlesGeo = new THREE.BufferGeometry() 24 | const count = 3000; 25 | 26 | const positions = new Float32Array(count * 3) 27 | const colors = new Float32Array(count * 3) 28 | 29 | const colorList = Object.values(THREE.Color.NAMES); 30 | 31 | for (let i = 0; i < count * 3; i++) { 32 | positions[i] = Math.random() 33 | colors[i] = Math.random() 34 | } 35 | 36 | particlesGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3)) 37 | particlesGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3)) 38 | 39 | // Particle material 40 | const particlesMaterial = new THREE.PointsMaterial({ 41 | size: 0.03, 42 | sizeAttenuation: true, 43 | transparent: true, 44 | depthWrite: false, 45 | blending: THREE.AdditiveBlending, 46 | vertexColors: true, 47 | }) 48 | 49 | // Particle system 50 | const particles = new THREE.Points(particlesGeo, particlesMaterial) 51 | scene.add(particles) 52 | 53 | //Animation Example 54 | const AnimationType = { 55 | DimensionSteal: function () { 56 | for(let i = 0; i < count; i++) { 57 | const i3 = i * 3; 58 | const x = particlesGeo.attributes.position.array[i3] 59 | const y = particlesGeo.attributes.position.array[i3 + 1] 60 | const z = particlesGeo.attributes.position.array[i3 + 2] 61 | 62 | particlesGeo.attributes.position.array[i3 + 1] = Math.sin(clock.getElapsedTime() + x) * 1.3 63 | particlesGeo.attributes.position.array[i3] = Math.cos(clock.getElapsedTime() + x * y * z) * 1.3 64 | particlesGeo.attributes.position.array[i3 + 2] = Math.cos(clock.getElapsedTime() + x - y / z) * 1.3 65 | } 66 | 67 | particlesGeo.attributes.position.needsUpdate = true 68 | 69 | } 70 | } 71 | 72 | // Animation loop 73 | function runnable(){ 74 | AnimationType.DimensionSteal() 75 | window.requestAnimationFrame(runnable) 76 | } 77 | 78 | // Start animation loop 79 | runnable(); 80 | 81 | ``` 82 |
83 |