@react-three/drei 9.103.0 → 9.103.1

package/README.md

@@ -926,6 +926,14 @@ type PivotControlsProps = {
   autoTransform?: boolean
   /** Allows you to switch individual axes off */
   activeAxes?: [boolean, boolean, boolean]
+  /** Allows you to disable translation via axes arrows */
+  disableAxes?: boolean
+  /** Allows you to disable translation via axes planes */
+  disableSliders?: boolean
+  /** Allows you to disable rotation */
+  disableRotations?: boolean
+  /** Allows you to disable scaling */
+  disableScaling?: boolean
   /** RGB colors */
   axisColors?: [string | number, string | number, string | number]
   /** Color of the hovered item */
@@ -1082,6 +1090,8 @@ export type GridMaterialType = {
   fadeDistance?: number
   /** Fade strength, default: 1 */
   fadeStrength?: number
+  /** Fade from camera (1) or origin (0), or somewhere in between, default: camera */
+  fadeFrom?: number;
 }
 
 export type GridProps = GridMaterialType & {
@@ -3272,7 +3282,7 @@ function VideoMaterial({ src }) {
 
 NB: It's important to wrap `VideoMaterial` into `React.Suspense` since, `useVideoTexture(src)` here will be suspended until the user shares its screen.
 
-HLS - useVideoTexture supports .m3u8 HLS manifest via (https://github.com/video-dev/hls.js). 
+HLS - useVideoTexture supports .m3u8 HLS manifest via (https://github.com/video-dev/hls.js).
 
 You can fine-tune via the hls configuration:
 
@@ -3281,7 +3291,8 @@ You can fine-tune via the hls configuration:
     hls: { abrEwmaFastLive: 1.0, abrEwmaSlowLive: 3.0, enableWorker: true }
   })
 ```
->Available options: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning  
+
+> Available options: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
 
 #### useTrailTexture
 

package/core/Grid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("@react-three/fiber"),r=require("./shaderMaterial.cjs.js"),t=require("../helpers/constants.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var s=l(e),c=a(n),f=a(o);const d=r.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,cellThickness:.5,sectionThickness:1,cellColor:new f.Color,sectionColor:new f.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new f.Vector3,worldPlanePosition:new f.Vector3},"\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform vec3 worldPlanePosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      localPosition = position.xzy;\n      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n      \n      worldPosition = modelMatrix * vec4(localPosition, 1.0);\n      if (followCamera) {\n        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n        localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n      }\n\n      gl_Position = projectionMatrix * viewMatrix * worldPosition;\n    }\n  ",`\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = localPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1.0 - thickness;\n      return 1.0 - min(line, 1.0);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      float dist = distance(worldCamProjPosition, worldPosition.xyz);\n      float d = 1.0 - min(dist / fadeDistance, 1.0);\n      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <${t.version>=154?"colorspace_fragment":"encodings_fragment"}>\n    }\n  `),u=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:o="#2080ff",cellSize:r=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:a=!1,fadeDistance:u=100,fadeStrength:m=1,cellThickness:g=.5,sectionThickness:P=1,side:w=f.BackSide,...v},C)=>{i.extend({GridMaterial:d});const h=c.useRef(null);c.useImperativeHandle(C,(()=>h.current),[]);const p=new f.Plane,x=new f.Vector3(0,1,0),j=new f.Vector3(0,0,0);i.useFrame((e=>{p.setFromNormalAndCoplanarPoint(x,j).applyMatrix4(h.current.matrixWorld);const n=h.current.material,o=n.uniforms.worldCamProjPosition,i=n.uniforms.worldPlanePosition;p.projectPoint(e.camera.position,o.value),i.value.set(0,0,0).applyMatrix4(h.current.matrixWorld)}));const z={cellSize:r,sectionSize:t,cellColor:n,sectionColor:o,cellThickness:g,sectionThickness:P},y={fadeDistance:u,fadeStrength:m,infiniteGrid:a,followCamera:l};return c.createElement("mesh",s.default({ref:h,frustumCulled:!1},v),c.createElement("gridMaterial",s.default({transparent:!0,"extensions-derivatives":!0,side:w},z,y)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("@react-three/fiber"),r=require("./shaderMaterial.cjs.js"),t=require("../helpers/constants.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var s=l(e),c=a(n),f=a(o);const d=r.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,fadeFrom:1,cellThickness:.5,sectionThickness:1,cellColor:new f.Color,sectionColor:new f.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new f.Vector3,worldPlanePosition:new f.Vector3},"\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform vec3 worldPlanePosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      localPosition = position.xzy;\n      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n      \n      worldPosition = modelMatrix * vec4(localPosition, 1.0);\n      if (followCamera) {\n        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n        localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n      }\n\n      gl_Position = projectionMatrix * viewMatrix * worldPosition;\n    }\n  ",`\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float fadeFrom;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = localPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1.0 - thickness;\n      return 1.0 - min(line, 1.0);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      vec3 from = worldCamProjPosition*vec3(fadeFrom);\n      float dist = distance(from, worldPosition.xyz);\n      float d = 1.0 - min(dist / fadeDistance, 1.0);\n      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <${t.version>=154?"colorspace_fragment":"encodings_fragment"}>\n    }\n  `),m=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:o="#2080ff",cellSize:r=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:a=!1,fadeDistance:m=100,fadeStrength:u=1,fadeFrom:g=1,cellThickness:P=.5,sectionThickness:v=1,side:w=f.BackSide,...C},h)=>{i.extend({GridMaterial:d});const p=c.useRef(null);c.useImperativeHandle(h,(()=>p.current),[]);const x=new f.Plane,j=new f.Vector3(0,1,0),z=new f.Vector3(0,0,0);i.useFrame((e=>{x.setFromNormalAndCoplanarPoint(j,z).applyMatrix4(p.current.matrixWorld);const n=p.current.material,o=n.uniforms.worldCamProjPosition,i=n.uniforms.worldPlanePosition;x.projectPoint(e.camera.position,o.value),i.value.set(0,0,0).applyMatrix4(p.current.matrixWorld)}));const y={cellSize:r,sectionSize:t,cellColor:n,sectionColor:o,cellThickness:P,sectionThickness:v},S={fadeDistance:m,fadeStrength:u,fadeFrom:g,infiniteGrid:a,followCamera:l};return c.createElement("mesh",s.default({ref:p,frustumCulled:!1},C),c.createElement("gridMaterial",s.default({transparent:!0,"extensions-derivatives":!0,side:w},y,S)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=m;

package/core/Grid.d.ts

@@ -11,6 +11,7 @@ export type GridMaterialType = {
     infiniteGrid?: boolean;
     fadeDistance?: number;
     fadeStrength?: number;
+    fadeFrom?: number;
     side?: THREE.Side;
 };
 export type GridProps = GridMaterialType & {

package/core/Grid.js

@@ -10,6 +10,7 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
   sectionSize: 1,
   fadeDistance: 100,
   fadeStrength: 1,
+  fadeFrom: 1,
   cellThickness: 0.5,
   sectionThickness: 1,
   cellColor: /* @__PURE__ */new THREE.Color(),
@@ -51,6 +52,7 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
     uniform vec3 sectionColor;
     uniform float fadeDistance;
     uniform float fadeStrength;
+    uniform float fadeFrom;
     uniform float cellThickness;
     uniform float sectionThickness;
 
@@ -65,7 +67,8 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
       float g1 = getGrid(cellSize, cellThickness);
       float g2 = getGrid(sectionSize, sectionThickness);
 
-      float dist = distance(worldCamProjPosition, worldPosition.xyz);
+      vec3 from = worldCamProjPosition*vec3(fadeFrom);
+      float dist = distance(from, worldPosition.xyz);
       float d = 1.0 - min(dist / fadeDistance, 1.0);
       vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));
 
@@ -87,6 +90,7 @@ const Grid = /* @__PURE__ */React.forwardRef(({
   infiniteGrid = false,
   fadeDistance = 100,
   fadeStrength = 1,
+  fadeFrom = 1,
   cellThickness = 0.5,
   sectionThickness = 1,
   side = THREE.BackSide,
@@ -119,6 +123,7 @@ const Grid = /* @__PURE__ */React.forwardRef(({
   const uniforms2 = {
     fadeDistance,
     fadeStrength,
+    fadeFrom,
     infiniteGrid,
     followCamera
   };

package/core/useTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o,s){const a=r.useThree((e=>e.gl)),c=r.useLoader(e.TextureLoader,u(o)?Object.values(o):o);t.useLayoutEffect((()=>{null==s||s(c)}),[s]),t.useEffect((()=>{if("initTexture"in a){(Array.isArray(c)?c:[c]).forEach(a.initTexture)}}),[a,c]);return t.useMemo((()=>{if(u(o)){const e={};let r=0;for(const t in o)e[t]=c[r++];return e}return c}),[o,c])}o.preload=t=>r.useLoader.preload(e.TextureLoader,t),o.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=u,exports.useTexture=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o,s){const a=r.useThree((e=>e.gl)),c=r.useLoader(e.TextureLoader,u(o)?Object.values(o):o);t.useLayoutEffect((()=>{null==s||s(c)}),[s]),t.useEffect((()=>{if("initTexture"in a){let r=[];Array.isArray(c)?r=c:c instanceof e.Texture?r=[c]:u(c)&&(r=Object.values(c)),r.forEach((r=>{r instanceof e.Texture&&a.initTexture(r)}))}}),[a,c]);return t.useMemo((()=>{if(u(o)){const e={};let r=0;for(const t in o)e[t]=c[r++];return e}return c}),[o,c])}o.preload=t=>r.useLoader.preload(e.TextureLoader,t),o.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=u,exports.useTexture=o;

package/core/useTexture.d.ts

@@ -1,10 +1,14 @@
 import { Texture } from 'three';
-export declare const IsObject: (url: any) => url is Record<string, string>;
-export type MappedTextureType<T extends string[] | string | Record<string, string>> = T extends any[] ? Texture[] : T extends Record<string, string> ? {
+export declare const IsObject: (url: unknown) => url is Record<string, string>;
+type TextureArray<T> = T extends string[] ? Texture[] : never;
+type TextureRecord<T> = T extends Record<string, string> ? {
     [key in keyof T]: Texture;
-} : Texture;
+} : never;
+type SingleTexture<T> = T extends string ? Texture : never;
+export type MappedTextureType<T extends string[] | string | Record<string, string>> = TextureArray<T> | TextureRecord<T> | SingleTexture<T>;
 export declare function useTexture<Url extends string[] | string | Record<string, string>>(input: Url, onLoad?: (texture: MappedTextureType<Url>) => void): MappedTextureType<Url>;
 export declare namespace useTexture {
-    var preload: (url: string) => undefined;
+    var preload: (url: string | string[]) => undefined;
     var clear: (input: string | string[]) => void;
 }
+export {};

package/core/useTexture.js

@@ -1,4 +1,4 @@
-import { TextureLoader } from 'three';
+import { TextureLoader, Texture } from 'three';
 import { useThree, useLoader } from '@react-three/fiber';
 import { useLayoutEffect, useEffect, useMemo } from 'react';
 
@@ -15,8 +15,19 @@ function useTexture(input, onLoad) {
   // NOTE: only available for WebGLRenderer
   useEffect(() => {
     if ('initTexture' in gl) {
-      const array = Array.isArray(textures) ? textures : [textures];
-      array.forEach(gl.initTexture);
+      let textureArray = [];
+      if (Array.isArray(textures)) {
+        textureArray = textures;
+      } else if (textures instanceof Texture) {
+        textureArray = [textures];
+      } else if (IsObject(textures)) {
+        textureArray = Object.values(textures);
+      }
+      textureArray.forEach(texture => {
+        if (texture instanceof Texture) {
+          gl.initTexture(texture);
+        }
+      });
     }
   }, [gl, textures]);
   const mappedTextures = useMemo(() => {

package/core/useTrailTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@react-three/fiber"),i=require("three");const s=t=>Math.sqrt(1-Math.pow(t-1,2));class a{constructor({size:t=256,maxAge:e=750,radius:i=.3,intensity:a=.2,interpolate:h=0,smoothing:r=0,minForce:c=.3,blend:n="screen",ease:o=s}={}){this.size=t,this.maxAge=e,this.radius=i,this.intensity=a,this.ease=o,this.interpolate=h,this.smoothing=r,this.minForce=c,this.blend=n,this.trail=[],this.force=0,this.initTexture()}initTexture(){this.canvas=document.createElement("canvas"),this.canvas.width=this.canvas.height=this.size,this.ctx=this.canvas.getContext("2d"),this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.texture=new i.Texture(this.canvas),this.canvas.id="touchTexture",this.canvas.style.width=this.canvas.style.height=`${this.canvas.width}px`}update(t){this.clear(),this.trail.forEach(((e,i)=>{e.age+=1e3*t,e.age>this.maxAge&&this.trail.splice(i,1)})),this.trail.length||(this.force=0),this.trail.forEach((t=>{this.drawTouch(t)})),this.texture.needsUpdate=!0}clear(){this.ctx.globalCompositeOperation="source-over",this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height)}addTouch(t){const e=this.trail[this.trail.length-1];if(e){const i=e.x-t.x,s=e.y-t.y,a=i*i+s*s,h=Math.max(this.minForce,Math.min(1e4*a,1));if(this.force=function(t,e,i=.9){return e*i+t*(1-i)}(h,this.force,this.smoothing),this.interpolate){const t=Math.ceil(a/Math.pow(.5*this.radius/this.interpolate,2));if(t>1)for(let a=1;a<t;a++)this.trail.push({x:e.x-i/t*a,y:e.y-s/t*a,age:0,force:h})}}this.trail.push({x:t.x,y:t.y,age:0,force:this.force})}drawTouch(t){const e={x:t.x*this.size,y:(1-t.y)*this.size};let i=1;i=t.age<.3*this.maxAge?this.ease(t.age/(.3*this.maxAge)):this.ease(1-(t.age-.3*this.maxAge)/(.7*this.maxAge)),i*=t.force,this.ctx.globalCompositeOperation=this.blend;const s=this.size*this.radius*i,a=this.ctx.createRadialGradient(e.x,e.y,Math.max(0,.25*s),e.x,e.y,Math.max(0,s));a.addColorStop(0,`rgba(255, 255, 255, ${this.intensity})`),a.addColorStop(1,"rgba(0, 0, 0, 0.0)"),this.ctx.beginPath(),this.ctx.fillStyle=a,this.ctx.arc(e.x,e.y,Math.max(0,s),0,2*Math.PI),this.ctx.fill()}}exports.useTrailTexture=function(i={}){const{size:s,maxAge:h,radius:r,intensity:c,interpolate:n,smoothing:o,minForce:l,blend:x,ease:u}=i,d=t.useMemo((()=>new a(i)),[s,h,r,c,n,o,l,x,u]);e.useFrame(((t,e)=>{d.update(e)}));const g=t.useCallback((t=>d.addTouch(t.uv)),[d]);return[d.texture,g]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@react-three/fiber"),i=require("three");const s=t=>Math.sqrt(1-Math.pow(t-1,2));class a{constructor({size:t=256,maxAge:e=750,radius:i=.3,intensity:a=.2,interpolate:h=0,smoothing:r=0,minForce:c=.3,blend:n="screen",ease:o=s}={}){this.size=t,this.maxAge=e,this.radius=i,this.intensity=a,this.ease=o,this.interpolate=h,this.smoothing=r,this.minForce=c,this.blend=n,this.trail=[],this.force=0,this.initTexture()}initTexture(){this.canvas=document.createElement("canvas"),this.canvas.width=this.canvas.height=this.size;const t=this.canvas.getContext("2d");if(null===t)throw new Error("2D not available");this.ctx=t,this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.texture=new i.Texture(this.canvas),this.canvas.id="touchTexture",this.canvas.style.width=this.canvas.style.height=`${this.canvas.width}px`}update(t){this.clear(),this.trail.forEach(((e,i)=>{e.age+=1e3*t,e.age>this.maxAge&&this.trail.splice(i,1)})),this.trail.length||(this.force=0),this.trail.forEach((t=>{this.drawTouch(t)})),this.texture.needsUpdate=!0}clear(){this.ctx.globalCompositeOperation="source-over",this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height)}addTouch(t){const e=this.trail[this.trail.length-1];if(e){const i=e.x-t.x,s=e.y-t.y,a=i*i+s*s,h=Math.max(this.minForce,Math.min(1e4*a,1));if(this.force=function(t,e,i=.9){return e*i+t*(1-i)}(h,this.force,this.smoothing),this.interpolate){const t=Math.ceil(a/Math.pow(.5*this.radius/this.interpolate,2));if(t>1)for(let a=1;a<t;a++)this.trail.push({x:e.x-i/t*a,y:e.y-s/t*a,age:0,force:h})}}this.trail.push({x:t.x,y:t.y,age:0,force:this.force})}drawTouch(t){const e={x:t.x*this.size,y:(1-t.y)*this.size};let i=1;i=t.age<.3*this.maxAge?this.ease(t.age/(.3*this.maxAge)):this.ease(1-(t.age-.3*this.maxAge)/(.7*this.maxAge)),i*=t.force,this.ctx.globalCompositeOperation=this.blend;const s=this.size*this.radius*i,a=this.ctx.createRadialGradient(e.x,e.y,Math.max(0,.25*s),e.x,e.y,Math.max(0,s));a.addColorStop(0,`rgba(255, 255, 255, ${this.intensity})`),a.addColorStop(1,"rgba(0, 0, 0, 0.0)"),this.ctx.beginPath(),this.ctx.fillStyle=a,this.ctx.arc(e.x,e.y,Math.max(0,s),0,2*Math.PI),this.ctx.fill()}}exports.useTrailTexture=function(i={}){const{size:s,maxAge:h,radius:r,intensity:c,interpolate:n,smoothing:o,minForce:l,blend:x,ease:u}=i,d=t.useMemo((()=>new a(i)),[s,h,r,c,n,o,l,x,u]);e.useFrame(((t,e)=>{d.update(e)}));const g=t.useCallback((t=>d.addTouch(t.uv)),[d]);return[d.texture,g]};

package/core/useTrailTexture.js

@@ -2,15 +2,6 @@ import { useMemo, useCallback } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { Texture } from 'three';
 
-/**
- *  Adapted from https://github.com/brunoimbrizi/interactive-particles/blob/master/src/scripts/webgl/particles/TrailTexture.js
- *  Changes:
- *    * accepts config as constructor params
- *    * frame-rate independent aging
- *    * added option to interpolate between slow mouse events
- *    * added option for smoothing between values to avoid large jumps in force
- */
-
 // smooth new sample (measurement) based on previous sample (current)
 function smoothAverage(current, measurement, smoothing = 0.9) {
   return measurement * smoothing + current * (1.0 - smoothing);
@@ -47,7 +38,11 @@ class TrailTexture {
   initTexture() {
     this.canvas = document.createElement('canvas');
     this.canvas.width = this.canvas.height = this.size;
-    this.ctx = this.canvas.getContext('2d');
+    const ctx = this.canvas.getContext('2d');
+    if (ctx === null) {
+      throw new Error('2D not available');
+    }
+    this.ctx = ctx;
     this.ctx.fillStyle = 'black';
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
     this.texture = new Texture(this.canvas);