@react-three/drei 8.10.0 → 8.10.4

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.
Files changed (42) hide show
  1. package/README.md +11 -3
  2. package/core/Cloud.cjs.js +1 -1
  3. package/core/Cloud.d.ts +2 -1
  4. package/core/Cloud.js +3 -2
  5. package/core/Environment.cjs.js +1 -1
  6. package/core/Environment.js +2 -2
  7. package/core/Image.cjs.js +1 -1
  8. package/core/Image.d.ts +3 -1
  9. package/core/Image.js +6 -1
  10. package/core/MeshReflectorMaterial.cjs.js +1 -1
  11. package/core/MeshReflectorMaterial.d.ts +1 -2
  12. package/core/MeshReflectorMaterial.js +1 -3
  13. package/core/PointMaterial.cjs.js +1 -1
  14. package/core/PointMaterial.js +4 -4
  15. package/core/Reflector.d.ts +1 -1
  16. package/core/Stars.cjs.js +1 -1
  17. package/core/Stars.js +3 -0
  18. package/core/Text.cjs.js +1 -1
  19. package/core/Text.js +8 -1
  20. package/core/index.cjs.js +1 -1
  21. package/core/index.js +1 -1
  22. package/core/useDetectGPU.cjs.js +1 -1
  23. package/core/useDetectGPU.js +2 -2
  24. package/core/useMatcapTexture.cjs.js +1 -1
  25. package/core/useMatcapTexture.js +2 -5
  26. package/core/useNormalTexture.cjs.js +1 -1
  27. package/core/useNormalTexture.js +2 -5
  28. package/helpers/environment-assets.cjs.js +1 -1
  29. package/helpers/environment-assets.js +10 -10
  30. package/index.cjs.js +1 -1
  31. package/materials/ConvolutionMaterial.cjs.js +1 -1
  32. package/materials/ConvolutionMaterial.js +2 -0
  33. package/materials/MeshReflectorMaterial.cjs.js +1 -1
  34. package/materials/MeshReflectorMaterial.d.ts +0 -3
  35. package/materials/MeshReflectorMaterial.js +1 -27
  36. package/materials/SpotLightMaterial.cjs.js +1 -1
  37. package/materials/SpotLightMaterial.js +3 -0
  38. package/native/index.cjs.js +1 -1
  39. package/native/index.js +1 -1
  40. package/package.json +2 -2
  41. package/web/index.cjs.js +1 -1
  42. package/web/index.js +1 -1
