@react-three/drei 9.103.0 → 9.104.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -926,6 +926,14 @@ type PivotControlsProps = {
926
926
  autoTransform?: boolean
927
927
  /** Allows you to switch individual axes off */
928
928
  activeAxes?: [boolean, boolean, boolean]
929
+ /** Allows you to disable translation via axes arrows */
930
+ disableAxes?: boolean
931
+ /** Allows you to disable translation via axes planes */
932
+ disableSliders?: boolean
933
+ /** Allows you to disable rotation */
934
+ disableRotations?: boolean
935
+ /** Allows you to disable scaling */
936
+ disableScaling?: boolean
929
937
  /** RGB colors */
930
938
  axisColors?: [string | number, string | number, string | number]
931
939
  /** Color of the hovered item */
@@ -1082,6 +1090,8 @@ export type GridMaterialType = {
1082
1090
  fadeDistance?: number
1083
1091
  /** Fade strength, default: 1 */
1084
1092
  fadeStrength?: number
1093
+ /** Fade from camera (1) or origin (0), or somewhere in between, default: camera */
1094
+ fadeFrom?: number
1085
1095
  }
1086
1096
 
1087
1097
  export type GridProps = GridMaterialType & {
@@ -3272,7 +3282,7 @@ function VideoMaterial({ src }) {
3272
3282
 
3273
3283
  NB: It's important to wrap `VideoMaterial` into `React.Suspense` since, `useVideoTexture(src)` here will be suspended until the user shares its screen.
3274
3284
 
3275
- HLS - useVideoTexture supports .m3u8 HLS manifest via (https://github.com/video-dev/hls.js).
3285
+ HLS - useVideoTexture supports .m3u8 HLS manifest via (https://github.com/video-dev/hls.js).
3276
3286
 
3277
3287
  You can fine-tune via the hls configuration:
3278
3288
 
@@ -3281,7 +3291,8 @@ You can fine-tune via the hls configuration:
3281
3291
  hls: { abrEwmaFastLive: 1.0, abrEwmaSlowLive: 3.0, enableWorker: true }
3282
3292
  })
3283
3293
  ```
3284
- >Available options: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
3294
+
3295
+ > Available options: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
3285
3296
 
3286
3297
  #### useTrailTexture
3287
3298
 
@@ -4706,7 +4717,7 @@ gl_FragColor = vec4(vec3(0.), 1.); // Transparent
4706
4717
  <a href="https://codesandbox.io/s/0c5hv9"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/0c5hv9/screenshot.png" alt="Demo"/></a>
4707
4718
  </p>
4708
4719
 
4709
- Sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, unless a custom scene has been passed. A selection of [presets](src/helpers/environment-assets.ts) from [HDRI Haven](https://hdrihaven.com/) are available for convenience. If you pass an array of files it will use THREE.CubeTextureLoader.
4720
+ Sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, unless a custom scene has been passed. A selection of [presets](src/helpers/environment-assets.ts) from [HDRI Haven](https://hdrihaven.com/) are available for convenience.
4710
4721
 
4711
4722
  ```jsx
4712
4723
  <Environment
@@ -4720,16 +4731,33 @@ Sets up a global cubemap, which affects the default `scene.environment`, and opt
4720
4731
  />
4721
4732
  ```
4722
4733
 
4723
- The simplest way to use it is to provide a preset. 👉 Note: `preset` property is not meant to be used in production environments and may fail as it relies on CDNs.
4734
+ The simplest way to use it is to provide a preset (linking towards common HDRI Haven assets hosted on github). 👉 Note: `preset` property is not meant to be used in production environments and may fail as it relies on CDNs.
4735
+
4736
+ Current presets are
4737
+
4738
+ - apartment: 'lebombo_1k.hdr'
4739
+ - city: 'potsdamer_platz_1k.hdr'
4740
+ - dawn: 'kiara_1_dawn_1k.hdr'
4741
+ - forest: 'forest_slope_1k.hdr'
4742
+ - lobby: 'st_fagans_interior_1k.hdr'
4743
+ - night: 'dikhololo_night_1k.hdr'
4744
+ - park: 'rooitou_park_1k.hdr'
4745
+ - studio: 'studio_small_03_1k.hdr'
4746
+ - sunset: 'venice_sunset_1k.hdr'
4747
+ - warehouse: 'empty_warehouse_01_1k.hdr'
4724
4748
 
4725
4749
  ```jsx
4726
4750
  <Environment preset="city" />
4727
4751
  ```
4728
4752
 
4729
- If you provide a single string it will use THREE.RGBELoader.
4753
+ Otherwise use the files property. It will use RGBELoader for _.hdr, EXRLoader for _.exr, HDRJPGLoader for [gainmap](https://github.com/MONOGRID/gainmap-js) _.jpg, GainMapLoader for gainmap _.webp, CubeTextureLoader for an array of images. Of all these, gainmap has the smallest footprint.
4730
4754
 
4731
4755
  ```jsx
4732
4756
  <Environment files="file.hdr" />
4757
+ <Environment files="file.exr" />
4758
+ <Environment files="file.jpg" />
4759
+ <Environment files="file.webp" />
4760
+ <Environment files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
4733
4761
  ```
4734
4762
 
4735
4763
  You can also use [@pmndrs/assets](https://github.com/pmndrs/assets) to easily self host common assets. Always use dynamic imports to avoid making this part of your main bundle.
@@ -4766,7 +4794,7 @@ return (
4766
4794
  <mesh />
4767
4795
  ```
4768
4796
 
4769
- Declarative environment content can also animate with the `frames` prop, the envmap can be live. Give it a low resolution and this will happen at very little cost
4797
+ Declarative environment content can also animate with the `frames` prop, the envmap can be live. Give it a low resolution and this will happen at little cost
4770
4798
 
4771
4799
  ```jsx
4772
4800
  return (
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("./useEnvironment.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var a=c(e),l=s(r);const i=e=>{return(r=e).current&&r.current.isScene?e.current:e;var r};function d(e,r,n,t,u=0){const o=i(r||n),c=o.background,s=o.environment,a=o.backgroundBlurriness||0;return"only"!==e&&(o.environment=t),e&&(o.background=t),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=u),()=>{"only"!==e&&(o.environment=s),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=a)}}function m({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return d(r,e,o,u,t)}),[o,e,u,r,t]),null}function f({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>d(e,r,s,c,t)),[c,e,r,s,t]),null}function b({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:i,scene:b,files:p,path:g,preset:v,extensions:E}){const h=n.useThree((e=>e.gl)),j=n.useThree((e=>e.scene)),k=l.useRef(null),[x]=l.useState((()=>new t.Scene)),y=l.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(o);return e.texture.type=t.HalfFloatType,e}),[o]);l.useLayoutEffect((()=>(1===c&&k.current.update(h,x),d(a,b,j,y.texture,i))),[e,x,y.texture,b,j,a,c,h]);let q=1;return n.useFrame((()=>{(c===1/0||q<c)&&(k.current.update(h,x),q++)})),l.createElement(l.Fragment,null,n.createPortal(l.createElement(l.Fragment,null,e,l.createElement("cubeCamera",{ref:k,args:[r,u,y]}),p||v?l.createElement(f,{background:!0,files:p,preset:v,path:g,extensions:E}):s?l.createElement(m,{background:!0,map:s,extensions:E}):null),x))}function p(e){var r,t,c,s;const i=o.useEnvironment(e),d=e.map||i;l.useMemo((()=>n.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})),[]);const f=l.useMemo((()=>[d]),[d]),b=null==(r=e.ground)?void 0:r.height,p=null==(t=e.ground)?void 0:t.radius,g=null!==(c=null==(s=e.ground)?void 0:s.scale)&&void 0!==c?c:1e3;return l.createElement(l.Fragment,null,l.createElement(m,a.default({},e,{map:d})),l.createElement("groundProjectedEnvImpl",{args:f,scale:g,height:b,radius:p}))}exports.Environment=function(e){return e.ground?l.createElement(p,e):e.map?l.createElement(m,e):e.children?l.createElement(b,e):l.createElement(f,e)},exports.EnvironmentCube=f,exports.EnvironmentMap=m,exports.EnvironmentPortal=b;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("./useEnvironment.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var a=c(e),l=s(r);const i=e=>{return(r=e).current&&r.current.isScene?e.current:e;var r};function d(e,r,n,t,u=0){const o=i(r||n),c=o.background,s=o.environment,a=o.backgroundBlurriness||0;return"only"!==e&&(o.environment=t),e&&(o.background=t),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=u),()=>{"only"!==e&&(o.environment=s),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=a)}}function m({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return d(r,e,o,u,t)}),[o,e,u,r,t]),null}function f({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>d(e,r,s,c,t)),[c,e,r,s,t]),null}function b({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:i,scene:b,files:g,path:p,preset:v,extensions:E}){const h=n.useThree((e=>e.gl)),j=n.useThree((e=>e.scene)),k=l.useRef(null),[x]=l.useState((()=>new t.Scene)),y=l.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(o);return e.texture.type=t.HalfFloatType,e}),[o]);l.useLayoutEffect((()=>(1===c&&k.current.update(h,x),d(a,b,j,y.texture,i))),[e,x,y.texture,b,j,a,c,h]);let q=1;return n.useFrame((()=>{(c===1/0||q<c)&&(k.current.update(h,x),q++)})),l.createElement(l.Fragment,null,n.createPortal(l.createElement(l.Fragment,null,e,l.createElement("cubeCamera",{ref:k,args:[r,u,y]}),g||v?l.createElement(f,{background:!0,files:g,preset:v,path:p,extensions:E}):s?l.createElement(m,{background:!0,map:s,extensions:E}):null),x))}function g(e){var r,t,c,s;const i=o.useEnvironment(e),d=e.map||i;l.useMemo((()=>n.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})),[]);const f=l.useMemo((()=>[d]),[d]),b=null==(r=e.ground)?void 0:r.height,g=null==(t=e.ground)?void 0:t.radius,p=null!==(c=null==(s=e.ground)?void 0:s.scale)&&void 0!==c?c:1e3;return l.createElement(l.Fragment,null,l.createElement(m,a.default({},e,{map:d})),l.createElement("groundProjectedEnvImpl",{args:f,scale:p,height:b,radius:g}))}exports.Environment=function(e){return e.ground?l.createElement(g,e):e.map?l.createElement(m,e):e.children?l.createElement(b,e):l.createElement(f,e)},exports.EnvironmentCube=f,exports.EnvironmentMap=m,exports.EnvironmentPortal=b;
package/core/Grid.cjs.js CHANGED
@@ -1 +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;
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,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 CHANGED
@@ -11,6 +11,7 @@ export type GridMaterialType = {
11
11
  infiniteGrid?: boolean;
12
12
  fadeDistance?: number;
13
13
  fadeStrength?: number;
14
+ fadeFrom?: number;
14
15
  side?: THREE.Side;
15
16
  };
16
17
  export type GridProps = GridMaterialType & {
package/core/Grid.js CHANGED
@@ -10,6 +10,7 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
10
10
  sectionSize: 1,
11
11
  fadeDistance: 100,
12
12
  fadeStrength: 1,
13
+ fadeFrom: 1,
13
14
  cellThickness: 0.5,
14
15
  sectionThickness: 1,
15
16
  cellColor: /* @__PURE__ */new THREE.Color(),
@@ -51,6 +52,7 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
51
52
  uniform vec3 sectionColor;
52
53
  uniform float fadeDistance;
53
54
  uniform float fadeStrength;
55
+ uniform float fadeFrom;
54
56
  uniform float cellThickness;
55
57
  uniform float sectionThickness;
56
58
 
@@ -65,7 +67,8 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
65
67
  float g1 = getGrid(cellSize, cellThickness);
66
68
  float g2 = getGrid(sectionSize, sectionThickness);
67
69
 
68
- float dist = distance(worldCamProjPosition, worldPosition.xyz);
70
+ vec3 from = worldCamProjPosition*vec3(fadeFrom);
71
+ float dist = distance(from, worldPosition.xyz);
69
72
  float d = 1.0 - min(dist / fadeDistance, 1.0);
70
73
  vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));
71
74
 
@@ -87,6 +90,7 @@ const Grid = /* @__PURE__ */React.forwardRef(({
87
90
  infiniteGrid = false,
88
91
  fadeDistance = 100,
89
92
  fadeStrength = 1,
93
+ fadeFrom = 1,
90
94
  cellThickness = 0.5,
91
95
  sectionThickness = 1,
92
96
  side = THREE.BackSide,
@@ -119,6 +123,7 @@ const Grid = /* @__PURE__ */React.forwardRef(({
119
123
  const uniforms2 = {
120
124
  fadeDistance,
121
125
  fadeStrength,
126
+ fadeFrom,
122
127
  infiniteGrid,
123
128
  followCamera
124
129
  };
package/core/Stage.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),i=require("./Environment.cjs.js"),n=require("./ContactShadows.cjs.js"),r=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("./useEnvironment.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js"),require("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=l(e),c=u(t);const d={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};function m({radius:e,adjustCamera:t}){const i=s.useBounds();return c.useEffect((()=>{t&&i.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,center:t,adjustCamera:l=!0,intensity:u=.5,shadows:f="contact",environment:p="city",preset:h="rembrandt",...j}){var v,b,g,y,E,q,w,C;const S="string"==typeof h?d[h]:h,[{radius:O,height:z},B]=c.useState({radius:0,width:0,height:0,depth:0}),M=null!==(v=null==f?void 0:f.bias)&&void 0!==v?v:-1e-4,L=null!==(b=null==f?void 0:f.normalBias)&&void 0!==b?b:0,_=null!==(g=null==f?void 0:f.size)&&void 0!==g?g:1024,x=null!==(y=null==f?void 0:f.offset)&&void 0!==y?y:0,P="contact"===f||"contact"===(null==f?void 0:f.type),k="accumulative"===f||"accumulative"===(null==f?void 0:f.type),A={..."object"==typeof f?f:{}},D=p?"string"==typeof p?{preset:p}:p:null,F=c.useCallback((e=>{const{width:i,height:n,depth:r,boundingSphere:a}=e;B({radius:a.radius,width:i,height:n,depth:r}),null!=t&&t.onCentered&&t.onCentered(e)}),[]);return c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],intensity:2*u,castShadow:!!f,"shadow-bias":M,"shadow-normalBias":L,"shadow-mapSize":_}),c.createElement("pointLight",{position:[S.fill[0]*O,S.fill[1]*O,S.fill[2]*O],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!l,clip:!!l,margin:Number(l),observe:!0},j),c.createElement(m,{radius:O,adjustCamera:l}),c.createElement(r.Center,o.default({},t,{position:[0,x/2,0],onCentered:F}),e)),c.createElement("group",{position:[0,-z/2-x/2,0]},P&&c.createElement(n.ContactShadows,o.default({scale:4*O,far:O,blur:2},A)),k&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*O},A),c.createElement(a.RandomizedLight,{amount:null!==(E=A.amount)&&void 0!==E?E:8,radius:null!==(q=A.radius)&&void 0!==q?q:O,ambient:null!==(w=A.ambient)&&void 0!==w?w:.5,intensity:null!==(C=A.intensity)&&void 0!==C?C:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],size:4*O,bias:-M,mapSize:_}))),p&&c.createElement(i.Environment,D))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),i=require("./Environment.cjs.js"),r=require("./ContactShadows.cjs.js"),n=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var r=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,r.get?r:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("./useEnvironment.cjs.js"),require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js"),require("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=l(e),c=u(t);const d={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};function m({radius:e,adjustCamera:t}){const i=s.useBounds();return c.useEffect((()=>{t&&i.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,center:t,adjustCamera:l=!0,intensity:u=.5,shadows:f="contact",environment:p="city",preset:h="rembrandt",...j}){var v,b,g,q,y,E,w,C;const S="string"==typeof h?d[h]:h,[{radius:O,height:z},B]=c.useState({radius:0,width:0,height:0,depth:0}),M=null!==(v=null==f?void 0:f.bias)&&void 0!==v?v:-1e-4,L=null!==(b=null==f?void 0:f.normalBias)&&void 0!==b?b:0,_=null!==(g=null==f?void 0:f.size)&&void 0!==g?g:1024,x=null!==(q=null==f?void 0:f.offset)&&void 0!==q?q:0,P="contact"===f||"contact"===(null==f?void 0:f.type),k="accumulative"===f||"accumulative"===(null==f?void 0:f.type),A={..."object"==typeof f?f:{}},D=p?"string"==typeof p?{preset:p}:p:null,F=c.useCallback((e=>{const{width:i,height:r,depth:n,boundingSphere:a}=e;B({radius:a.radius,width:i,height:r,depth:n}),null!=t&&t.onCentered&&t.onCentered(e)}),[]);return c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],intensity:2*u,castShadow:!!f,"shadow-bias":M,"shadow-normalBias":L,"shadow-mapSize":_}),c.createElement("pointLight",{position:[S.fill[0]*O,S.fill[1]*O,S.fill[2]*O],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!l,clip:!!l,margin:Number(l),observe:!0},j),c.createElement(m,{radius:O,adjustCamera:l}),c.createElement(n.Center,o.default({},t,{position:[0,x/2,0],onCentered:F}),e)),c.createElement("group",{position:[0,-z/2-x/2,0]},P&&c.createElement(r.ContactShadows,o.default({scale:4*O,far:O,blur:2},A)),k&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*O},A),c.createElement(a.RandomizedLight,{amount:null!==(y=A.amount)&&void 0!==y?y:8,radius:null!==(E=A.radius)&&void 0!==E?E:O,ambient:null!==(w=A.ambient)&&void 0!==w?w:.5,intensity:null!==(C=A.intensity)&&void 0!==C?C:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],size:4*O,bias:-M,mapSize:_}))),p&&c.createElement(i.Environment,D))};
package/core/index.cjs.js CHANGED
@@ -1 +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("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;
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"),g=require("./OrthographicCamera.cjs.js"),B=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"),ge=require("./shaderMaterial.cjs.js"),Be=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("@monogrid/gainmap-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=g.OrthographicCamera,exports.PerspectiveCamera=B.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=ge.shaderMaterial,exports.SoftShadows=Be.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 CHANGED
@@ -147,6 +147,7 @@ import '../materials/ConvolutionMaterial.js';
147
147
  import '../materials/MeshReflectorMaterial.js';
148
148
  import '../materials/MeshRefractionMaterial.js';
149
149
  import '../materials/DiscardMaterial.js';
150
+ import '@monogrid/gainmap-js';
150
151
  import '../helpers/environment-assets.js';
151
152
  import '../materials/SpotLightMaterial.js';
152
153
  import 'uuid';
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("../helpers/environment-assets.cjs.js"),s=require("../helpers/deprecated.cjs.js");const i=e=>Array.isArray(e);exports.useEnvironment=function({files:o=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:a="",preset:p,encoding:l,extensions:c}={}){var u;let d,b=null,h=!1;if(p){if(!(p in t.presetsObj))throw new Error("Preset must be one of: "+Object.keys(t.presetsObj).join(", "));o=t.presetsObj[p],a="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}if(h=i(o),d=i(o)?"cube":o.startsWith("data:application/exr")?"exr":o.startsWith("data:application/hdr")?"hdr":null==(u=o.split(".").pop())||null==(u=u.split("?"))||null==(u=u.shift())?void 0:u.toLowerCase(),b=h?r.CubeTextureLoader:"hdr"===d?n.RGBELoader:"exr"===d?n.EXRLoader:null,!b)throw new Error("useEnvironment: Unrecognized file extension: "+o);const g=e.useLoader(b,h?[o]:o,(e=>{null==e.setPath||e.setPath(a),c&&c(e)})),f=h?g[0]:g;return f.mapping=h?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in f?f.colorSpace=(null!=l?l:h)?"srgb":"srgb-linear":f.encoding=(null!=l?l:h)?s.sRGBEncoding:s.LinearEncoding,f};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("@monogrid/gainmap-js"),s=require("../helpers/environment-assets.cjs.js"),i=require("../helpers/deprecated.cjs.js");const p=e=>Array.isArray(e);exports.useEnvironment=function({files:a=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:o="",preset:l,encoding:d,extensions:g}={}){var u;let c,b=null,h=!1;if(l){if(!(l in s.presetsObj))throw new Error("Preset must be one of: "+Object.keys(s.presetsObj).join(", "));a=s.presetsObj[l],o="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}const j=p(a)&&6===a.length,f=p(a)&&3===a.length&&a.some((e=>e.endsWith("json"))),m=p(a)?a[0]:a;if(h=p(a),c=j?"cube":f?"webp":m.startsWith("data:application/exr")?"exr":m.startsWith("data:application/hdr")?"hdr":m.startsWith("data:image/jpeg")?"jpg":null==(u=m.split(".").pop())||null==(u=u.split("?"))||null==(u=u.shift())?void 0:u.toLowerCase(),b="cube"===c?r.CubeTextureLoader:"hdr"===c?n.RGBELoader:"exr"===c?n.EXRLoader:"jpg"===c||"jpeg"===c?t.HDRJPGLoader:"webp"===c?t.GainMapLoader:null,!b)throw new Error("useEnvironment: Unrecognized file extension: "+a);const x=e.useThree((e=>e.gl)),w=e.useLoader(b,h?[a]:a,(e=>{"webp"!==c&&"jpg"!==c&&"jpeg"!==c||e.setRenderer(x),null==e.setPath||e.setPath(o),g&&g(e)}));let v=h?w[0]:w;var E;return"jpg"!==c&&"jpeg"!==c&&"webp"!==c||(v=null==(E=v.renderTarget)?void 0:E.texture),v.mapping=j?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in v?v.colorSpace=(null!=d?d:j)?"srgb":"srgb-linear":v.encoding=(null!=d?d:j)?i.sRGBEncoding:i.LinearEncoding,v};
@@ -1,6 +1,7 @@
1
- import { useLoader } from '@react-three/fiber';
1
+ import { useThree, useLoader } from '@react-three/fiber';
2
2
  import { CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
3
3
  import { RGBELoader, EXRLoader } from 'three-stdlib';
4
+ import { HDRJPGLoader, GainMapLoader } from '@monogrid/gainmap-js';
4
5
  import { presetsObj } from '../helpers/environment-assets.js';
5
6
  import { sRGBEncoding, LinearEncoding } from '../helpers/deprecated.js';
6
7
 
@@ -13,32 +14,44 @@ function useEnvironment({
13
14
  encoding = undefined,
14
15
  extensions
15
16
  } = {}) {
16
- var _files$split$pop;
17
+ var _firstEntry$split$pop;
17
18
  let loader = null;
18
- let isCubeMap = false;
19
+ let multiFile = false;
19
20
  let extension;
20
21
  if (preset) {
21
22
  if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '));
22
23
  files = presetsObj[preset];
23
24
  path = CUBEMAP_ROOT;
24
25
  }
26
+ const isCubemap = isArray(files) && files.length === 6;
27
+ const isGainmap = isArray(files) && files.length === 3 && files.some(file => file.endsWith('json'));
28
+ const firstEntry = isArray(files) ? files[0] : files;
25
29
 
26
30
  // Everything else
27
- isCubeMap = isArray(files);
28
- extension = isArray(files) ? 'cube' : files.startsWith('data:application/exr') ? 'exr' : files.startsWith('data:application/hdr') ? 'hdr' : (_files$split$pop = files.split('.').pop()) == null || (_files$split$pop = _files$split$pop.split('?')) == null || (_files$split$pop = _files$split$pop.shift()) == null ? void 0 : _files$split$pop.toLowerCase();
29
- loader = isCubeMap ? CubeTextureLoader : extension === 'hdr' ? RGBELoader : extension === 'exr' ? EXRLoader : null;
31
+ multiFile = isArray(files);
32
+ extension = isCubemap ? 'cube' : isGainmap ? 'webp' : firstEntry.startsWith('data:application/exr') ? 'exr' : firstEntry.startsWith('data:application/hdr') ? 'hdr' : firstEntry.startsWith('data:image/jpeg') ? 'jpg' : (_firstEntry$split$pop = firstEntry.split('.').pop()) == null || (_firstEntry$split$pop = _firstEntry$split$pop.split('?')) == null || (_firstEntry$split$pop = _firstEntry$split$pop.shift()) == null ? void 0 : _firstEntry$split$pop.toLowerCase();
33
+ loader = extension === 'cube' ? CubeTextureLoader : extension === 'hdr' ? RGBELoader : extension === 'exr' ? EXRLoader : extension === 'jpg' || extension === 'jpeg' ? HDRJPGLoader : extension === 'webp' ? GainMapLoader : null;
30
34
  if (!loader) throw new Error('useEnvironment: Unrecognized file extension: ' + files);
35
+ const gl = useThree(state => state.gl);
31
36
  const loaderResult = useLoader(
32
37
  // @ts-expect-error
33
- loader, isCubeMap ? [files] : files, loader => {
38
+ loader, multiFile ? [files] : files, loader => {
39
+ // Gainmap requires a renderer
40
+ if (extension === 'webp' || extension === 'jpg' || extension === 'jpeg') {
41
+ loader.setRenderer(gl);
42
+ }
34
43
  loader.setPath == null || loader.setPath(path);
35
44
  if (extensions) extensions(loader);
36
45
  });
37
- const texture = isCubeMap ?
46
+ let texture = multiFile ?
38
47
  // @ts-ignore
39
48
  loaderResult[0] : loaderResult;
40
- texture.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping;
41
- if ('colorSpace' in texture) texture.colorSpace = (encoding !== null && encoding !== void 0 ? encoding : isCubeMap) ? 'srgb' : 'srgb-linear';else texture.encoding = (encoding !== null && encoding !== void 0 ? encoding : isCubeMap) ? sRGBEncoding : LinearEncoding;
49
+ if (extension === 'jpg' || extension === 'jpeg' || extension === 'webp') {
50
+ var _renderTarget;
51
+ texture = (_renderTarget = texture.renderTarget) == null ? void 0 : _renderTarget.texture;
52
+ }
53
+ texture.mapping = isCubemap ? CubeReflectionMapping : EquirectangularReflectionMapping;
54
+ if ('colorSpace' in texture) texture.colorSpace = (encoding !== null && encoding !== void 0 ? encoding : isCubemap) ? 'srgb' : 'srgb-linear';else texture.encoding = (encoding !== null && encoding !== void 0 ? encoding : isCubemap) ? sRGBEncoding : LinearEncoding;
42
55
  return texture;
43
56
  }
44
57
 
@@ -1 +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;
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){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;
@@ -1,10 +1,14 @@
1
1
  import { Texture } from 'three';
2
- export declare const IsObject: (url: any) => url is Record<string, string>;
3
- export type MappedTextureType<T extends string[] | string | Record<string, string>> = T extends any[] ? Texture[] : T extends Record<string, string> ? {
2
+ export declare const IsObject: (url: unknown) => url is Record<string, string>;
3
+ type TextureArray<T> = T extends string[] ? Texture[] : never;
4
+ type TextureRecord<T> = T extends Record<string, string> ? {
4
5
  [key in keyof T]: Texture;
5
- } : Texture;
6
+ } : never;
7
+ type SingleTexture<T> = T extends string ? Texture : never;
8
+ export type MappedTextureType<T extends string[] | string | Record<string, string>> = TextureArray<T> | TextureRecord<T> | SingleTexture<T>;
6
9
  export declare function useTexture<Url extends string[] | string | Record<string, string>>(input: Url, onLoad?: (texture: MappedTextureType<Url>) => void): MappedTextureType<Url>;
7
10
  export declare namespace useTexture {
8
- var preload: (url: string) => undefined;
11
+ var preload: (url: string | string[]) => undefined;
9
12
  var clear: (input: string | string[]) => void;
10
13
  }
14
+ export {};
@@ -1,4 +1,4 @@
1
- import { TextureLoader } from 'three';
1
+ import { TextureLoader, Texture } from 'three';
2
2
  import { useThree, useLoader } from '@react-three/fiber';
3
3
  import { useLayoutEffect, useEffect, useMemo } from 'react';
4
4
 
@@ -15,8 +15,19 @@ function useTexture(input, onLoad) {
15
15
  // NOTE: only available for WebGLRenderer
16
16
  useEffect(() => {
17
17
  if ('initTexture' in gl) {
18
- const array = Array.isArray(textures) ? textures : [textures];
19
- array.forEach(gl.initTexture);
18
+ let textureArray = [];
19
+ if (Array.isArray(textures)) {
20
+ textureArray = textures;
21
+ } else if (textures instanceof Texture) {
22
+ textureArray = [textures];
23
+ } else if (IsObject(textures)) {
24
+ textureArray = Object.values(textures);
25
+ }
26
+ textureArray.forEach(texture => {
27
+ if (texture instanceof Texture) {
28
+ gl.initTexture(texture);
29
+ }
30
+ });
20
31
  }
21
32
  }, [gl, textures]);
22
33
  const mappedTextures = useMemo(() => {
@@ -1 +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]};
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;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]};
@@ -2,15 +2,6 @@ import { useMemo, useCallback } from 'react';
2
2
  import { useFrame } from '@react-three/fiber';
3
3
  import { Texture } from 'three';
4
4
 
5
- /**
6
- * Adapted from https://github.com/brunoimbrizi/interactive-particles/blob/master/src/scripts/webgl/particles/TrailTexture.js
7
- * Changes:
8
- * * accepts config as constructor params
9
- * * frame-rate independent aging
10
- * * added option to interpolate between slow mouse events
11
- * * added option for smoothing between values to avoid large jumps in force
12
- */
13
-
14
5
  // smooth new sample (measurement) based on previous sample (current)
15
6
  function smoothAverage(current, measurement, smoothing = 0.9) {
16
7
  return measurement * smoothing + current * (1.0 - smoothing);
@@ -47,7 +38,11 @@ class TrailTexture {
47
38
  initTexture() {
48
39
  this.canvas = document.createElement('canvas');
49
40
  this.canvas.width = this.canvas.height = this.size;
50
- this.ctx = this.canvas.getContext('2d');
41
+ const ctx = this.canvas.getContext('2d');
42
+ if (ctx === null) {
43
+ throw new Error('2D not available');
44
+ }
45
+ this.ctx = ctx;
51
46
  this.ctx.fillStyle = 'black';
52
47
  this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
53
48
  this.texture = new Texture(this.canvas);