- Fix Resize particles

package.json

@@ -8,7 +8,7 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "three": "^0.156.1",
+    "three": "^0.164.1",
     "vite": "^4.4.9",
     "vite-plugin-glsl": "^1.0.2",
     "vite-plugin-glslify": "^2.0.2",

src/Experience/Shaders/Particles/particles.vert

@@ -1,6 +1,7 @@
 uniform sampler2D uPositions;//RenderTarget containing the transformed positions
 uniform float uSize;
 uniform float uPixelRatio;
+uniform vec2 uResolution;
 uniform float uScroll;
 varying vec3 vPos;
 varying vec2 vUv;
@@ -30,7 +31,7 @@ void main() {
   }
 
   gl_Position = projectionPosition;
-  gl_PointSize = customSize * uPixelRatio;
+  gl_PointSize = customSize * uResolution.y * 0.0013;
   gl_PointSize *= (1.0 / - viewPosition.z);
 
   vPos = pos;

src/Experience/World/Page.js

@@ -213,6 +213,12 @@ export default class Page {
                 uTime: { value: 0 },
                 uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
                 uScroll : { value: this.normalizedScrollY },
+                uResolution: new THREE.Uniform(
+                    new THREE.Vector2(
+                        this.sizes.width * this.sizes.pixelRatio,
+                        this.sizes.height * this.sizes.pixelRatio
+                    )
+                ),
             },
             defines:
             {
@@ -305,6 +311,7 @@ export default class Page {
         this.fbo.resize(this.sizes.width, this.sizes.height);
         this.renderMaterial.uniforms.uPixelRatio.value = Math.min(window.devicePixelRatio, 2)
         this.horsePointsMaterial.uniforms.uPixelRatio.value = Math.min(window.devicePixelRatio, 2)
+        this.renderMaterial.uniforms.uResolution.value.set(this.sizes.width * this.sizes.pixelRatio, this.sizes.height * this.sizes.pixelRatio)
     }
 
     scroll()

src/Experience/World/World.js

@@ -70,7 +70,7 @@ export default class World
     }
 
     resize() {
-
+        this.page.resize()
     }
 
     scroll()