package/README.md CHANGED
@@ -429,13 +429,13 @@ function Foo() {
429
429
 
430
430
  #### Text
431
431
 
432
- [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st)
432
+ [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
433
433
 
434
434
  <p>
435
435
  <a href="https://codesandbox.io/s/yup2o"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/yup2o/screenshot.png" alt="Demo"/></a>
436
436
  </p>
437
437
 
438
- Hi-quality text rendering w/ signed distance fields (SDF) and antialiasing, using [troika-3d-text](https://github.com/protectwise/troika/tree/master/packages/troika-3d-text). All of troikas props are valid!
438
+ Hi-quality text rendering w/ signed distance fields (SDF) and antialiasing, using [troika-3d-text](https://github.com/protectwise/troika/tree/master/packages/troika-3d-text). All of troikas props are valid! Text is suspense-based!
439
439
 
440
440
  ```jsx
441
441
  <Text color="black" anchorX="center" anchorY="middle">
@@ -1287,7 +1287,7 @@ You can define events on them!
1287
1287
  <Instance onClick={...} onPointerOver={...} />
1288
1288
  ```
1289
1289
 
1290
- Note: While creating instances declaratively keeps all the power of components with reduced draw calls, it comes at the cost of CPU overhead. For cases like foliage where you want no CPU overhead with thousands of intances you should use THREE.InstancedMesh such as in this [example](https://codesandbox.io/s/grass-shader-5xho4?file=/src/Grass.js).
1290
+ 👉 Note: While creating instances declaratively keeps all the power of components with reduced draw calls, it comes at the cost of CPU overhead. For cases like foliage where you want no CPU overhead with thousands of intances you should use THREE.InstancedMesh such as in this [example](https://codesandbox.io/s/grass-shader-5xho4?file=/src/Grass.js).
1291
1291
 
1292
1292
  #### Merged
1293
1293
 
@@ -1684,6 +1684,8 @@ function Foo() {
1684
1684
 
1685
1685
  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.
1686
1686
 
1687
+ 👉 Note: `preset` property is not meant to be used in production environments. Consider using `files` property together with local files or a CDN of your choice instead.
1688
+
1687
1689
  ```jsx
1688
1690
  <Environment
1689
1691
  background={false}
@@ -1734,6 +1736,8 @@ Adds a blinking shader-based starfield to your scene.
1734
1736
 
1735
1737
  Particle based cloud.
1736
1738
 
1739
+ 👉 Note: `<Cloud />` component is not meant to be used in production environments as it relies on third-party CDN.
1740
+
1737
1741
  ```jsx
1738
1742
  <Cloud
1739
1743
  opacity={0.5}
@@ -1752,6 +1756,8 @@ Loads matcap textures from this repository: https://github.com/emmelleppi/matcap
1752
1756
 
1753
1757
  (It is a fork of this repository: https://github.com/nidorx/matcaps)
1754
1758
 
1759
+ 👉 Note: `useMatcapTexture` hook is not meant to be used in production environments as it relies on third-party CDN.
1760
+
1755
1761
  ```jsx
1756
1762
  const [matcap, url] = useMatcapTexture(
1757
1763
  0, // index of the matcap texture https://github.com/emmelleppi/matcaps/blob/master/matcap-list.json
@@ -1779,6 +1785,8 @@ const [matcap] = useMatcapTexture('3E2335_D36A1B_8E4A2E_2842A5')
1779
1785
 
1780
1786
  Loads normal textures from this repository: https://github.com/emmelleppi/normal-maps
1781
1787
 
1788
+ 👉 Note: `useNormalTexture` hook is not meant to be used in production environments as it relies on third-party CDN.
1789
+
1782
1790
  ```jsx
1783
1791
  const [normalMap, url] = useNormalTexture(
1784
1792
  1, // index of the normal texture - https://github.com/emmelleppi/normal-maps/blob/master/normals.json
package/core/Cloud.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:i=10,depth:o=1.5,segments:u=20,...l}){const d=c.useRef(),h=n.useTexture("https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png"),m=c.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:i/2-Math.random()*i,y:i/2-Math.random()*i,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[i,u,s]);return r.useFrame((e=>{var r;return null==(r=d.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=m[t].rotation,r.children[0].scale.setScalar(m[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",l,c.createElement("group",{position:[0,0,u/2*o],ref:d},m.map((({x:r,y:n,scale:s,density:i},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*o]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:h,transparent:!0,opacity:s/6*i*e,depthTest:!1})))))))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:i=10,depth:o=1.5,segments:u=20,texture:l="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",...d}){const h=c.useRef(),m=n.useTexture(l),p=c.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:i/2-Math.random()*i,y:i/2-Math.random()*i,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[i,u,s]);return r.useFrame((e=>{var r;return null==(r=h.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=p[t].rotation,r.children[0].scale.setScalar(p[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",d,c.createElement("group",{position:[0,0,u/2*o],ref:h},p.map((({x:r,y:n,scale:s,density:i},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*o]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:m,transparent:!0,opacity:s/6*i*e,depthTest:!1})))))))};
package/core/Cloud.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  /// <reference types="react" />
2
- export declare function Cloud({ opacity, speed, width, depth, segments, ...props }: {
2
+ export declare function Cloud({ opacity, speed, width, depth, segments, texture, ...props }: {
3
3
  [x: string]: any;
4
4
  opacity?: number | undefined;
5
5
  speed?: number | undefined;
6
6
  width?: number | undefined;
7
7
  depth?: number | undefined;
8
8
  segments?: number | undefined;
9
+ texture?: string | undefined;
9
10
  }): JSX.Element;
package/core/Cloud.js CHANGED
@@ -11,10 +11,11 @@ function Cloud({
11
11
  width = 10,
12
12
  depth = 1.5,
13
13
  segments = 20,
14
+ texture = CLOUD_URL,
14
15
  ...props
15
16
  }) {
16
17
  const group = React.useRef();
17
- const texture = useTexture(CLOUD_URL);
18
+ const cloudTexture = useTexture(texture);
18
19
  const clouds = React.useMemo(() => [...new Array(segments)].map((_, index) => ({
19
20
  x: width / 2 - Math.random() * width,
20
21
  y: width / 2 - Math.random() * width,
@@ -45,7 +46,7 @@ function Cloud({
45
46
  scale: scale,
46
47
  rotation: [0, 0, 0]
47
48
  }, /*#__PURE__*/React.createElement("meshStandardMaterial", {
48
- map: texture,
49
+ map: cloudTexture,
49
50
  transparent: true,
50
51
  opacity: scale / 6 * density * opacity,
51
52
  depthTest: false
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),n=require("three"),t=require("three-stdlib"),s=require("../helpers/environment-assets.cjs.js");function a(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)}var o=a(e);exports.Environment=function({background:e=!1,files:a=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:i="",preset:u,scene:c,extensions:p}){if(u){if(!(u in s.presetsObj))throw new Error("Preset must be one of: "+Object.keys(s.presetsObj).join(", "));a=s.presetsObj[u],i="https://rawcdn.githack.com/pmndrs/drei-assets/aa3600359ba664d546d05821bcbca42013587df2/hdri/"}const b=r.useThree((({scene:e})=>e)),d=Array.isArray(a),f=d?n.CubeTextureLoader:t.RGBELoader,g=r.useLoader(f,d?[a]:a,(e=>{e.setPath(i),null==e.setDataType||e.setDataType(n.FloatType),p&&p(e)})),l=d?g[0]:g;return l.mapping=n.EquirectangularReflectionMapping,o.useLayoutEffect((()=>{const r=c?c.background:b.background,n=c?c.environment:b.environment;return c?(c.environment=l,e&&(c.background=l)):(b.environment=l,e&&(b.background=l)),()=>{c?(c.environment=n,c.background=r):(b.environment=n,b.background=r),l.dispose()}}),[l,e,c]),null};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),n=require("three"),t=require("three-stdlib"),s=require("../helpers/environment-assets.cjs.js");function a(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)}var o=a(e);exports.Environment=function({background:e=!1,files:a=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:i="",preset:u,scene:c,extensions:p}){if(u){if(!(u in s.presetsObj))throw new Error("Preset must be one of: "+Object.keys(s.presetsObj).join(", "));a=s.presetsObj[u],i="https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/"}const b=r.useThree((({scene:e})=>e)),d=Array.isArray(a),f=d?n.CubeTextureLoader:t.RGBELoader,g=r.useLoader(f,d?[a]:a,(e=>{e.setPath(i),null==e.setDataType||e.setDataType(n.FloatType),p&&p(e)})),l=d?g[0]:g;return l.mapping=n.EquirectangularReflectionMapping,o.useLayoutEffect((()=>{const r=c?c.background:b.background,n=c?c.environment:b.environment;return c?(c.environment=l,e&&(c.background=l)):(b.environment=l,e&&(b.background=l)),()=>{c?(c.environment=n,c.background=r):(b.environment=n,b.background=r),l.dispose()}}),[l,e,c]),null};
@@ -4,7 +4,7 @@ import { FloatType, EquirectangularReflectionMapping, CubeTextureLoader } from '
4
4
  import { RGBELoader } from 'three-stdlib';
5
5
  import { presetsObj } from '../helpers/environment-assets.js';
6
6
 
7
- const CUBEMAP_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/aa3600359ba664d546d05821bcbca42013587df2';
7
+ const CUBEMAP_ROOT = 'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/';
8
8
  function Environment({
9
9
  background = false,
10
10
  files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
@@ -19,7 +19,7 @@ function Environment({
19
19
  }
20
20
 
21
21
  files = presetsObj[preset];
22
- path = CUBEMAP_ROOT + '/hdri/';
22
+ path = CUBEMAP_ROOT;
23
23
  }
24
24
 
25
25
  const defaultScene = useThree(({
package/core/Image.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("three"),t=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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)}var s=c(e),l=i(r),u=i(n);const v=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0},"\n varying vec2 vUv;\n void main() {\n gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n vUv = uv;\n }\n","\n // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n varying vec2 vUv;\n uniform vec2 scale;\n uniform vec2 imageBounds;\n uniform vec3 color;\n uniform sampler2D map;\n uniform float zoom;\n uniform float grayscale;\n const vec3 luma = vec3(.299, 0.587, 0.114);\n vec4 toGrayscale(vec4 color, float intensity) {\n return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n }\n vec2 aspect(vec2 size) {\n return size / min(size.x, size.y);\n }\n void main() {\n vec2 s = aspect(scale);\n vec2 i = aspect(imageBounds);\n float rs = s.x / s.y;\n float ri = i.x / i.y;\n vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n vec2 uv = vUv * s / new + offset;\n vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);\n }\n"),m=l.forwardRef((({children:e,color:r,segments:n=1,scale:a=1,zoom:c=1,grayscale:i=0,url:u,...m},f)=>{t.extend({ImageMaterial:v});const g=o.useTexture(u),y=Array.isArray(a)?[a[0],a[1]]:[a,a],d=[g.image.width,g.image.height];return l.createElement("mesh",s.default({ref:f,scale:a},m),l.createElement("planeGeometry",{args:[1,1,n,n]}),l.createElement("imageMaterial",{color:r,map:g,zoom:c,grayscale:i,scale:y,imageBounds:d}),e)}));exports.Image=m;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("three"),t=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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)}var s=c(e),l=i(r),u=i(n);const v=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0},"\n varying vec2 vUv;\n void main() {\n gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n vUv = uv;\n }\n","\n // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n varying vec2 vUv;\n uniform vec2 scale;\n uniform vec2 imageBounds;\n uniform vec3 color;\n uniform sampler2D map;\n uniform float zoom;\n uniform float grayscale;\n const vec3 luma = vec3(.299, 0.587, 0.114);\n vec4 toGrayscale(vec4 color, float intensity) {\n return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n }\n vec2 aspect(vec2 size) {\n return size / min(size.x, size.y);\n }\n void main() {\n vec2 s = aspect(scale);\n vec2 i = aspect(imageBounds);\n float rs = s.x / s.y;\n float ri = i.x / i.y;\n vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n vec2 uv = vUv * s / new + offset;\n vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);\n \n #include <tonemapping_fragment>\n #include <encodings_fragment>\n }\n"),m=l.forwardRef((({children:e,color:r,segments:n=1,scale:a=1,zoom:c=1,grayscale:i=0,url:u,toneMapped:m,...f},g)=>{t.extend({ImageMaterial:v});const d=o.useTexture(u),y=Array.isArray(a)?[a[0],a[1]]:[a,a],p=[d.image.width,d.image.height];return l.createElement("mesh",s.default({ref:g,scale:a},f),l.createElement("planeGeometry",{args:[1,1,n,n]}),l.createElement("imageMaterial",{color:r,map:d,zoom:c,grayscale:i,scale:y,imageBounds:p,toneMapped:m}),e)}));exports.Image=m;
package/core/Image.d.ts CHANGED
@@ -7,6 +7,7 @@ export declare type ImageProps = JSX.IntrinsicElements['mesh'] & {
7
7
  color?: Color;
8
8
  zoom?: number;
9
9
  grayscale?: number;
10
+ toneMapped?: boolean;
10
11
  url: string;
11
12
  };
12
13
  declare type ImageMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
@@ -48,6 +49,7 @@ export declare const Image: React.ForwardRefExoticComponent<Pick<Omit<import("@r
48
49
  color?: Color | undefined;
49
50
  zoom?: number | undefined;
50
51
  grayscale?: number | undefined;
52
+ toneMapped?: boolean | undefined;
51
53
  url: string;
52
- }, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "zoom" | "material" | "url" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "segments" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
54
+ }, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "zoom" | "material" | "url" | "toneMapped" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "segments" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
53
55
  export {};
package/core/Image.js CHANGED
@@ -48,6 +48,9 @@ const ImageMaterialImpl = shaderMaterial({
48
48
  vec2 uv = vUv * s / new + offset;
49
49
  vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);
50
50
  gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);
51
+
52
+ #include <tonemapping_fragment>
53
+ #include <encodings_fragment>
51
54
  }
52
55
  `);
53
56
  const Image = /*#__PURE__*/React.forwardRef(({
@@ -58,6 +61,7 @@ const Image = /*#__PURE__*/React.forwardRef(({
58
61
  zoom = 1,
59
62
  grayscale = 0,
60
63
  url,
64
+ toneMapped,
61
65
  ...props
62
66
  }, ref) => {
63
67
  extend({
@@ -77,7 +81,8 @@ const Image = /*#__PURE__*/React.forwardRef(({
77
81
  zoom: zoom,
78
82
  grayscale: grayscale,
79
83
  scale: planeBounds,
80
- imageBounds: imageBounds
84
+ imageBounds: imageBounds,
85
+ toneMapped: toneMapped
81
86
  }), children);
82
87
  });
83
88
 
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),i=require("../materials/BlurPass.cjs.js"),o=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,debug:f=0,distortion:x=1,mixContrast:M=1,distortionMap:S,reflectorOffset:T=0,...b},y)=>{const w=a.useThree((({gl:e})=>e)),g=a.useThree((({camera:e})=>e)),R=a.useThree((({scene:e})=>e)),v=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,j=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[B]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Matrix4)),[U]=d.useState((()=>new r.Vector3(0,0,-1))),[E]=d.useState((()=>new r.Vector4)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Matrix4)),[I]=d.useState((()=>new r.PerspectiveCamera)),C=d.useCallback((()=>{var e;const t=j.current.parent||(null==(e=j.current)?void 0:e.__r3f.parent);if(!t)return;if(_.setFromMatrixPosition(t.matrixWorld),O.setFromMatrixPosition(g.matrixWorld),P.extractRotation(t.matrixWorld),B.set(0,0,1),B.applyMatrix4(P),_.addScaledVector(B,T),V.subVectors(_,O),V.dot(B)>0)return;V.reflect(B).negate(),V.add(_),P.extractRotation(g.matrixWorld),U.set(0,0,-1),U.applyMatrix4(P),U.add(O),W.subVectors(_,U),W.reflect(B).negate(),W.add(_),I.position.copy(V),I.up.set(0,1,0),I.up.applyMatrix4(P),I.up.reflect(B),I.lookAt(W),I.far=g.far,I.updateMatrixWorld(),I.projectionMatrix.copy(g.projectionMatrix),q.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),q.multiply(I.projectionMatrix),q.multiply(I.matrixWorldInverse),q.multiply(t.matrixWorld),D.setFromNormalAndCoplanarPoint(B,_),D.applyMatrix4(I.matrixWorldInverse),E.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const r=I.projectionMatrix;F.x=(Math.sign(E.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(E.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],E.multiplyScalar(2/E.dot(F)),r.elements[2]=E.x,r.elements[6]=E.y,r.elements[10]=E.z+1,r.elements[14]=E.w}),[g,T]),[k,L,z,A]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,encoding:w.outputEncoding},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new i.BlurPass({gl:w,resolution:n,width:o[0],height:o[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:q,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:v,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,debug:f,distortion:x,distortionMap:S,mixContrast:M,"defines-USE_BLUR":v?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":S?"":void 0}]}),[w,o,q,n,h,v,e,t,s,l,p,m,f,x,S,M]);return a.useFrame((()=>{var e;const t=j.current.parent||(null==(e=j.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;C(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(k),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(R,I),v&&z.render(w,k,L),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+A["defines-USE_BLUR"]+A["defines-USE_DEPTH"]+A["defines-USE_DISTORTION"],ref:c.default([j,y])},A,b))}));exports.MeshReflectorMaterial=p;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),i=require("../materials/BlurPass.cjs.js"),o=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,distortion:f=1,mixContrast:x=1,distortionMap:M,reflectorOffset:S=0,...T},y)=>{const w=a.useThree((({gl:e})=>e)),b=a.useThree((({camera:e})=>e)),g=a.useThree((({scene:e})=>e)),R=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,v=d.useRef(null),[j]=d.useState((()=>new r.Plane)),[D]=d.useState((()=>new r.Vector3)),[B]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Matrix4)),[P]=d.useState((()=>new r.Vector3(0,0,-1))),[U]=d.useState((()=>new r.Vector4)),[E]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Vector4)),[F]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.PerspectiveCamera)),I=d.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(B.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(b.matrixWorld),O.extractRotation(t.matrixWorld),D.set(0,0,1),D.applyMatrix4(O),B.addScaledVector(D,S),E.subVectors(B,_),E.dot(D)>0)return;E.reflect(D).negate(),E.add(B),O.extractRotation(b.matrixWorld),P.set(0,0,-1),P.applyMatrix4(O),P.add(_),V.subVectors(B,P),V.reflect(D).negate(),V.add(B),q.position.copy(E),q.up.set(0,1,0),q.up.applyMatrix4(O),q.up.reflect(D),q.lookAt(V),q.far=b.far,q.updateMatrixWorld(),q.projectionMatrix.copy(b.projectionMatrix),F.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),F.multiply(q.projectionMatrix),F.multiply(q.matrixWorldInverse),F.multiply(t.matrixWorld),j.setFromNormalAndCoplanarPoint(D,B),j.applyMatrix4(q.matrixWorldInverse),U.set(j.normal.x,j.normal.y,j.normal.z,j.constant);const r=q.projectionMatrix;W.x=(Math.sign(U.x)+r.elements[8])/r.elements[0],W.y=(Math.sign(U.y)+r.elements[9])/r.elements[5],W.z=-1,W.w=(1+r.elements[10])/r.elements[14],U.multiplyScalar(2/U.dot(W)),r.elements[2]=U.x,r.elements[6]=U.y,r.elements[10]=U.z+1,r.elements[14]=U.w}),[b,S]),[C,k,L,z]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,encoding:w.outputEncoding},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new i.BlurPass({gl:w,resolution:n,width:o[0],height:o[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:F,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:R,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,distortion:f,distortionMap:M,mixContrast:x,"defines-USE_BLUR":R?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0}]}),[w,o,F,n,h,R,e,t,s,l,p,m,f,M,x]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;I(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(C),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(g,q),R&&L.render(w,C,k),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:c.default([v,y])},z,T))}));exports.MeshReflectorMaterial=p;
@@ -11,7 +11,6 @@ export declare type Props = JSX.IntrinsicElements['meshStandardMaterial'] & {
11
11
  maxDepthThreshold?: number;
12
12
  depthScale?: number;
13
13
  depthToBlurRatioBias?: number;
14
- debug?: number;
15
14
  distortionMap?: Texture;
16
15
  distortion?: number;
17
16
  mixContrast?: number;
@@ -24,4 +23,4 @@ declare global {
24
23
  }
25
24
  }
26
25
  }
27
- export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "transparent" | "fog" | "blur" | "opacity" | "precision" | "alphaTest" | "alphaToCoverage" | "alphaWrite" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "resolution" | "wireframe" | "wireframeLinewidth" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "flatShading" | "isMeshStandardMaterial" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "mixContrast" | "distortionMap" | "reflectorOffset"> & React.RefAttributes<MeshReflectorMaterialImpl>>;
26
+ export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "transparent" | "fog" | "blur" | "opacity" | "precision" | "alphaTest" | "alphaToCoverage" | "alphaWrite" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "resolution" | "wireframe" | "wireframeLinewidth" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "flatShading" | "isMeshStandardMaterial" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "distortion" | "mixContrast" | "distortionMap" | "reflectorOffset"> & React.RefAttributes<MeshReflectorMaterialImpl>>;
@@ -19,7 +19,6 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
19
19
  depthScale = 0,
20
20
  depthToBlurRatioBias = 0.25,
21
21
  mirror = 0,
22
- debug = 0,
23
22
  distortion = 1,
24
23
  mixContrast = 1,
25
24
  distortionMap,
@@ -142,7 +141,6 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
142
141
  depthScale,
143
142
  depthToBlurRatioBias,
144
143
  transparent: true,
145
- debug,
146
144
  distortion,
147
145
  distortionMap,
148
146
  mixContrast,
@@ -151,7 +149,7 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
151
149
  'defines-USE_DISTORTION': distortionMap ? '' : undefined
152
150
  };
153
151
  return [fbo1, fbo2, blurpass, reflectorProps];
154
- }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap, mixContrast]);
152
+ }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, distortion, distortionMap, mixContrast]);
155
153
  useFrame(() => {
156
154
  var _materialRef$current2;
157
155
 
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 a=n(e),i=o(r),l=o(t);class c extends i.ShaderMaterial{constructor(){super({transparent:!0,uniforms:{size:{value:1}},vertexShader:i.ShaderLib.points.vertexShader,fragmentShader:"\n varying vec3 vColor;\n void main() {\n vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n float r = dot(cxy, cxy);\n float delta = fwidth(r);\n vec3 color = vColor;\n #ifdef TONE_MAPPING\n color = toneMapping(color);\n #endif\n gl_FragColor = linearToOutputTexel(vec4(color, 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r)));\n }",vertexColors:!0})}get scale(){return this.uniforms.size.value}set scale(e){this.uniforms.size.value=e}}const u=l.forwardRef(((e,r)=>{const[t]=l.useState((()=>new c));return l.createElement("primitive",a.default({object:t,ref:r,attach:"material"},e))}));exports.PointMaterial=u,exports.PointMaterialImpl=c;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 o=n(e),i=a(t),l=a(r);class c extends i.ShaderMaterial{constructor(){super({transparent:!0,uniforms:{size:{value:1}},vertexShader:i.ShaderLib.points.vertexShader,fragmentShader:"\n varying vec3 vColor;\n void main() {\n vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n float r = dot(cxy, cxy);\n float delta = fwidth(r);\n vec3 color = vColor;\n gl_FragColor = vec4(color, 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r));\n\n #include <tonemapping_fragment>\n\t #include <encodings_fragment>\n }",vertexColors:!0})}get scale(){return this.uniforms.size.value}set scale(e){this.uniforms.size.value=e}}const s=l.forwardRef(((e,t)=>{const[r]=l.useState((()=>new c));return l.createElement("primitive",o.default({object:r,ref:t,attach:"material"},e))}));exports.PointMaterial=s,exports.PointMaterialImpl=c;
@@ -19,10 +19,10 @@ class PointMaterialImpl extends THREE.ShaderMaterial {
19
19
  float r = dot(cxy, cxy);
20
20
  float delta = fwidth(r);
21
21
  vec3 color = vColor;
22
- #ifdef TONE_MAPPING
23
- color = toneMapping(color);
24
- #endif
25
- gl_FragColor = linearToOutputTexel(vec4(color, 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r)));
22
+ gl_FragColor = vec4(color, 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r));
23
+
24
+ #include <tonemapping_fragment>
25
+ #include <encodings_fragment>
26
26
  }`,
27
27
  vertexColors: true
28
28
  });
@@ -26,4 +26,4 @@ declare global {
26
26
  }
27
27
  }
28
28
  }
29
- export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "mixContrast" | "distortionMap"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
29
+ export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "distortion" | "mixContrast" | "distortionMap" | "debug"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
package/core/Stars.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e);class n extends r.ShaderMaterial{constructor(){super({uniforms:{time:{value:0},fade:{value:1}},vertexShader:"\n uniform float time;\n attribute float size;\n varying vec3 vColor;\n void main() {\n vColor = color;\n vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);\n gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(mvPosition.x + 2.0 * time + 100.0));\n gl_Position = projectionMatrix * mvPosition;\n }",fragmentShader:"\n uniform sampler2D pointTexture;\n uniform float fade;\n varying vec3 vColor;\n void main() {\n float opacity = 1.0;\n if (fade == 1.0) {\n float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));\n }\n gl_FragColor = vec4(vColor, opacity);\n }"})}}const i=e=>(new r.Vector3).setFromSpherical(new r.Spherical(e,Math.acos(1-2*Math.random()),2*Math.random()*Math.PI)),c=o.forwardRef((({radius:e=100,depth:a=50,count:c=5e3,saturation:s=0,factor:u=4,fade:l=!1},f)=>{const m=o.useRef(),[d,v,p]=o.useMemo((()=>{const t=[],o=[],n=Array.from({length:c},(()=>(.5+.5*Math.random())*u)),l=new r.Color;let f=e+a;const m=a/c;for(let e=0;e<c;e++)f-=m*Math.random(),t.push(...i(f).toArray()),l.setHSL(e/c,s,.9),o.push(l.r,l.g,l.b);return[new Float32Array(t),new Float32Array(o),new Float32Array(n)]}),[c,a,u,e,s]);t.useFrame((e=>m.current&&(m.current.uniforms.time.value=e.clock.getElapsedTime())));const[b]=o.useState((()=>new n));return o.createElement("points",{ref:f},o.createElement("bufferGeometry",{attach:"geometry"},o.createElement("bufferAttribute",{attachObject:["attributes","position"],args:[d,3]}),o.createElement("bufferAttribute",{attachObject:["attributes","color"],args:[v,3]}),o.createElement("bufferAttribute",{attachObject:["attributes","size"],args:[p,1]})),o.createElement("primitive",{dispose:void 0,ref:m,object:b,attach:"material",blending:r.AdditiveBlending,"uniforms-fade-value":l,transparent:!0,vertexColors:!0}))}));exports.Stars=c;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three");function n(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 a=n(e);class o extends r.ShaderMaterial{constructor(){super({uniforms:{time:{value:0},fade:{value:1}},vertexShader:"\n uniform float time;\n attribute float size;\n varying vec3 vColor;\n void main() {\n vColor = color;\n vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);\n gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(mvPosition.x + 2.0 * time + 100.0));\n gl_Position = projectionMatrix * mvPosition;\n }",fragmentShader:"\n uniform sampler2D pointTexture;\n uniform float fade;\n varying vec3 vColor;\n void main() {\n float opacity = 1.0;\n if (fade == 1.0) {\n float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));\n }\n gl_FragColor = vec4(vColor, opacity);\n\n #include <tonemapping_fragment>\n\t #include <encodings_fragment>\n }"})}}const i=e=>(new r.Vector3).setFromSpherical(new r.Spherical(e,Math.acos(1-2*Math.random()),2*Math.random()*Math.PI)),c=a.forwardRef((({radius:e=100,depth:n=50,count:c=5e3,saturation:s=0,factor:u=4,fade:l=!1},f)=>{const m=a.useRef(),[d,v,p]=a.useMemo((()=>{const t=[],a=[],o=Array.from({length:c},(()=>(.5+.5*Math.random())*u)),l=new r.Color;let f=e+n;const m=n/c;for(let e=0;e<c;e++)f-=m*Math.random(),t.push(...i(f).toArray()),l.setHSL(e/c,s,.9),a.push(l.r,l.g,l.b);return[new Float32Array(t),new Float32Array(a),new Float32Array(o)]}),[c,n,u,e,s]);t.useFrame((e=>m.current&&(m.current.uniforms.time.value=e.clock.getElapsedTime())));const[b]=a.useState((()=>new o));return a.createElement("points",{ref:f},a.createElement("bufferGeometry",{attach:"geometry"},a.createElement("bufferAttribute",{attachObject:["attributes","position"],args:[d,3]}),a.createElement("bufferAttribute",{attachObject:["attributes","color"],args:[v,3]}),a.createElement("bufferAttribute",{attachObject:["attributes","size"],args:[p,1]})),a.createElement("primitive",{dispose:void 0,ref:m,object:b,attach:"material",blending:r.AdditiveBlending,"uniforms-fade-value":l,transparent:!0,vertexColors:!0}))}));exports.Stars=c;
package/core/Stars.js CHANGED
@@ -38,6 +38,9 @@ class StarfieldMaterial extends ShaderMaterial {
38
38
  opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
39
39
  }
