@react-three/drei 9.102.6 → 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,6 +3282,18 @@ 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).
+
+You can fine-tune via the hls configuration:
+
+```
+ const texture = useVideoTexture('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', {
+    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
+
 #### useTrailTexture
 
 <p>

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/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./ScreenSizer.cjs.js"),t=require("./QuadraticBezierLine.cjs.js"),o=require("./CubicBezierLine.cjs.js"),i=require("./CatmullRomLine.cjs.js"),a=require("./Line.cjs.js"),u=require("./PositionalAudio.cjs.js"),c=require("./Text.cjs.js"),n=require("./Text3D.cjs.js"),j=require("./Effects.cjs.js"),p=require("./GradientTexture.cjs.js"),l=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),q=require("./Outlines.cjs.js"),d=require("./Trail.cjs.js"),m=require("./Sampler.cjs.js"),h=require("./ComputedAttribute.cjs.js"),C=require("./Clone.cjs.js"),S=require("./MarchingCubes.cjs.js"),M=require("./Decal.cjs.js"),T=require("./Svg.cjs.js"),P=require("./Gltf.cjs.js"),b=require("./AsciiRenderer.cjs.js"),f=require("./Splat.cjs.js"),B=require("./OrthographicCamera.cjs.js"),g=require("./PerspectiveCamera.cjs.js"),v=require("./CubeCamera.cjs.js"),A=require("./DeviceOrientationControls.cjs.js"),L=require("./FlyControls.cjs.js"),R=require("./MapControls.cjs.js"),G=require("./OrbitControls.cjs.js"),F=require("./TrackballControls.cjs.js"),D=require("./ArcballControls.cjs.js"),E=require("./TransformControls.cjs.js"),k=require("./PointerLockControls.cjs.js"),w=require("./FirstPersonControls.cjs.js"),z=require("./CameraControls.cjs.js"),O=require("./MotionPathControls.cjs.js"),I=require("./GizmoHelper.cjs.js"),y=require("./GizmoViewcube.cjs.js"),H=require("./GizmoViewport.cjs.js"),V=require("./Grid.cjs.js"),W=require("./useCubeTexture.cjs.js"),Q=require("./useFBX.cjs.js"),X=require("./useGLTF.cjs.js"),K=require("./useKTX2.cjs.js"),N=require("./useProgress.cjs.js"),U=require("./useTexture.cjs.js"),_=require("./useVideoTexture.cjs.js"),J=require("./useFont.cjs.js"),Y=require("./useSpriteLoader.cjs.js"),Z=require("./Helper.cjs.js"),$=require("./Stats.cjs.js"),ee=require("./StatsGl.cjs.js"),re=require("./useDepthBuffer.cjs.js"),se=require("./useAspect.cjs.js"),te=require("./useCamera.cjs.js"),oe=require("./useDetectGPU.cjs.js"),ie=require("./useHelper.cjs.js"),ae=require("./useBVH.cjs.js"),ue=require("./useContextBridge.cjs.js"),ce=require("./useAnimations.cjs.js"),ne=require("./useFBO.cjs.js"),je=require("./useIntersect.cjs.js"),pe=require("./useBoxProjectedEnv.cjs.js"),le=require("./BBAnchor.cjs.js"),xe=require("./useTrailTexture.cjs.js"),qe=require("./useCubeCamera.cjs.js"),de=require("./Example.cjs.js"),me=require("./SpriteAnimator.cjs.js"),he=require("./CurveModifier.cjs.js"),Ce=require("./MeshDistortMaterial.cjs.js"),Se=require("./MeshWobbleMaterial.cjs.js"),Me=require("./MeshReflectorMaterial.cjs.js"),Te=require("./MeshRefractionMaterial.cjs.js"),Pe=require("./MeshTransmissionMaterial.cjs.js"),be=require("./MeshDiscardMaterial.cjs.js"),fe=require("./PointMaterial.cjs.js"),Be=require("./shaderMaterial.cjs.js"),ge=require("./softShadows.cjs.js"),ve=require("./shapes.cjs.js"),Ae=require("./RoundedBox.cjs.js"),Le=require("./ScreenQuad.cjs.js"),Re=require("./Center.cjs.js"),Ge=require("./Resize.cjs.js"),Fe=require("./Bounds.cjs.js"),De=require("./CameraShake.cjs.js"),Ee=require("./Float.cjs.js"),ke=require("./Stage.cjs.js"),we=require("./Backdrop.cjs.js"),ze=require("./Shadow.cjs.js"),Oe=require("./Caustics.cjs.js"),Ie=require("./ContactShadows.cjs.js"),ye=require("./AccumulativeShadows.cjs.js"),He=require("./Reflector.cjs.js"),Ve=require("./SpotLight.cjs.js"),We=require("./Environment.cjs.js"),Qe=require("./Lightformer.cjs.js"),Xe=require("./Sky.cjs.js"),Ke=require("./Stars.cjs.js"),Ne=require("./Cloud.cjs.js"),Ue=require("./Sparkles.cjs.js"),_e=require("./useEnvironment.cjs.js"),Je=require("./useMatcapTexture.cjs.js"),Ye=require("./useNormalTexture.cjs.js"),Ze=require("./Wireframe.cjs.js"),$e=require("./ShadowAlpha.cjs.js"),er=require("./Points.cjs.js"),rr=require("./Instances.cjs.js"),sr=require("./Segments.cjs.js"),tr=require("./Detailed.cjs.js"),or=require("./Preload.cjs.js"),ir=require("./BakeShadows.cjs.js"),ar=require("./meshBounds.cjs.js"),ur=require("./AdaptiveDpr.cjs.js"),cr=require("./AdaptiveEvents.cjs.js"),nr=require("./PerformanceMonitor.cjs.js"),jr=require("./RenderTexture.cjs.js"),pr=require("./RenderCubeTexture.cjs.js"),lr=require("./Mask.cjs.js"),xr=require("./Hud.cjs.js"),qr=require("./Fisheye.cjs.js"),dr=require("./MeshPortalMaterial.cjs.js"),mr=require("./calculateScaleFactor.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("three"),require("@react-three/fiber"),require("three-stdlib"),require("suspend-react"),require("../helpers/constants.cjs.js"),require("meshline"),require("camera-controls"),require("maath"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("react-composer"),require("../helpers/deprecated.cjs.js"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("uuid"),require("../materials/WireframeMaterial.cjs.js"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.ScreenSizer=s.ScreenSizer,exports.QuadraticBezierLine=t.QuadraticBezierLine,exports.CubicBezierLine=o.CubicBezierLine,exports.CatmullRomLine=i.CatmullRomLine,exports.Line=a.Line,exports.PositionalAudio=u.PositionalAudio,exports.Text=c.Text,exports.Text3D=n.Text3D,exports.Effects=j.Effects,exports.isWebGL2Available=j.isWebGL2Available,exports.GradientTexture=p.GradientTexture,exports.GradientType=p.GradientType,exports.Image=l.Image,exports.Edges=x.Edges,exports.Outlines=q.Outlines,exports.Trail=d.Trail,exports.useTrail=d.useTrail,exports.Sampler=m.Sampler,exports.useSurfaceSampler=m.useSurfaceSampler,exports.ComputedAttribute=h.ComputedAttribute,exports.Clone=C.Clone,exports.MarchingCube=S.MarchingCube,exports.MarchingCubes=S.MarchingCubes,exports.MarchingPlane=S.MarchingPlane,exports.Decal=M.Decal,exports.Svg=T.Svg,exports.Gltf=P.Gltf,exports.AsciiRenderer=b.AsciiRenderer,exports.Splat=f.Splat,exports.OrthographicCamera=B.OrthographicCamera,exports.PerspectiveCamera=g.PerspectiveCamera,exports.CubeCamera=v.CubeCamera,exports.DeviceOrientationControls=A.DeviceOrientationControls,exports.FlyControls=L.FlyControls,exports.MapControls=R.MapControls,exports.OrbitControls=G.OrbitControls,exports.TrackballControls=F.TrackballControls,exports.ArcballControls=D.ArcballControls,exports.TransformControls=E.TransformControls,exports.PointerLockControls=k.PointerLockControls,exports.FirstPersonControls=w.FirstPersonControls,exports.CameraControls=z.CameraControls,exports.MotionPathControls=O.MotionPathControls,exports.useMotion=O.useMotion,exports.GizmoHelper=I.GizmoHelper,exports.useGizmoContext=I.useGizmoContext,exports.GizmoViewcube=y.GizmoViewcube,exports.GizmoViewport=H.GizmoViewport,exports.Grid=V.Grid,exports.useCubeTexture=W.useCubeTexture,exports.useFBX=Q.useFBX,exports.useGLTF=X.useGLTF,exports.useKTX2=K.useKTX2,exports.useProgress=N.useProgress,exports.IsObject=U.IsObject,exports.useTexture=U.useTexture,exports.useVideoTexture=_.useVideoTexture,exports.useFont=J.useFont,exports.calculateAspectRatio=Y.calculateAspectRatio,exports.getFirstItem=Y.getFirstItem,exports.useSpriteLoader=Y.useSpriteLoader,exports.Helper=Z.Helper,exports.Stats=$.Stats,exports.StatsGl=ee.StatsGl,exports.useDepthBuffer=re.useDepthBuffer,exports.useAspect=se.useAspect,exports.useCamera=te.useCamera,exports.useDetectGPU=oe.useDetectGPU,exports.useHelper=ie.useHelper,exports.Bvh=ae.Bvh,exports.useBVH=ae.useBVH,exports.useContextBridge=ue.useContextBridge,exports.useAnimations=ce.useAnimations,exports.useFBO=ne.useFBO,exports.useIntersect=je.useIntersect,exports.useBoxProjectedEnv=pe.useBoxProjectedEnv,exports.BBAnchor=le.BBAnchor,exports.useTrailTexture=xe.useTrailTexture,exports.useCubeCamera=qe.useCubeCamera,exports.Example=de.Example,exports.SpriteAnimator=me.SpriteAnimator,exports.useSpriteAnimator=me.useSpriteAnimator,exports.CurveModifier=he.CurveModifier,exports.MeshDistortMaterial=Ce.MeshDistortMaterial,exports.MeshWobbleMaterial=Se.MeshWobbleMaterial,exports.MeshReflectorMaterial=Me.MeshReflectorMaterial,exports.MeshRefractionMaterial=Te.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Pe.MeshTransmissionMaterial,exports.MeshDiscardMaterial=be.MeshDiscardMaterial,exports.PointMaterial=fe.PointMaterial,exports.PointMaterialImpl=fe.PointMaterialImpl,exports.shaderMaterial=Be.shaderMaterial,exports.SoftShadows=ge.SoftShadows,exports.Box=ve.Box,exports.Capsule=ve.Capsule,exports.Circle=ve.Circle,exports.Cone=ve.Cone,exports.Cylinder=ve.Cylinder,exports.Dodecahedron=ve.Dodecahedron,exports.Extrude=ve.Extrude,exports.Icosahedron=ve.Icosahedron,exports.Lathe=ve.Lathe,exports.Octahedron=ve.Octahedron,exports.Plane=ve.Plane,exports.Polyhedron=ve.Polyhedron,exports.Ring=ve.Ring,exports.Shape=ve.Shape,exports.Sphere=ve.Sphere,exports.Tetrahedron=ve.Tetrahedron,exports.Torus=ve.Torus,exports.TorusKnot=ve.TorusKnot,exports.Tube=ve.Tube,exports.RoundedBox=Ae.RoundedBox,exports.ScreenQuad=Le.ScreenQuad,exports.Center=Re.Center,exports.Resize=Ge.Resize,exports.Bounds=Fe.Bounds,exports.useBounds=Fe.useBounds,exports.CameraShake=De.CameraShake,exports.Float=Ee.Float,exports.Stage=ke.Stage,exports.Backdrop=we.Backdrop,exports.Shadow=ze.Shadow,exports.Caustics=Oe.Caustics,exports.ContactShadows=Ie.ContactShadows,exports.AccumulativeShadows=ye.AccumulativeShadows,exports.RandomizedLight=ye.RandomizedLight,exports.accumulativeContext=ye.accumulativeContext,exports.Reflector=He.Reflector,exports.SpotLight=Ve.SpotLight,exports.SpotLightShadow=Ve.SpotLightShadow,exports.Environment=We.Environment,exports.EnvironmentCube=We.EnvironmentCube,exports.EnvironmentMap=We.EnvironmentMap,exports.EnvironmentPortal=We.EnvironmentPortal,exports.Lightformer=Qe.Lightformer,exports.Sky=Xe.Sky,exports.calcPosFromAngles=Xe.calcPosFromAngles,exports.Stars=Ke.Stars,exports.Cloud=Ne.Cloud,exports.CloudInstance=Ne.CloudInstance,exports.Clouds=Ne.Clouds,exports.Sparkles=Ue.Sparkles,exports.useEnvironment=_e.useEnvironment,exports.useMatcapTexture=Je.useMatcapTexture,exports.useNormalTexture=Ye.useNormalTexture,exports.Wireframe=Ze.Wireframe,exports.ShadowAlpha=$e.ShadowAlpha,exports.Point=er.Point,exports.Points=er.Points,exports.PointsBuffer=er.PointsBuffer,exports.PositionPoint=er.PositionPoint,exports.Instance=rr.Instance,exports.Instances=rr.Instances,exports.Merged=rr.Merged,exports.Segment=sr.Segment,exports.SegmentObject=sr.SegmentObject,exports.Segments=sr.Segments,exports.Detailed=tr.Detailed,exports.Preload=or.Preload,exports.BakeShadows=ir.BakeShadows,exports.meshBounds=ar.meshBounds,exports.AdaptiveDpr=ur.AdaptiveDpr,exports.AdaptiveEvents=cr.AdaptiveEvents,exports.PerformanceMonitor=nr.PerformanceMonitor,exports.usePerformanceMonitor=nr.usePerformanceMonitor,exports.RenderTexture=jr.RenderTexture,exports.RenderCubeTexture=pr.RenderCubeTexture,exports.Mask=lr.Mask,exports.useMask=lr.useMask,exports.Hud=xr.Hud,exports.Fisheye=qr.Fisheye,exports.MeshPortalMaterial=dr.MeshPortalMaterial,exports.calculateScaleFactor=mr.calculateScaleFactor;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./ScreenSizer.cjs.js"),t=require("./QuadraticBezierLine.cjs.js"),o=require("./CubicBezierLine.cjs.js"),i=require("./CatmullRomLine.cjs.js"),a=require("./Line.cjs.js"),u=require("./PositionalAudio.cjs.js"),c=require("./Text.cjs.js"),n=require("./Text3D.cjs.js"),j=require("./Effects.cjs.js"),p=require("./GradientTexture.cjs.js"),l=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),q=require("./Outlines.cjs.js"),d=require("./Trail.cjs.js"),m=require("./Sampler.cjs.js"),h=require("./ComputedAttribute.cjs.js"),C=require("./Clone.cjs.js"),S=require("./MarchingCubes.cjs.js"),M=require("./Decal.cjs.js"),T=require("./Svg.cjs.js"),P=require("./Gltf.cjs.js"),b=require("./AsciiRenderer.cjs.js"),f=require("./Splat.cjs.js"),B=require("./OrthographicCamera.cjs.js"),g=require("./PerspectiveCamera.cjs.js"),v=require("./CubeCamera.cjs.js"),A=require("./DeviceOrientationControls.cjs.js"),L=require("./FlyControls.cjs.js"),R=require("./MapControls.cjs.js"),G=require("./OrbitControls.cjs.js"),F=require("./TrackballControls.cjs.js"),D=require("./ArcballControls.cjs.js"),E=require("./TransformControls.cjs.js"),k=require("./PointerLockControls.cjs.js"),w=require("./FirstPersonControls.cjs.js"),z=require("./CameraControls.cjs.js"),O=require("./MotionPathControls.cjs.js"),I=require("./GizmoHelper.cjs.js"),y=require("./GizmoViewcube.cjs.js"),H=require("./GizmoViewport.cjs.js"),V=require("./Grid.cjs.js"),W=require("./useCubeTexture.cjs.js"),Q=require("./useFBX.cjs.js"),X=require("./useGLTF.cjs.js"),K=require("./useKTX2.cjs.js"),N=require("./useProgress.cjs.js"),U=require("./useTexture.cjs.js"),_=require("./useVideoTexture.cjs.js"),J=require("./useFont.cjs.js"),Y=require("./useSpriteLoader.cjs.js"),Z=require("./Helper.cjs.js"),$=require("./Stats.cjs.js"),ee=require("./StatsGl.cjs.js"),re=require("./useDepthBuffer.cjs.js"),se=require("./useAspect.cjs.js"),te=require("./useCamera.cjs.js"),oe=require("./useDetectGPU.cjs.js"),ie=require("./useHelper.cjs.js"),ae=require("./useBVH.cjs.js"),ue=require("./useContextBridge.cjs.js"),ce=require("./useAnimations.cjs.js"),ne=require("./useFBO.cjs.js"),je=require("./useIntersect.cjs.js"),pe=require("./useBoxProjectedEnv.cjs.js"),le=require("./BBAnchor.cjs.js"),xe=require("./useTrailTexture.cjs.js"),qe=require("./useCubeCamera.cjs.js"),de=require("./Example.cjs.js"),me=require("./SpriteAnimator.cjs.js"),he=require("./CurveModifier.cjs.js"),Ce=require("./MeshDistortMaterial.cjs.js"),Se=require("./MeshWobbleMaterial.cjs.js"),Me=require("./MeshReflectorMaterial.cjs.js"),Te=require("./MeshRefractionMaterial.cjs.js"),Pe=require("./MeshTransmissionMaterial.cjs.js"),be=require("./MeshDiscardMaterial.cjs.js"),fe=require("./PointMaterial.cjs.js"),Be=require("./shaderMaterial.cjs.js"),ge=require("./softShadows.cjs.js"),ve=require("./shapes.cjs.js"),Ae=require("./RoundedBox.cjs.js"),Le=require("./ScreenQuad.cjs.js"),Re=require("./Center.cjs.js"),Ge=require("./Resize.cjs.js"),Fe=require("./Bounds.cjs.js"),De=require("./CameraShake.cjs.js"),Ee=require("./Float.cjs.js"),ke=require("./Stage.cjs.js"),we=require("./Backdrop.cjs.js"),ze=require("./Shadow.cjs.js"),Oe=require("./Caustics.cjs.js"),Ie=require("./ContactShadows.cjs.js"),ye=require("./AccumulativeShadows.cjs.js"),He=require("./Reflector.cjs.js"),Ve=require("./SpotLight.cjs.js"),We=require("./Environment.cjs.js"),Qe=require("./Lightformer.cjs.js"),Xe=require("./Sky.cjs.js"),Ke=require("./Stars.cjs.js"),Ne=require("./Cloud.cjs.js"),Ue=require("./Sparkles.cjs.js"),_e=require("./useEnvironment.cjs.js"),Je=require("./useMatcapTexture.cjs.js"),Ye=require("./useNormalTexture.cjs.js"),Ze=require("./Wireframe.cjs.js"),$e=require("./ShadowAlpha.cjs.js"),er=require("./Points.cjs.js"),rr=require("./Instances.cjs.js"),sr=require("./Segments.cjs.js"),tr=require("./Detailed.cjs.js"),or=require("./Preload.cjs.js"),ir=require("./BakeShadows.cjs.js"),ar=require("./meshBounds.cjs.js"),ur=require("./AdaptiveDpr.cjs.js"),cr=require("./AdaptiveEvents.cjs.js"),nr=require("./PerformanceMonitor.cjs.js"),jr=require("./RenderTexture.cjs.js"),pr=require("./RenderCubeTexture.cjs.js"),lr=require("./Mask.cjs.js"),xr=require("./Hud.cjs.js"),qr=require("./Fisheye.cjs.js"),dr=require("./MeshPortalMaterial.cjs.js"),mr=require("./calculateScaleFactor.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("three"),require("@react-three/fiber"),require("three-stdlib"),require("suspend-react"),require("../helpers/constants.cjs.js"),require("meshline"),require("camera-controls"),require("maath"),require("zustand"),require("hls.js"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("react-composer"),require("../helpers/deprecated.cjs.js"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("uuid"),require("../materials/WireframeMaterial.cjs.js"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.ScreenSizer=s.ScreenSizer,exports.QuadraticBezierLine=t.QuadraticBezierLine,exports.CubicBezierLine=o.CubicBezierLine,exports.CatmullRomLine=i.CatmullRomLine,exports.Line=a.Line,exports.PositionalAudio=u.PositionalAudio,exports.Text=c.Text,exports.Text3D=n.Text3D,exports.Effects=j.Effects,exports.isWebGL2Available=j.isWebGL2Available,exports.GradientTexture=p.GradientTexture,exports.GradientType=p.GradientType,exports.Image=l.Image,exports.Edges=x.Edges,exports.Outlines=q.Outlines,exports.Trail=d.Trail,exports.useTrail=d.useTrail,exports.Sampler=m.Sampler,exports.useSurfaceSampler=m.useSurfaceSampler,exports.ComputedAttribute=h.ComputedAttribute,exports.Clone=C.Clone,exports.MarchingCube=S.MarchingCube,exports.MarchingCubes=S.MarchingCubes,exports.MarchingPlane=S.MarchingPlane,exports.Decal=M.Decal,exports.Svg=T.Svg,exports.Gltf=P.Gltf,exports.AsciiRenderer=b.AsciiRenderer,exports.Splat=f.Splat,exports.OrthographicCamera=B.OrthographicCamera,exports.PerspectiveCamera=g.PerspectiveCamera,exports.CubeCamera=v.CubeCamera,exports.DeviceOrientationControls=A.DeviceOrientationControls,exports.FlyControls=L.FlyControls,exports.MapControls=R.MapControls,exports.OrbitControls=G.OrbitControls,exports.TrackballControls=F.TrackballControls,exports.ArcballControls=D.ArcballControls,exports.TransformControls=E.TransformControls,exports.PointerLockControls=k.PointerLockControls,exports.FirstPersonControls=w.FirstPersonControls,exports.CameraControls=z.CameraControls,exports.MotionPathControls=O.MotionPathControls,exports.useMotion=O.useMotion,exports.GizmoHelper=I.GizmoHelper,exports.useGizmoContext=I.useGizmoContext,exports.GizmoViewcube=y.GizmoViewcube,exports.GizmoViewport=H.GizmoViewport,exports.Grid=V.Grid,exports.useCubeTexture=W.useCubeTexture,exports.useFBX=Q.useFBX,exports.useGLTF=X.useGLTF,exports.useKTX2=K.useKTX2,exports.useProgress=N.useProgress,exports.IsObject=U.IsObject,exports.useTexture=U.useTexture,exports.useVideoTexture=_.useVideoTexture,exports.useFont=J.useFont,exports.calculateAspectRatio=Y.calculateAspectRatio,exports.getFirstItem=Y.getFirstItem,exports.useSpriteLoader=Y.useSpriteLoader,exports.Helper=Z.Helper,exports.Stats=$.Stats,exports.StatsGl=ee.StatsGl,exports.useDepthBuffer=re.useDepthBuffer,exports.useAspect=se.useAspect,exports.useCamera=te.useCamera,exports.useDetectGPU=oe.useDetectGPU,exports.useHelper=ie.useHelper,exports.Bvh=ae.Bvh,exports.useBVH=ae.useBVH,exports.useContextBridge=ue.useContextBridge,exports.useAnimations=ce.useAnimations,exports.useFBO=ne.useFBO,exports.useIntersect=je.useIntersect,exports.useBoxProjectedEnv=pe.useBoxProjectedEnv,exports.BBAnchor=le.BBAnchor,exports.useTrailTexture=xe.useTrailTexture,exports.useCubeCamera=qe.useCubeCamera,exports.Example=de.Example,exports.SpriteAnimator=me.SpriteAnimator,exports.useSpriteAnimator=me.useSpriteAnimator,exports.CurveModifier=he.CurveModifier,exports.MeshDistortMaterial=Ce.MeshDistortMaterial,exports.MeshWobbleMaterial=Se.MeshWobbleMaterial,exports.MeshReflectorMaterial=Me.MeshReflectorMaterial,exports.MeshRefractionMaterial=Te.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Pe.MeshTransmissionMaterial,exports.MeshDiscardMaterial=be.MeshDiscardMaterial,exports.PointMaterial=fe.PointMaterial,exports.PointMaterialImpl=fe.PointMaterialImpl,exports.shaderMaterial=Be.shaderMaterial,exports.SoftShadows=ge.SoftShadows,exports.Box=ve.Box,exports.Capsule=ve.Capsule,exports.Circle=ve.Circle,exports.Cone=ve.Cone,exports.Cylinder=ve.Cylinder,exports.Dodecahedron=ve.Dodecahedron,exports.Extrude=ve.Extrude,exports.Icosahedron=ve.Icosahedron,exports.Lathe=ve.Lathe,exports.Octahedron=ve.Octahedron,exports.Plane=ve.Plane,exports.Polyhedron=ve.Polyhedron,exports.Ring=ve.Ring,exports.Shape=ve.Shape,exports.Sphere=ve.Sphere,exports.Tetrahedron=ve.Tetrahedron,exports.Torus=ve.Torus,exports.TorusKnot=ve.TorusKnot,exports.Tube=ve.Tube,exports.RoundedBox=Ae.RoundedBox,exports.ScreenQuad=Le.ScreenQuad,exports.Center=Re.Center,exports.Resize=Ge.Resize,exports.Bounds=Fe.Bounds,exports.useBounds=Fe.useBounds,exports.CameraShake=De.CameraShake,exports.Float=Ee.Float,exports.Stage=ke.Stage,exports.Backdrop=we.Backdrop,exports.Shadow=ze.Shadow,exports.Caustics=Oe.Caustics,exports.ContactShadows=Ie.ContactShadows,exports.AccumulativeShadows=ye.AccumulativeShadows,exports.RandomizedLight=ye.RandomizedLight,exports.accumulativeContext=ye.accumulativeContext,exports.Reflector=He.Reflector,exports.SpotLight=Ve.SpotLight,exports.SpotLightShadow=Ve.SpotLightShadow,exports.Environment=We.Environment,exports.EnvironmentCube=We.EnvironmentCube,exports.EnvironmentMap=We.EnvironmentMap,exports.EnvironmentPortal=We.EnvironmentPortal,exports.Lightformer=Qe.Lightformer,exports.Sky=Xe.Sky,exports.calcPosFromAngles=Xe.calcPosFromAngles,exports.Stars=Ke.Stars,exports.Cloud=Ne.Cloud,exports.CloudInstance=Ne.CloudInstance,exports.Clouds=Ne.Clouds,exports.Sparkles=Ue.Sparkles,exports.useEnvironment=_e.useEnvironment,exports.useMatcapTexture=Je.useMatcapTexture,exports.useNormalTexture=Ye.useNormalTexture,exports.Wireframe=Ze.Wireframe,exports.ShadowAlpha=$e.ShadowAlpha,exports.Point=er.Point,exports.Points=er.Points,exports.PointsBuffer=er.PointsBuffer,exports.PositionPoint=er.PositionPoint,exports.Instance=rr.Instance,exports.Instances=rr.Instances,exports.Merged=rr.Merged,exports.Segment=sr.Segment,exports.SegmentObject=sr.SegmentObject,exports.Segments=sr.Segments,exports.Detailed=tr.Detailed,exports.Preload=or.Preload,exports.BakeShadows=ir.BakeShadows,exports.meshBounds=ar.meshBounds,exports.AdaptiveDpr=ur.AdaptiveDpr,exports.AdaptiveEvents=cr.AdaptiveEvents,exports.PerformanceMonitor=nr.PerformanceMonitor,exports.usePerformanceMonitor=nr.usePerformanceMonitor,exports.RenderTexture=jr.RenderTexture,exports.RenderCubeTexture=pr.RenderCubeTexture,exports.Mask=lr.Mask,exports.useMask=lr.useMask,exports.Hud=xr.Hud,exports.Fisheye=qr.Fisheye,exports.MeshPortalMaterial=dr.MeshPortalMaterial,exports.calculateScaleFactor=mr.calculateScaleFactor;

package/core/index.js

@@ -134,6 +134,7 @@ import 'meshline';
 import 'camera-controls';
 import 'maath';
 import 'zustand';
+import 'hls.js';
 import 'stats.js';
 import '../helpers/useEffectfulState.js';
 import 'stats-gl';

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);

package/core/useVideoTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber"),n=require("suspend-react");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=o(e);exports.useVideoTexture=function(e,o){const{unsuspend:s,start:i,crossOrigin:c,muted:a,loop:d,...p}={unsuspend:"loadedmetadata",crossOrigin:"Anonymous",muted:!0,loop:!0,start:!0,playsInline:!0,...o},l=t.useThree((e=>e.gl)),f=n.suspend((()=>new Promise(((r,t)=>{const n=Object.assign(document.createElement("video"),{src:"string"==typeof e&&e||void 0,srcObject:e instanceof MediaStream&&e||void 0,crossOrigin:c,loop:d,muted:a,...p}),o=new u.VideoTexture(n);"colorSpace"in o?o.colorSpace=l.outputColorSpace:o.encoding=l.outputEncoding,n.addEventListener(s,(()=>r(o)))}))),[e]);return r.useEffect((()=>{if(i)return f.image.play(),()=>f.image.pause()}),[f,i]),f};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),t=require("react"),r=require("@react-three/fiber"),n=require("suspend-react"),o=require("hls.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=s(e),i=u(o);exports.useVideoTexture=function(e,o){const{unsuspend:u,start:s,crossOrigin:a,muted:d,loop:l,hls:f,...p}={unsuspend:"loadedmetadata",crossOrigin:"Anonymous",muted:!0,loop:!0,start:!0,playsInline:!0,hls:{},...o},g=new URL("string"==typeof e?e:"",window.location.href).pathname.endsWith(".m3u8")&&i.default.isSupported(),m=t.useRef(g?new i.default({...f}):null),O=t.useRef(null),b=r.useThree((e=>e.gl)),y=n.suspend((()=>new Promise(((t,r)=>{const n=Object.assign(document.createElement("video"),{src:"string"==typeof e&&e||void 0,srcObject:e instanceof MediaStream&&e||void 0,crossOrigin:a,loop:l,muted:d,...p});if(O.current=n,"string"==typeof e)if(g){const t=m.current;t&&(t.attachMedia(n),t.on(i.default.Events.MEDIA_ATTACHED,(()=>{t.loadSource(e)})))}else n.src=e;else e instanceof MediaStream&&(n.srcObject=e);const o=new c.VideoTexture(n);"colorSpace"in o?o.colorSpace=b.outputColorSpace:o.encoding=b.outputEncoding,n.addEventListener(u,(()=>t(o)))}))),[e]);return t.useEffect((()=>(s&&y.image.play(),()=>{m.current&&(m.current.destroy(),m.current=null)})),[y,s]),y};

package/core/useVideoTexture.d.ts

@@ -1,7 +1,12 @@
 import * as THREE from 'three';
+import { HlsConfig } from 'hls.js';
 interface VideoTextureProps extends HTMLVideoElement {
     unsuspend?: 'canplay' | 'canplaythrough' | 'loadstart' | 'loadedmetadata';
     start?: boolean;
+    hls?: HLSConfiguration;
+}
+interface HLSConfiguration {
+    hls: HlsConfig;
 }
 export declare function useVideoTexture(src: string | MediaStream, props?: Partial<VideoTextureProps>): THREE.VideoTexture;
 export {};

package/core/useVideoTexture.js

@@ -1,7 +1,8 @@
 import * as THREE from 'three';
-import { useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import { useThree } from '@react-three/fiber';
 import { suspend } from 'suspend-react';
+import Hls from 'hls.js';
 
 function useVideoTexture(src, props) {
   const {
@@ -10,6 +11,7 @@ function useVideoTexture(src, props) {
     crossOrigin,
     muted,
     loop,
+    hls,
     ...rest
   } = {
     unsuspend: 'loadedmetadata',
@@ -18,8 +20,15 @@ function useVideoTexture(src, props) {
     loop: true,
     start: true,
     playsInline: true,
+    hls: {},
     ...props
   };
+  const url = new URL(typeof src === 'string' ? src : '', window.location.href);
+  const shouldUseHLS = url.pathname.endsWith('.m3u8') && Hls.isSupported();
+  const hlsRef = useRef(shouldUseHLS ? new Hls({
+    ...hls
+  }) : null);
+  const videoRef = useRef(null);
   const gl = useThree(state => state.gl);
   const texture = suspend(() => new Promise((res, rej) => {
     const video = Object.assign(document.createElement('video'), {
@@ -30,15 +39,36 @@ function useVideoTexture(src, props) {
       muted,
       ...rest
     });
+    videoRef.current = video;
+
+    // hlsjs extension
+    if (typeof src === 'string') {
+      if (shouldUseHLS) {
+        const _hls = hlsRef.current;
+        if (_hls) {
+          _hls.attachMedia(video);
+          _hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+            _hls.loadSource(src);
+          });
+        }
+      } else {
+        video.src = src;
+      }
+    } else if (src instanceof MediaStream) {
+      video.srcObject = src;
+    }
     const texture = new THREE.VideoTexture(video);
     if ('colorSpace' in texture) texture.colorSpace = gl.outputColorSpace;else texture.encoding = gl.outputEncoding;
     video.addEventListener(unsuspend, () => res(texture));
   }), [src]);
   useEffect(() => {
-    if (start) {
-      texture.image.play();
-      return () => texture.image.pause();
-    }
+    start && texture.image.play();
+    return () => {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
   }, [texture, start]);
   return texture;
 }