29:null 2a:["$","title",null,{"children":"Animating lots of Three.js particles with GSAP | Dea Bankova | Observable"}] 2f:[] 2d:{"id":"402b042d34dc74b5","slug":"animating-lots-of-three-js-particles-with-gsap","title":"Animating lots of Three.js particles with GSAP","thumbnail":"9d944255d050b51fce72918a9408f414cff5befda73a8d258fc99c49edb46356","access_level":"public","create_time":"$D2022-07-10T16:07:27.743Z","update_time":"$D2022-07-24T16:00:01.542Z","view_time":null,"first_public_time":"$D2022-07-17T13:54:53.499Z","has_unpublished_edits":null,"fork":{"id":"4d9b7665f00a916c","slug":"three-js","title":"Three.js","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":35,"starred":false,"owner":{"type":"team","id":"ff1e8a7fac805262","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":"starter_2024"},"version":486,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02cf083ba1ef32dd","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":null}],"members":[{"type":"individual","id":"02cf083ba1ef32dd","login":"deaxmachina","name":"Dea Bankova","avatar_url":"https://avatars-next.observableusercontent.com/a308b4ba2fa30b481d3ab1406f4359318e3fd5edded8e9b84c8b3a2fd8831a1a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":20,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"

\n \n \n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"viewof MAX_POINTS = Inputs.range([10000, 1000000], {value: 100000, step: 5000, label: \"Number of points\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"viewof textureType = Inputs.radio(['none', 'blurred', 'ring', 'heart', 'star', 'semi-circle'], {label: \"Texture\", value: 'none'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"renderer.domElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"## GSAP Animations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"## Particles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"particles1 = new THREE.Points(geometry1, material)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"particles2 = new THREE.Points(geometry2, material)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"geometry = new THREE.BufferGeometry()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"geometry1 = new THREE.BufferGeometry()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"geometry1.setAttribute('position', new THREE.BufferAttribute(positions1, 3))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"geometry.setAttribute('position', new THREE.BufferAttribute(positions1.slice(), 3))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"geometry2 = new THREE.BufferGeometry()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"geometry2.setAttribute('position', new THREE.BufferAttribute(positions2, 3))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"## 🟣 Material","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"textureLoader = new THREE.TextureLoader()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"## 🎬 Scene","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"## 🎥 Camera","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"## 🖼️ Renderer ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"gs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"