@react-three/drei 8.9.0 → 8.10.3
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 +11 -3
- package/core/Cloud.cjs.js +1 -1
- package/core/Cloud.d.ts +2 -1
- package/core/Cloud.js +3 -2
- package/core/Environment.cjs.js +1 -1
- package/core/Environment.js +2 -2
- package/core/Image.cjs.js +1 -1
- package/core/Image.js +3 -0
- package/core/MeshReflectorMaterial.cjs.js +1 -1
- package/core/MeshReflectorMaterial.d.ts +1 -2
- package/core/MeshReflectorMaterial.js +1 -3
- package/core/PointMaterial.cjs.js +1 -1
- package/core/PointMaterial.js +4 -4
- package/core/Reflector.d.ts +1 -1
- package/core/Stars.cjs.js +1 -1
- package/core/Stars.js +3 -0
- package/core/Text.cjs.js +1 -1
- package/core/Text.js +8 -1
- package/core/index.cjs.js +1 -1
- package/core/index.js +1 -1
- package/core/useDetectGPU.cjs.js +1 -1
- package/core/useDetectGPU.js +2 -2
- package/core/useMatcapTexture.cjs.js +1 -1
- package/core/useMatcapTexture.js +2 -5
- package/core/useNormalTexture.cjs.js +1 -1
- package/core/useNormalTexture.js +2 -5
- package/helpers/environment-assets.cjs.js +1 -1
- package/helpers/environment-assets.js +10 -10
- package/index.cjs.js +1 -1
- package/materials/ConvolutionMaterial.cjs.js +1 -1
- package/materials/ConvolutionMaterial.js +2 -0
- package/materials/MeshReflectorMaterial.cjs.js +1 -1
- package/materials/MeshReflectorMaterial.d.ts +0 -3
- package/materials/MeshReflectorMaterial.js +1 -27
- package/materials/SpotLightMaterial.cjs.js +1 -1
- package/materials/SpotLightMaterial.js +3 -0
- package/native/index.cjs.js +1 -1
- package/native/index.js +1 -1
- package/package.json +3 -3
- package/web/index.cjs.js +1 -1
- 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://drei.vercel.app/?path=/story/abstractions-text--text-st)
|
|
432
|
+
[](https://drei.vercel.app/?path=/story/abstractions-text--text-st) 
|
|
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
|
|
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
|
|
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:
|
|
49
|
+
map: cloudTexture,
|
|
49
50
|
transparent: true,
|
|
50
51
|
opacity: scale / 6 * density * opacity,
|
|
51
52
|
depthTest: false
|
package/core/Environment.cjs.js
CHANGED
|
@@ -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://
|
|
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};
|
package/core/Environment.js
CHANGED
|
@@ -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://
|
|
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
|
|
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"),
|
|
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"),c=require("./useTexture.cjs.js");function o(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=o(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:o=1,grayscale:i=0,url:u,...m},f)=>{t.extend({ImageMaterial:v});const g=c.useTexture(u),d=Array.isArray(a)?[a[0],a[1]]:[a,a],y=[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:o,grayscale:i,scale:d,imageBounds:y}),e)}));exports.Image=m;
|
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(({
|
|
@@ -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,
|
|
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" | "
|
|
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,
|
|
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"),
|
|
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;
|
package/core/PointMaterial.js
CHANGED
|
@@ -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
|
-
|
|
23
|
-
|
|
24
|
-
#
|
|
25
|
-
|
|
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
|
});
|
package/core/Reflector.d.ts
CHANGED
|
@@ -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" | "
|
|
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
|
|
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
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
|
|
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"),
|
|
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';
|
package/core/useDetectGPU.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("detect-gpu"),t=require("
|
|
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"]);
|
package/core/useDetectGPU.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getGPUTier } from 'detect-gpu';
|
|
2
|
-
import {
|
|
2
|
+
import { suspend } from 'suspend-react';
|
|
3
3
|
|
|
4
|
-
const useDetectGPU = props =>
|
|
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("
|
|
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]};
|
package/core/useMatcapTexture.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useTexture } from './useTexture.js';
|
|
3
|
-
import {
|
|
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 =
|
|
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("
|
|
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]};
|
package/core/useNormalTexture.js
CHANGED
|
@@ -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 {
|
|
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 =
|
|
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 };
|