40
40
  gl_FragColor = vec4(vColor, opacity);
41
+
42
+ #include <tonemapping_fragment>
43
+ #include <encodings_fragment>
41
44
  }`
42
45
  });
43
46
  }
package/core/Text.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("troika-three-text"),n=require("@react-three/fiber");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 o=u(e),a=c(t);const i=a.forwardRef((({anchorX:e="center",anchorY:t="middle",children:u,onSync:c,...i},f)=>{const s=n.useThree((({invalidate:e})=>e)),[l]=a.useState((()=>new r.Text)),[d,b]=a.useMemo((()=>{const e=[];let t="";return a.Children.forEach(u,(r=>{"string"==typeof r||"number"==typeof r?t+=r:e.push(r)})),[e,t]}),[u]);return a.useLayoutEffect((()=>{l.sync((()=>{s(),c&&c(l)}))})),a.useEffect((()=>()=>l.dispose()),[l]),a.createElement("primitive",o.default({object:l,ref:f,text:b,anchorX:e,anchorY:t},i),d)}));exports.Text=i;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("troika-three-text"),n=require("@react-three/fiber"),o=require("suspend-react");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 a=u(e),i=c(t);const f=i.forwardRef((({anchorX:e="center",anchorY:t="middle",font:u,children:c,onSync:f,...s},d)=>{const l=n.useThree((({invalidate:e})=>e)),[p]=i.useState((()=>new r.Text)),[h,b]=i.useMemo((()=>{const e=[];let t="";return i.Children.forEach(c,(r=>{"string"==typeof r||"number"==typeof r?t+=r:e.push(r)})),[e,t]}),[c]);return o.suspend((()=>new Promise((e=>r.preloadFont({font:u,characters:b},e)))),["troika-text",u,b]),i.useLayoutEffect((()=>{p.sync((()=>{l(),f&&f(p)}))})),i.useEffect((()=>()=>p.dispose()),[p]),i.createElement("primitive",a.default({object:p,ref:d,font:u,text:b,anchorX:e,anchorY:t},s),h)}));exports.Text=f;
package/core/Text.js CHANGED
@@ -1,12 +1,14 @@
1
1
  import _extends from '@babel/runtime/helpers/esm/extends';
2
2
  import * as React from 'react';
3
- import { Text as Text$1 } from 'troika-three-text';
3
+ import { Text as Text$1, preloadFont } from 'troika-three-text';
4
4
  import { useThree } from '@react-three/fiber';
5
+ import { suspend } from 'suspend-react';
5
6
 
6
7
  // eslint-disable-next-line prettier/prettier
7
8
  const Text = /*#__PURE__*/React.forwardRef(({
8
9
  anchorX = 'center',
9
10
  anchorY = 'middle',
11
+ font,
10
12
  children,
11
13
  onSync,
12
14
  ...props
@@ -27,6 +29,10 @@ const Text = /*#__PURE__*/React.forwardRef(({
27
29
  });
28
30
  return [n, t];
29
31
  }, [children]);
32
+ suspend(() => new Promise(res => preloadFont({
33
+ font,
34
+ characters: text
35
+ }, res)), ['troika-text', font, text]);
30
36
  React.useLayoutEffect(() => void troikaMesh.sync(() => {
31
37
  invalidate();
32
38
  if (onSync) onSync(troikaMesh);
@@ -37,6 +43,7 @@ const Text = /*#__PURE__*/React.forwardRef(({
37
43
  return /*#__PURE__*/React.createElement("primitive", _extends({
38
44
  object: troikaMesh,
39
45
  ref: ref,
46
+ font: font,
40
47
  text: text,
41
48
  anchorX: anchorX,
42
49
  anchorY: anchorY
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("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),c=require("./Edges.cjs.js"),n=require("./OrthographicCamera.cjs.js"),p=require("./PerspectiveCamera.cjs.js"),l=require("./CubeCamera.cjs.js"),x=require("./DeviceOrientationControls.cjs.js"),q=require("./FlyControls.cjs.js"),d=require("./MapControls.cjs.js"),C=require("./OrbitControls.cjs.js"),h=require("./TrackballControls.cjs.js"),m=require("./ArcballControls.cjs.js"),B=require("./TransformControls.cjs.js"),b=require("./PointerLockControls.cjs.js"),M=require("./FirstPersonControls.cjs.js"),P=require("./GizmoHelper.cjs.js"),S=require("./GizmoViewcube.cjs.js"),f=require("./GizmoViewport.cjs.js"),T=require("./useCubeTexture.cjs.js"),g=require("./useFBX.cjs.js"),v=require("./useGLTF.cjs.js"),L=require("./useProgress.cjs.js"),A=require("./useTexture.cjs.js"),G=require("./useKTX2.cjs.js"),k=require("./Stats.cjs.js"),D=require("./useDepthBuffer.cjs.js"),F=require("./useAspect.cjs.js"),w=require("./useCamera.cjs.js"),z=require("./useDetectGPU.cjs.js"),I=require("./useHelper.cjs.js"),O=require("./useBVH.cjs.js"),E=require("./useContextBridge.cjs.js"),R=require("./useAnimations.cjs.js"),y=require("./useFBO.cjs.js"),H=require("./useIntersect.cjs.js"),V=require("./CurveModifier.cjs.js"),Q=require("./MeshDistortMaterial.cjs.js"),X=require("./MeshWobbleMaterial.cjs.js"),K=require("./MeshReflectorMaterial.cjs.js"),W=require("./PointMaterial.cjs.js"),N=require("./shaderMaterial.cjs.js"),U=require("./softShadows.cjs.js"),_=require("./shapes.cjs.js"),J=require("./RoundedBox.cjs.js"),Y=require("./ScreenQuad.cjs.js"),Z=require("./Center.cjs.js"),$=require("./Bounds.cjs.js"),ee=require("./CameraShake.cjs.js"),re=require("./Float.cjs.js"),se=require("./Stage.cjs.js"),te=require("./Backdrop.cjs.js"),oe=require("./Shadow.cjs.js"),ie=require("./ContactShadows.cjs.js"),ue=require("./Reflector.cjs.js"),ae=require("./SpotLight.cjs.js"),je=require("./Environment.cjs.js"),ce=require("./Sky.cjs.js"),ne=require("./Stars.cjs.js"),pe=require("./Cloud.cjs.js"),le=require("./useMatcapTexture.cjs.js"),xe=require("./useNormalTexture.cjs.js"),qe=require("./Points.cjs.js"),de=require("./Instances.cjs.js"),Ce=require("./Segments.cjs.js"),he=require("./Detailed.cjs.js"),me=require("./Preload.cjs.js"),Be=require("./BakeShadows.cjs.js"),be=require("./meshBounds.cjs.js"),Me=require("./AdaptiveDpr.cjs.js"),Pe=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("use-asset"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=j.Image,exports.Edges=c.Edges,exports.OrthographicCamera=n.OrthographicCamera,exports.PerspectiveCamera=p.PerspectiveCamera,exports.CubeCamera=l.CubeCamera,exports.DeviceOrientationControls=x.DeviceOrientationControls,exports.FlyControls=q.FlyControls,exports.MapControls=d.MapControls,exports.OrbitControls=C.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=m.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=b.PointerLockControls,exports.FirstPersonControls=M.FirstPersonControls,exports.GizmoHelper=P.GizmoHelper,exports.useGizmoContext=P.useGizmoContext,exports.GizmoViewcube=S.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=T.useCubeTexture,exports.useFBX=g.useFBX,exports.useGLTF=v.useGLTF,exports.useProgress=L.useProgress,exports.IsObject=A.IsObject,exports.useTexture=A.useTexture,exports.useKTX2=G.useKTX2,exports.Stats=k.Stats,exports.useDepthBuffer=D.useDepthBuffer,exports.useAspect=F.useAspect,exports.useCamera=w.useCamera,exports.useDetectGPU=z.useDetectGPU,exports.useHelper=I.useHelper,exports.useBVH=O.useBVH,exports.useContextBridge=E.useContextBridge,exports.useAnimations=R.useAnimations,exports.useFBO=y.useFBO,exports.useIntersect=H.useIntersect,exports.CurveModifier=V.CurveModifier,exports.MeshDistortMaterial=Q.MeshDistortMaterial,exports.MeshWobbleMaterial=X.MeshWobbleMaterial,exports.MeshReflectorMaterial=K.MeshReflectorMaterial,exports.PointMaterial=W.PointMaterial,exports.PointMaterialImpl=W.PointMaterialImpl,exports.shaderMaterial=N.shaderMaterial,exports.softShadows=U.softShadows,exports.Box=_.Box,exports.Circle=_.Circle,exports.Cone=_.Cone,exports.Cylinder=_.Cylinder,exports.Dodecahedron=_.Dodecahedron,exports.Extrude=_.Extrude,exports.Icosahedron=_.Icosahedron,exports.Lathe=_.Lathe,exports.Octahedron=_.Octahedron,exports.Plane=_.Plane,exports.Polyhedron=_.Polyhedron,exports.Ring=_.Ring,exports.Sphere=_.Sphere,exports.Tetrahedron=_.Tetrahedron,exports.Torus=_.Torus,exports.TorusKnot=_.TorusKnot,exports.Tube=_.Tube,exports.RoundedBox=J.RoundedBox,exports.ScreenQuad=Y.ScreenQuad,exports.Center=Z.Center,exports.Bounds=$.Bounds,exports.useBounds=$.useBounds,exports.CameraShake=ee.CameraShake,exports.Float=re.Float,exports.Stage=se.Stage,exports.Backdrop=te.Backdrop,exports.Shadow=oe.Shadow,exports.ContactShadows=ie.ContactShadows,exports.Reflector=ue.Reflector,exports.SpotLight=ae.SpotLight,exports.Environment=je.Environment,exports.Sky=ce.Sky,exports.calcPosFromAngles=ce.calcPosFromAngles,exports.Stars=ne.Stars,exports.Cloud=pe.Cloud,exports.useMatcapTexture=le.useMatcapTexture,exports.useNormalTexture=xe.useNormalTexture,exports.Point=qe.Point,exports.Points=qe.Points,exports.PointsBuffer=qe.PointsBuffer,exports.Instance=de.Instance,exports.Instances=de.Instances,exports.Merged=de.Merged,exports.Segment=Ce.Segment,exports.Segments=Ce.Segments,exports.Detailed=he.Detailed,exports.Preload=me.Preload,exports.BakeShadows=Be.BakeShadows,exports.meshBounds=be.meshBounds,exports.AdaptiveDpr=Me.AdaptiveDpr,exports.AdaptiveEvents=Pe.AdaptiveEvents;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),c=require("./Image.cjs.js"),j=require("./Edges.cjs.js"),n=require("./OrthographicCamera.cjs.js"),p=require("./PerspectiveCamera.cjs.js"),l=require("./CubeCamera.cjs.js"),x=require("./DeviceOrientationControls.cjs.js"),q=require("./FlyControls.cjs.js"),d=require("./MapControls.cjs.js"),C=require("./OrbitControls.cjs.js"),h=require("./TrackballControls.cjs.js"),m=require("./ArcballControls.cjs.js"),B=require("./TransformControls.cjs.js"),b=require("./PointerLockControls.cjs.js"),M=require("./FirstPersonControls.cjs.js"),P=require("./GizmoHelper.cjs.js"),S=require("./GizmoViewcube.cjs.js"),f=require("./GizmoViewport.cjs.js"),T=require("./useCubeTexture.cjs.js"),g=require("./useFBX.cjs.js"),v=require("./useGLTF.cjs.js"),L=require("./useProgress.cjs.js"),A=require("./useTexture.cjs.js"),G=require("./useKTX2.cjs.js"),k=require("./Stats.cjs.js"),D=require("./useDepthBuffer.cjs.js"),F=require("./useAspect.cjs.js"),w=require("./useCamera.cjs.js"),z=require("./useDetectGPU.cjs.js"),I=require("./useHelper.cjs.js"),O=require("./useBVH.cjs.js"),E=require("./useContextBridge.cjs.js"),R=require("./useAnimations.cjs.js"),y=require("./useFBO.cjs.js"),H=require("./useIntersect.cjs.js"),V=require("./CurveModifier.cjs.js"),Q=require("./MeshDistortMaterial.cjs.js"),X=require("./MeshWobbleMaterial.cjs.js"),K=require("./MeshReflectorMaterial.cjs.js"),W=require("./PointMaterial.cjs.js"),N=require("./shaderMaterial.cjs.js"),U=require("./softShadows.cjs.js"),_=require("./shapes.cjs.js"),J=require("./RoundedBox.cjs.js"),Y=require("./ScreenQuad.cjs.js"),Z=require("./Center.cjs.js"),$=require("./Bounds.cjs.js"),ee=require("./CameraShake.cjs.js"),re=require("./Float.cjs.js"),se=require("./Stage.cjs.js"),te=require("./Backdrop.cjs.js"),oe=require("./Shadow.cjs.js"),ie=require("./ContactShadows.cjs.js"),ue=require("./Reflector.cjs.js"),ae=require("./SpotLight.cjs.js"),ce=require("./Environment.cjs.js"),je=require("./Sky.cjs.js"),ne=require("./Stars.cjs.js"),pe=require("./Cloud.cjs.js"),le=require("./useMatcapTexture.cjs.js"),xe=require("./useNormalTexture.cjs.js"),qe=require("./Points.cjs.js"),de=require("./Instances.cjs.js"),Ce=require("./Segments.cjs.js"),he=require("./Detailed.cjs.js"),me=require("./Preload.cjs.js"),Be=require("./BakeShadows.cjs.js"),be=require("./meshBounds.cjs.js"),Me=require("./AdaptiveDpr.cjs.js"),Pe=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=c.Image,exports.Edges=j.Edges,exports.OrthographicCamera=n.OrthographicCamera,exports.PerspectiveCamera=p.PerspectiveCamera,exports.CubeCamera=l.CubeCamera,exports.DeviceOrientationControls=x.DeviceOrientationControls,exports.FlyControls=q.FlyControls,exports.MapControls=d.MapControls,exports.OrbitControls=C.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=m.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=b.PointerLockControls,exports.FirstPersonControls=M.FirstPersonControls,exports.GizmoHelper=P.GizmoHelper,exports.useGizmoContext=P.useGizmoContext,exports.GizmoViewcube=S.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=T.useCubeTexture,exports.useFBX=g.useFBX,exports.useGLTF=v.useGLTF,exports.useProgress=L.useProgress,exports.IsObject=A.IsObject,exports.useTexture=A.useTexture,exports.useKTX2=G.useKTX2,exports.Stats=k.Stats,exports.useDepthBuffer=D.useDepthBuffer,exports.useAspect=F.useAspect,exports.useCamera=w.useCamera,exports.useDetectGPU=z.useDetectGPU,exports.useHelper=I.useHelper,exports.useBVH=O.useBVH,exports.useContextBridge=E.useContextBridge,exports.useAnimations=R.useAnimations,exports.useFBO=y.useFBO,exports.useIntersect=H.useIntersect,exports.CurveModifier=V.CurveModifier,exports.MeshDistortMaterial=Q.MeshDistortMaterial,exports.MeshWobbleMaterial=X.MeshWobbleMaterial,exports.MeshReflectorMaterial=K.MeshReflectorMaterial,exports.PointMaterial=W.PointMaterial,exports.PointMaterialImpl=W.PointMaterialImpl,exports.shaderMaterial=N.shaderMaterial,exports.softShadows=U.softShadows,exports.Box=_.Box,exports.Circle=_.Circle,exports.Cone=_.Cone,exports.Cylinder=_.Cylinder,exports.Dodecahedron=_.Dodecahedron,exports.Extrude=_.Extrude,exports.Icosahedron=_.Icosahedron,exports.Lathe=_.Lathe,exports.Octahedron=_.Octahedron,exports.Plane=_.Plane,exports.Polyhedron=_.Polyhedron,exports.Ring=_.Ring,exports.Sphere=_.Sphere,exports.Tetrahedron=_.Tetrahedron,exports.Torus=_.Torus,exports.TorusKnot=_.TorusKnot,exports.Tube=_.Tube,exports.RoundedBox=J.RoundedBox,exports.ScreenQuad=Y.ScreenQuad,exports.Center=Z.Center,exports.Bounds=$.Bounds,exports.useBounds=$.useBounds,exports.CameraShake=ee.CameraShake,exports.Float=re.Float,exports.Stage=se.Stage,exports.Backdrop=te.Backdrop,exports.Shadow=oe.Shadow,exports.ContactShadows=ie.ContactShadows,exports.Reflector=ue.Reflector,exports.SpotLight=ae.SpotLight,exports.Environment=ce.Environment,exports.Sky=je.Sky,exports.calcPosFromAngles=je.calcPosFromAngles,exports.Stars=ne.Stars,exports.Cloud=pe.Cloud,exports.useMatcapTexture=le.useMatcapTexture,exports.useNormalTexture=xe.useNormalTexture,exports.Point=qe.Point,exports.Points=qe.Points,exports.PointsBuffer=qe.PointsBuffer,exports.Instance=de.Instance,exports.Instances=de.Instances,exports.Merged=de.Merged,exports.Segment=Ce.Segment,exports.Segments=Ce.Segments,exports.Detailed=he.Detailed,exports.Preload=me.Preload,exports.BakeShadows=Be.BakeShadows,exports.meshBounds=be.meshBounds,exports.AdaptiveDpr=Me.AdaptiveDpr,exports.AdaptiveEvents=Pe.AdaptiveEvents;
package/core/index.js CHANGED
@@ -82,13 +82,13 @@ import 'react-merge-refs';
82
82
  import 'three';
83
83
  import 'three-stdlib';
84
84
  import 'troika-three-text';
85
+ import 'suspend-react';
85
86
  import 'lodash.omit';
86
87
  import 'lodash.pick';
87
88
  import 'zustand';
88
89
  import 'stats.js';
89
90
  import '../helpers/useEffectfulState.js';
90
91
  import 'detect-gpu';
91
- import 'use-asset';
92
92
  import 'three-mesh-bvh';
93
93
  import '../materials/BlurPass.js';
94
94
  import '../materials/ConvolutionMaterial.js';
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("detect-gpu"),t=require("use-asset");exports.useDetectGPU=s=>t.useAsset((()=>e.getGPUTier(s)),"useDetectGPU");
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("detect-gpu"),t=require("suspend-react");exports.useDetectGPU=r=>t.suspend((()=>e.getGPUTier(r)),["useDetectGPU"]);
@@ -1,6 +1,6 @@
1
1
  import { getGPUTier } from 'detect-gpu';
2
- import { useAsset } from 'use-asset';
2
+ import { suspend } from 'suspend-react';
3
3
 
4
- const useDetectGPU = props => useAsset(() => getGPUTier(props), 'useDetectGPU');
4
+ const useDetectGPU = props => suspend(() => getGPUTier(props), ['useDetectGPU']);
5
5
 
6
6
  export { useDetectGPU };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./useTexture.cjs.js"),r=require("use-asset");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 s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("@react-three/fiber");var u=s(e);exports.useMatcapTexture=function(e=0,s=1024){const a=r.useAsset((()=>new Promise((async e=>{e(await fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json").then((e=>e.json())))}))),"matcapList"),n=a[0],c=u.useMemo((()=>Object.keys(a).length),[]),i=`https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d/${s}/${`${u.useMemo((()=>"string"==typeof e?e:"number"==typeof e?a[e]:null),[e])||n}${function(e){switch(e){case 64:return"-64px";case 128:return"-128px";case 256:return"-256px";case 512:return"-512px";default:return""}}(s)}.png`}`;return[t.useTexture(i),i,c]};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./useTexture.cjs.js"),r=require("suspend-react");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 s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("@react-three/fiber");var u=s(e);exports.useMatcapTexture=function(e=0,s=1024){const n=r.suspend((()=>fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json").then((e=>e.json()))),["matcapList"]),c=n[0],a=u.useMemo((()=>Object.keys(n).length),[]),i=`https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d/${s}/${`${u.useMemo((()=>"string"==typeof e?e:"number"==typeof e?n[e]:null),[e])||c}${function(e){switch(e){case 64:return"-64px";case 128:return"-128px";case 256:return"-256px";case 512:return"-512px";default:return""}}(s)}.png`}`;return[t.useTexture(i),i,a]};
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { useTexture } from './useTexture.js';
3
- import { useAsset } from 'use-asset';
3
+ import { suspend } from 'suspend-react';
4
4
 
5
5
  function getFormatString(format) {
6
6
  switch (format) {
@@ -24,10 +24,7 @@ function getFormatString(format) {
24
24
  const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json';
25
25
  const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
26
26
  function useMatcapTexture(id = 0, format = 1024) {
27
- const matcapList = useAsset(() => new Promise(async resolve => {
28
- const matcapList = await fetch(LIST_URL).then(res => res.json());
29
- resolve(matcapList);
30
- }), 'matcapList');
27
+ const matcapList = suspend(() => fetch(LIST_URL).then(res => res.json()), ['matcapList']);
31
28
  const DEFAULT_MATCAP = matcapList[0];
32
29
  const numTot = React.useMemo(() => Object.keys(matcapList).length, []);
33
30
  const fileHash = React.useMemo(() => {
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./useTexture.cjs.js"),t=require("three"),s=require("use-asset");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@react-three/fiber");var a=n(e);exports.useNormalTexture=function(e=0,n={}){const{repeat:o=[1,1],anisotropy:u=1,offset:c=[0,0]}=n,i=s.useAsset((()=>new Promise((async e=>{e(await fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json").then((e=>e.json())))}))),"normalsList"),f=a.useMemo((()=>Object.keys(i).length),[]),p=i[0],l=`https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb/normals/${i[e]||p}`,d=r.useTexture(l);return a.useLayoutEffect((()=>{d&&(d.wrapS=d.wrapT=t.RepeatWrapping,d.repeat=new t.Vector2(o[0],o[1]),d.offset=new t.Vector2(c[0],c[1]),d.anisotropy=u)}),[d,u,o,c]),[d,l,f]};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./useTexture.cjs.js"),t=require("three"),s=require("suspend-react");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@react-three/fiber");var a=n(e);exports.useNormalTexture=function(e=0,n={}){const{repeat:o=[1,1],anisotropy:u=1,offset:c=[0,0]}=n,i=s.suspend((()=>fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json").then((e=>e.json()))),["normalsList"]),f=a.useMemo((()=>Object.keys(i).length),[]),p=i[0],d=`https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb/normals/${i[e]||p}`,l=r.useTexture(d);return a.useLayoutEffect((()=>{l&&(l.wrapS=l.wrapT=t.RepeatWrapping,l.repeat=new t.Vector2(o[0],o[1]),l.offset=new t.Vector2(c[0],c[1]),l.anisotropy=u)}),[l,u,o,c]),[l,d,f]};
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { useTexture } from './useTexture.js';
3
3
  import { RepeatWrapping, Vector2 } from 'three';
4
- import { useAsset } from 'use-asset';
4
+ import { suspend } from 'suspend-react';
5
5
 
6
6
  const NORMAL_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb';
7
7
  const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json';
@@ -11,10 +11,7 @@ function useNormalTexture(id = 0, settings = {}) {
11
11
  anisotropy = 1,
12
12
  offset = [0, 0]
13
13
  } = settings;
14
- const normalsList = useAsset(() => new Promise(async resolve => {
15
- const normalsList = await fetch(LIST_URL).then(res => res.json());
16
- resolve(normalsList);
17
- }), 'normalsList');
14
+ const normalsList = suspend(() => fetch(LIST_URL).then(res => res.json()), ['normalsList']);
18
15
  const numTot = React.useMemo(() => Object.keys(normalsList).length, []);
19
16
  const DEFAULT_NORMAL = normalsList[0];
20
17
  const imageName = normalsList[id] || DEFAULT_NORMAL;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.presetsObj={sunset:"venice_sunset_1k.hdr",dawn:"kiara_1_dawn_1k.hdr",night:"dikhololo_night_1k.hdr",warehouse:"empty_warehouse_01_1k.hdr",forest:"forest_slope_1k.hdr",apartment:"lebombo_1k.hdr",studio:"studio_small_03_1k.hdr",city:"potsdamer_platz_1k.hdr",park:"rooitou_park_1k.hdr",lobby:"st_fagans_interior_1k.hdr"};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.presetsObj={sunset:"venice/venice_sunset_1k.hdr",dawn:"kiara/kiara_1_dawn_1k.hdr",night:"dikhololo/dikhololo_night_1k.hdr",warehouse:"empty-wharehouse/empty_warehouse_01_1k.hdr",forest:"forrest-slope/forest_slope_1k.hdr",apartment:"lebombo/lebombo_1k.hdr",studio:"studio-small-3/studio_small_03_1k.hdr",city:"potsdamer-platz/potsdamer_platz_1k.hdr",park:"rooitou/rooitou_park_1k.hdr",lobby:"st-fagans/st_fagans_interior_1k.hdr"};
@@ -1,14 +1,14 @@
1
1
  const presetsObj = {
2
- sunset: 'venice_sunset_1k.hdr',
3
- dawn: 'kiara_1_dawn_1k.hdr',
4
- night: 'dikhololo_night_1k.hdr',
5
- warehouse: 'empty_warehouse_01_1k.hdr',
6
- forest: 'forest_slope_1k.hdr',
7
- apartment: 'lebombo_1k.hdr',
8
- studio: 'studio_small_03_1k.hdr',
9
- city: 'potsdamer_platz_1k.hdr',
10
- park: 'rooitou_park_1k.hdr',
11
- lobby: 'st_fagans_interior_1k.hdr'
2
+ sunset: 'venice/venice_sunset_1k.hdr',
3
+ dawn: 'kiara/kiara_1_dawn_1k.hdr',
4
+ night: 'dikhololo/dikhololo_night_1k.hdr',
5
+ warehouse: 'empty-wharehouse/empty_warehouse_01_1k.hdr',
6
+ forest: 'forrest-slope/forest_slope_1k.hdr',
7
+ apartment: 'lebombo/lebombo_1k.hdr',
8
+ studio: 'studio-small-3/studio_small_03_1k.hdr',
9
+ city: 'potsdamer-platz/potsdamer_platz_1k.hdr',
10
+ park: 'rooitou/rooitou_park_1k.hdr',
11
+ lobby: 'st-fagans/st_fagans_interior_1k.hdr'
12
12
  };
13
13
 
14
14
  export { presetsObj };