31:[] 2f:{"title":"Animating lots of Three.js particles with GSAP","cells":[{"id":242,"value":"# Animating lots of Three.js particles with GSAP","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"

\n \n \n

","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"viewof MAX_POINTS = Inputs.range([10000, 1000000], {value: 100000, step: 5000, label: \"Number of points\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"viewof textureType = Inputs.radio(['none', 'blurred', 'ring', 'heart', 'star', 'semi-circle'], {label: \"Texture\", value: 'none'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"renderer.domElement","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"// Continuously updates\n{\n while (true) {\n renderer.render(scene, camera);\n yield null; \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"{\n // Bring in the animation control buttons\n const buttonParticles1 = document.querySelector('#particles-1')\n const buttonParticles2 = document.querySelector('#particles-2')\n // Add event listeners such that the first button plays the particle animation forwards and the second one backwards\n buttonParticles1.addEventListener('click', () => {\n gsapAnimateFrom1to2()\n })\n buttonParticles2.addEventListener('click', () => {\n gsapAnimateFrom2to1() \n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"## GSAP Animations","pinned":false,"hidden":false,"mode":"md"},{"id":370,"value":"gsapAnimateFrom1to2 = () => {\n gsap.to(particles.geometry.attributes.position.array, {\n endArray: particles2.geometry.attributes.position.array,\n duration: 3,\n ease: 'power2',\n // Make sure to tell it to update if not using the tick function\n onUpdate: () => {\n particles.geometry.attributes.position.needsUpdate = true;\n camera.lookAt(particles.position);\n renderer.render(scene, camera);\n },\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"gsapAnimateFrom2to1 = () => {\n gsap.to(particles.geometry.attributes.position.array, {\n endArray: particles1.geometry.attributes.position.array,\n duration: 3,\n ease: 'power2',\n // Make sure to tell it to update if not using the tick function\n onUpdate: () => {\n particles.geometry.attributes.position.needsUpdate = true;\n // controls.update() -- only works while it's updating\n camera.lookAt(particles.position);\n renderer.render(scene, camera);\n },\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"## Particles","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"particles = new THREE.Points(geometry, material) // Starting particles; geometry is a copy of geometry1 for particles1","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"particles1 = new THREE.Points(geometry1, material)","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"particles2 = new THREE.Points(geometry2, material)","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"## Geometries\nCreate 3 geometries, where two of them are the same, but make sure you copy the positions array.\nThis is so that we can have a 'starting' position for the particles.\nRandomly position the particles in each; can also have different num particles","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"geometry = new THREE.BufferGeometry()","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"geometry1 = new THREE.BufferGeometry()","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"positions1 = {\n const positions1 = new Float32Array(MAX_POINTS * 3)\n for (let i = 0; i < MAX_POINTS; i++) {\n const i3 = i * 3\n positions1[i3 + 0] = (Math.random() - 0.5) * 10\n positions1[i3 + 1] = (Math.random() - 0.5) * 10\n positions1[i3 + 2] = (Math.random() - 0.5) * 10\n }\n return positions1\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"geometry1.setAttribute('position', new THREE.BufferAttribute(positions1, 3))","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"geometry.setAttribute('position', new THREE.BufferAttribute(positions1.slice(), 3))","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"geometry2 = new THREE.BufferGeometry()","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"positions2 = {\n const positions2 = new Float32Array(MAX_POINTS * 3)\n for (let i = 0; i < MAX_POINTS; i++) {\n const i3 = i * 3\n positions2[i3 + 0] = (Math.random() - 0.5) * 30\n positions2[i3 + 1] = (Math.random() - 0.5) * 30\n positions2[i3 + 2] = (Math.random() - 0.5) * 30\n }\n return positions2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"geometry2.setAttribute('position', new THREE.BufferAttribute(positions2, 3))","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"## 🟣 Material","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"material = new THREE.PointsMaterial({\n color: '#B5255A',\n size: textureType === 'none' || !textureType ? 0.15 : 0.75,\n sizeAttenuation: true,\n transparent: true,\n depthWrite: false,\n alphaMap: textureType === 'none' || !textureType ? false : particleTexture,\n blending: textureType === 'none' || !textureType ? false : THREE.AdditiveBlending,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"textureLoader = new THREE.TextureLoader()","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"particleTexture = textureLoader.load(`https://raw.githubusercontent.com/deaxmachina/example_threejs-demos/main/public/textures/particles/${textureOptions[textureType]}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"textureOptions = ({\n 'blurred': '1.png',\n 'ring': '2.png',\n 'star': '5.png',\n 'semi-circle': '6.png',\n 'heart': '10.png'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"## 🎬 Scene","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x001b42); // 0x001b42\n scene.add(particles);\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"## 🎥 Camera","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 100;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(10, 10, 25)\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"## 🖼️ Renderer ","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"height = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.142.0/build/three.min.js\");\n await require(\"three@0.142.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"gs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}