@react-three/drei 9.103.0 → 9.104.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -6
- package/core/Environment.cjs.js +1 -1
- package/core/Grid.cjs.js +1 -1
- package/core/Grid.d.ts +1 -0
- package/core/Grid.js +6 -1
- package/core/Stage.cjs.js +1 -1
- package/core/index.cjs.js +1 -1
- package/core/index.js +1 -0
- package/core/useEnvironment.cjs.js +1 -1
- package/core/useEnvironment.js +23 -10
- package/core/useTexture.cjs.js +1 -1
- package/core/useTexture.d.ts +8 -4
- package/core/useTexture.js +14 -3
- package/core/useTrailTexture.cjs.js +1 -1
- package/core/useTrailTexture.js +5 -10
- package/index.cjs.js +1 -1
- package/native/index.cjs.js +1 -1
- package/native/index.js +1 -0
- package/package.json +2 -1
- package/react-three-drei-0.0.0-semantic-release.tgz +0 -0
- package/web/ScrollControls.d.ts +6 -4
- package/web/View.d.ts +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +1 -0
- package/web/pivotControls/AxisArrow.cjs.js +1 -1
- package/web/pivotControls/AxisArrow.js +1 -0
- package/web/pivotControls/AxisRotator.cjs.js +1 -1
- package/web/pivotControls/AxisRotator.js +1 -0
package/README.md
CHANGED
|
@@ -926,6 +926,14 @@ type PivotControlsProps = {
|
|
|
926
926
|
autoTransform?: boolean
|
|
927
927
|
/** Allows you to switch individual axes off */
|
|
928
928
|
activeAxes?: [boolean, boolean, boolean]
|
|
929
|
+
/** Allows you to disable translation via axes arrows */
|
|
930
|
+
disableAxes?: boolean
|
|
931
|
+
/** Allows you to disable translation via axes planes */
|
|
932
|
+
disableSliders?: boolean
|
|
933
|
+
/** Allows you to disable rotation */
|
|
934
|
+
disableRotations?: boolean
|
|
935
|
+
/** Allows you to disable scaling */
|
|
936
|
+
disableScaling?: boolean
|
|
929
937
|
/** RGB colors */
|
|
930
938
|
axisColors?: [string | number, string | number, string | number]
|
|
931
939
|
/** Color of the hovered item */
|
|
@@ -1082,6 +1090,8 @@ export type GridMaterialType = {
|
|
|
1082
1090
|
fadeDistance?: number
|
|
1083
1091
|
/** Fade strength, default: 1 */
|
|
1084
1092
|
fadeStrength?: number
|
|
1093
|
+
/** Fade from camera (1) or origin (0), or somewhere in between, default: camera */
|
|
1094
|
+
fadeFrom?: number
|
|
1085
1095
|
}
|
|
1086
1096
|
|
|
1087
1097
|
export type GridProps = GridMaterialType & {
|
|
@@ -3272,7 +3282,7 @@ function VideoMaterial({ src }) {
|
|
|
3272
3282
|
|
|
3273
3283
|
NB: It's important to wrap `VideoMaterial` into `React.Suspense` since, `useVideoTexture(src)` here will be suspended until the user shares its screen.
|
|
3274
3284
|
|
|
3275
|
-
HLS - useVideoTexture supports .m3u8 HLS manifest via (https://github.com/video-dev/hls.js).
|
|
3285
|
+
HLS - useVideoTexture supports .m3u8 HLS manifest via (https://github.com/video-dev/hls.js).
|
|
3276
3286
|
|
|
3277
3287
|
You can fine-tune via the hls configuration:
|
|
3278
3288
|
|
|
@@ -3281,7 +3291,8 @@ You can fine-tune via the hls configuration:
|
|
|
3281
3291
|
hls: { abrEwmaFastLive: 1.0, abrEwmaSlowLive: 3.0, enableWorker: true }
|
|
3282
3292
|
})
|
|
3283
3293
|
```
|
|
3284
|
-
|
|
3294
|
+
|
|
3295
|
+
> Available options: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
|
|
3285
3296
|
|
|
3286
3297
|
#### useTrailTexture
|
|
3287
3298
|
|
|
@@ -4706,7 +4717,7 @@ gl_FragColor = vec4(vec3(0.), 1.); // Transparent
|
|
|
4706
4717
|
<a href="https://codesandbox.io/s/0c5hv9"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/0c5hv9/screenshot.png" alt="Demo"/></a>
|
|
4707
4718
|
</p>
|
|
4708
4719
|
|
|
4709
|
-
Sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, unless a custom scene has been passed. A selection of [presets](src/helpers/environment-assets.ts) from [HDRI Haven](https://hdrihaven.com/) are available for convenience.
|
|
4720
|
+
Sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, unless a custom scene has been passed. A selection of [presets](src/helpers/environment-assets.ts) from [HDRI Haven](https://hdrihaven.com/) are available for convenience.
|
|
4710
4721
|
|
|
4711
4722
|
```jsx
|
|
4712
4723
|
<Environment
|
|
@@ -4720,16 +4731,33 @@ Sets up a global cubemap, which affects the default `scene.environment`, and opt
|
|
|
4720
4731
|
/>
|
|
4721
4732
|
```
|
|
4722
4733
|
|
|
4723
|
-
The simplest way to use it is to provide a preset. 👉 Note: `preset` property is not meant to be used in production environments and may fail as it relies on CDNs.
|
|
4734
|
+
The simplest way to use it is to provide a preset (linking towards common HDRI Haven assets hosted on github). 👉 Note: `preset` property is not meant to be used in production environments and may fail as it relies on CDNs.
|
|
4735
|
+
|
|
4736
|
+
Current presets are
|
|
4737
|
+
|
|
4738
|
+
- apartment: 'lebombo_1k.hdr'
|
|
4739
|
+
- city: 'potsdamer_platz_1k.hdr'
|
|
4740
|
+
- dawn: 'kiara_1_dawn_1k.hdr'
|
|
4741
|
+
- forest: 'forest_slope_1k.hdr'
|
|
4742
|
+
- lobby: 'st_fagans_interior_1k.hdr'
|
|
4743
|
+
- night: 'dikhololo_night_1k.hdr'
|
|
4744
|
+
- park: 'rooitou_park_1k.hdr'
|
|
4745
|
+
- studio: 'studio_small_03_1k.hdr'
|
|
4746
|
+
- sunset: 'venice_sunset_1k.hdr'
|
|
4747
|
+
- warehouse: 'empty_warehouse_01_1k.hdr'
|
|
4724
4748
|
|
|
4725
4749
|
```jsx
|
|
4726
4750
|
<Environment preset="city" />
|
|
4727
4751
|
```
|
|
4728
4752
|
|
|
4729
|
-
|
|
4753
|
+
Otherwise use the files property. It will use RGBELoader for _.hdr, EXRLoader for _.exr, HDRJPGLoader for [gainmap](https://github.com/MONOGRID/gainmap-js) _.jpg, GainMapLoader for gainmap _.webp, CubeTextureLoader for an array of images. Of all these, gainmap has the smallest footprint.
|
|
4730
4754
|
|
|
4731
4755
|
```jsx
|
|
4732
4756
|
<Environment files="file.hdr" />
|
|
4757
|
+
<Environment files="file.exr" />
|
|
4758
|
+
<Environment files="file.jpg" />
|
|
4759
|
+
<Environment files="file.webp" />
|
|
4760
|
+
<Environment files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
|
|
4733
4761
|
```
|
|
4734
4762
|
|
|
4735
4763
|
You can also use [@pmndrs/assets](https://github.com/pmndrs/assets) to easily self host common assets. Always use dynamic imports to avoid making this part of your main bundle.
|
|
@@ -4766,7 +4794,7 @@ return (
|
|
|
4766
4794
|
<mesh />
|
|
4767
4795
|
```
|
|
4768
4796
|
|
|
4769
|
-
Declarative environment content can also animate with the `frames` prop, the envmap can be live. Give it a low resolution and this will happen at
|
|
4797
|
+
Declarative environment content can also animate with the `frames` prop, the envmap can be live. Give it a low resolution and this will happen at little cost
|
|
4770
4798
|
|
|
4771
4799
|
```jsx
|
|
4772
4800
|
return (
|
package/core/Environment.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("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("./useEnvironment.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var a=c(e),l=s(r);const i=e=>{return(r=e).current&&r.current.isScene?e.current:e;var r};function d(e,r,n,t,u=0){const o=i(r||n),c=o.background,s=o.environment,a=o.backgroundBlurriness||0;return"only"!==e&&(o.environment=t),e&&(o.background=t),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=u),()=>{"only"!==e&&(o.environment=s),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=a)}}function m({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return d(r,e,o,u,t)}),[o,e,u,r,t]),null}function f({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>d(e,r,s,c,t)),[c,e,r,s,t]),null}function b({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:i,scene:b,files:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("./useEnvironment.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var a=c(e),l=s(r);const i=e=>{return(r=e).current&&r.current.isScene?e.current:e;var r};function d(e,r,n,t,u=0){const o=i(r||n),c=o.background,s=o.environment,a=o.backgroundBlurriness||0;return"only"!==e&&(o.environment=t),e&&(o.background=t),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=u),()=>{"only"!==e&&(o.environment=s),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=a)}}function m({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return d(r,e,o,u,t)}),[o,e,u,r,t]),null}function f({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>d(e,r,s,c,t)),[c,e,r,s,t]),null}function b({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:i,scene:b,files:g,path:p,preset:v,extensions:E}){const h=n.useThree((e=>e.gl)),j=n.useThree((e=>e.scene)),k=l.useRef(null),[x]=l.useState((()=>new t.Scene)),y=l.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(o);return e.texture.type=t.HalfFloatType,e}),[o]);l.useLayoutEffect((()=>(1===c&&k.current.update(h,x),d(a,b,j,y.texture,i))),[e,x,y.texture,b,j,a,c,h]);let q=1;return n.useFrame((()=>{(c===1/0||q<c)&&(k.current.update(h,x),q++)})),l.createElement(l.Fragment,null,n.createPortal(l.createElement(l.Fragment,null,e,l.createElement("cubeCamera",{ref:k,args:[r,u,y]}),g||v?l.createElement(f,{background:!0,files:g,preset:v,path:p,extensions:E}):s?l.createElement(m,{background:!0,map:s,extensions:E}):null),x))}function g(e){var r,t,c,s;const i=o.useEnvironment(e),d=e.map||i;l.useMemo((()=>n.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})),[]);const f=l.useMemo((()=>[d]),[d]),b=null==(r=e.ground)?void 0:r.height,g=null==(t=e.ground)?void 0:t.radius,p=null!==(c=null==(s=e.ground)?void 0:s.scale)&&void 0!==c?c:1e3;return l.createElement(l.Fragment,null,l.createElement(m,a.default({},e,{map:d})),l.createElement("groundProjectedEnvImpl",{args:f,scale:p,height:b,radius:g}))}exports.Environment=function(e){return e.ground?l.createElement(g,e):e.map?l.createElement(m,e):e.children?l.createElement(b,e):l.createElement(f,e)},exports.EnvironmentCube=f,exports.EnvironmentMap=m,exports.EnvironmentPortal=b;
|
package/core/Grid.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("@react-three/fiber"),r=require("./shaderMaterial.cjs.js"),t=require("../helpers/constants.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var s=l(e),c=a(n),f=a(o);const d=r.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,cellThickness:.5,sectionThickness:1,cellColor:new f.Color,sectionColor:new f.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new f.Vector3,worldPlanePosition:new f.Vector3},"\n varying vec3 localPosition;\n varying vec4 worldPosition;\n\n uniform vec3 worldCamProjPosition;\n uniform vec3 worldPlanePosition;\n uniform float fadeDistance;\n uniform bool infiniteGrid;\n uniform bool followCamera;\n\n void main() {\n localPosition = position.xzy;\n if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n \n worldPosition = modelMatrix * vec4(localPosition, 1.0);\n if (followCamera) {\n worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n }\n\n gl_Position = projectionMatrix * viewMatrix * worldPosition;\n }\n ",`\n varying vec3 localPosition;\n varying vec4 worldPosition;\n\n uniform vec3 worldCamProjPosition;\n uniform float cellSize;\n uniform float sectionSize;\n uniform vec3 cellColor;\n uniform vec3 sectionColor;\n uniform float fadeDistance;\n uniform float fadeStrength;\n uniform float cellThickness;\n uniform float sectionThickness;\n\n float getGrid(float size, float thickness) {\n vec2 r = localPosition.xz / size;\n vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n float line = min(grid.x, grid.y) + 1.0 - thickness;\n return 1.0 - min(line, 1.0);\n }\n\n void main() {\n float g1 = getGrid(cellSize, cellThickness);\n float g2 = getGrid(sectionSize, sectionThickness);\n\n float dist = distance(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("@react-three/fiber"),r=require("./shaderMaterial.cjs.js"),t=require("../helpers/constants.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var s=l(e),c=a(n),f=a(o);const d=r.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,fadeFrom:1,cellThickness:.5,sectionThickness:1,cellColor:new f.Color,sectionColor:new f.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new f.Vector3,worldPlanePosition:new f.Vector3},"\n varying vec3 localPosition;\n varying vec4 worldPosition;\n\n uniform vec3 worldCamProjPosition;\n uniform vec3 worldPlanePosition;\n uniform float fadeDistance;\n uniform bool infiniteGrid;\n uniform bool followCamera;\n\n void main() {\n localPosition = position.xzy;\n if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n \n worldPosition = modelMatrix * vec4(localPosition, 1.0);\n if (followCamera) {\n worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n }\n\n gl_Position = projectionMatrix * viewMatrix * worldPosition;\n }\n ",`\n varying vec3 localPosition;\n varying vec4 worldPosition;\n\n uniform vec3 worldCamProjPosition;\n uniform float cellSize;\n uniform float sectionSize;\n uniform vec3 cellColor;\n uniform vec3 sectionColor;\n uniform float fadeDistance;\n uniform float fadeStrength;\n uniform float fadeFrom;\n uniform float cellThickness;\n uniform float sectionThickness;\n\n float getGrid(float size, float thickness) {\n vec2 r = localPosition.xz / size;\n vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n float line = min(grid.x, grid.y) + 1.0 - thickness;\n return 1.0 - min(line, 1.0);\n }\n\n void main() {\n float g1 = getGrid(cellSize, cellThickness);\n float g2 = getGrid(sectionSize, sectionThickness);\n\n vec3 from = worldCamProjPosition*vec3(fadeFrom);\n float dist = distance(from, worldPosition.xyz);\n float d = 1.0 - min(dist / fadeDistance, 1.0);\n vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));\n\n gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));\n gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n if (gl_FragColor.a <= 0.0) discard;\n\n #include <tonemapping_fragment>\n #include <${t.version>=154?"colorspace_fragment":"encodings_fragment"}>\n }\n `),m=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:o="#2080ff",cellSize:r=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:a=!1,fadeDistance:m=100,fadeStrength:u=1,fadeFrom:g=1,cellThickness:P=.5,sectionThickness:v=1,side:w=f.BackSide,...C},h)=>{i.extend({GridMaterial:d});const p=c.useRef(null);c.useImperativeHandle(h,(()=>p.current),[]);const x=new f.Plane,j=new f.Vector3(0,1,0),z=new f.Vector3(0,0,0);i.useFrame((e=>{x.setFromNormalAndCoplanarPoint(j,z).applyMatrix4(p.current.matrixWorld);const n=p.current.material,o=n.uniforms.worldCamProjPosition,i=n.uniforms.worldPlanePosition;x.projectPoint(e.camera.position,o.value),i.value.set(0,0,0).applyMatrix4(p.current.matrixWorld)}));const y={cellSize:r,sectionSize:t,cellColor:n,sectionColor:o,cellThickness:P,sectionThickness:v},S={fadeDistance:m,fadeStrength:u,fadeFrom:g,infiniteGrid:a,followCamera:l};return c.createElement("mesh",s.default({ref:p,frustumCulled:!1},C),c.createElement("gridMaterial",s.default({transparent:!0,"extensions-derivatives":!0,side:w},y,S)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=m;
|
package/core/Grid.d.ts
CHANGED
package/core/Grid.js
CHANGED
|
@@ -10,6 +10,7 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
|
|
|
10
10
|
sectionSize: 1,
|
|
11
11
|
fadeDistance: 100,
|
|
12
12
|
fadeStrength: 1,
|
|
13
|
+
fadeFrom: 1,
|
|
13
14
|
cellThickness: 0.5,
|
|
14
15
|
sectionThickness: 1,
|
|
15
16
|
cellColor: /* @__PURE__ */new THREE.Color(),
|
|
@@ -51,6 +52,7 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
|
|
|
51
52
|
uniform vec3 sectionColor;
|
|
52
53
|
uniform float fadeDistance;
|
|
53
54
|
uniform float fadeStrength;
|
|
55
|
+
uniform float fadeFrom;
|
|
54
56
|
uniform float cellThickness;
|
|
55
57
|
uniform float sectionThickness;
|
|
56
58
|
|
|
@@ -65,7 +67,8 @@ const GridMaterial = /* @__PURE__ */shaderMaterial({
|
|
|
65
67
|
float g1 = getGrid(cellSize, cellThickness);
|
|
66
68
|
float g2 = getGrid(sectionSize, sectionThickness);
|
|
67
69
|
|
|
68
|
-
|
|
70
|
+
vec3 from = worldCamProjPosition*vec3(fadeFrom);
|
|
71
|
+
float dist = distance(from, worldPosition.xyz);
|
|
69
72
|
float d = 1.0 - min(dist / fadeDistance, 1.0);
|
|
70
73
|
vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));
|
|
71
74
|
|
|
@@ -87,6 +90,7 @@ const Grid = /* @__PURE__ */React.forwardRef(({
|
|
|
87
90
|
infiniteGrid = false,
|
|
88
91
|
fadeDistance = 100,
|
|
89
92
|
fadeStrength = 1,
|
|
93
|
+
fadeFrom = 1,
|
|
90
94
|
cellThickness = 0.5,
|
|
91
95
|
sectionThickness = 1,
|
|
92
96
|
side = THREE.BackSide,
|
|
@@ -119,6 +123,7 @@ const Grid = /* @__PURE__ */React.forwardRef(({
|
|
|
119
123
|
const uniforms2 = {
|
|
120
124
|
fadeDistance,
|
|
121
125
|
fadeStrength,
|
|
126
|
+
fadeFrom,
|
|
122
127
|
infiniteGrid,
|
|
123
128
|
followCamera
|
|
124
129
|
};
|
package/core/Stage.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),i=require("./Environment.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),i=require("./Environment.cjs.js"),r=require("./ContactShadows.cjs.js"),n=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var r=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,r.get?r:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("./useEnvironment.cjs.js"),require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js"),require("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=l(e),c=u(t);const d={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};function m({radius:e,adjustCamera:t}){const i=s.useBounds();return c.useEffect((()=>{t&&i.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,center:t,adjustCamera:l=!0,intensity:u=.5,shadows:f="contact",environment:p="city",preset:h="rembrandt",...j}){var v,b,g,q,y,E,w,C;const S="string"==typeof h?d[h]:h,[{radius:O,height:z},B]=c.useState({radius:0,width:0,height:0,depth:0}),M=null!==(v=null==f?void 0:f.bias)&&void 0!==v?v:-1e-4,L=null!==(b=null==f?void 0:f.normalBias)&&void 0!==b?b:0,_=null!==(g=null==f?void 0:f.size)&&void 0!==g?g:1024,x=null!==(q=null==f?void 0:f.offset)&&void 0!==q?q:0,P="contact"===f||"contact"===(null==f?void 0:f.type),k="accumulative"===f||"accumulative"===(null==f?void 0:f.type),A={..."object"==typeof f?f:{}},D=p?"string"==typeof p?{preset:p}:p:null,F=c.useCallback((e=>{const{width:i,height:r,depth:n,boundingSphere:a}=e;B({radius:a.radius,width:i,height:r,depth:n}),null!=t&&t.onCentered&&t.onCentered(e)}),[]);return c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],intensity:2*u,castShadow:!!f,"shadow-bias":M,"shadow-normalBias":L,"shadow-mapSize":_}),c.createElement("pointLight",{position:[S.fill[0]*O,S.fill[1]*O,S.fill[2]*O],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!l,clip:!!l,margin:Number(l),observe:!0},j),c.createElement(m,{radius:O,adjustCamera:l}),c.createElement(n.Center,o.default({},t,{position:[0,x/2,0],onCentered:F}),e)),c.createElement("group",{position:[0,-z/2-x/2,0]},P&&c.createElement(r.ContactShadows,o.default({scale:4*O,far:O,blur:2},A)),k&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*O},A),c.createElement(a.RandomizedLight,{amount:null!==(y=A.amount)&&void 0!==y?y:8,radius:null!==(E=A.radius)&&void 0!==E?E:O,ambient:null!==(w=A.ambient)&&void 0!==w?w:.5,intensity:null!==(C=A.intensity)&&void 0!==C?C:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],size:4*O,bias:-M,mapSize:_}))),p&&c.createElement(i.Environment,D))};
|
package/core/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./ScreenSizer.cjs.js"),t=require("./QuadraticBezierLine.cjs.js"),o=require("./CubicBezierLine.cjs.js"),i=require("./CatmullRomLine.cjs.js"),a=require("./Line.cjs.js"),u=require("./PositionalAudio.cjs.js"),c=require("./Text.cjs.js"),n=require("./Text3D.cjs.js"),j=require("./Effects.cjs.js"),p=require("./GradientTexture.cjs.js"),l=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),q=require("./Outlines.cjs.js"),d=require("./Trail.cjs.js"),m=require("./Sampler.cjs.js"),h=require("./ComputedAttribute.cjs.js"),C=require("./Clone.cjs.js"),S=require("./MarchingCubes.cjs.js"),M=require("./Decal.cjs.js"),T=require("./Svg.cjs.js"),P=require("./Gltf.cjs.js"),b=require("./AsciiRenderer.cjs.js"),f=require("./Splat.cjs.js"),B=require("./OrthographicCamera.cjs.js"),g=require("./PerspectiveCamera.cjs.js"),v=require("./CubeCamera.cjs.js"),A=require("./DeviceOrientationControls.cjs.js"),L=require("./FlyControls.cjs.js"),R=require("./MapControls.cjs.js"),G=require("./OrbitControls.cjs.js"),F=require("./TrackballControls.cjs.js"),D=require("./ArcballControls.cjs.js"),E=require("./TransformControls.cjs.js"),k=require("./PointerLockControls.cjs.js"),w=require("./FirstPersonControls.cjs.js"),z=require("./CameraControls.cjs.js"),O=require("./MotionPathControls.cjs.js"),I=require("./GizmoHelper.cjs.js"),y=require("./GizmoViewcube.cjs.js"),H=require("./GizmoViewport.cjs.js"),V=require("./Grid.cjs.js"),W=require("./useCubeTexture.cjs.js"),Q=require("./useFBX.cjs.js"),X=require("./useGLTF.cjs.js"),K=require("./useKTX2.cjs.js"),N=require("./useProgress.cjs.js"),U=require("./useTexture.cjs.js"),_=require("./useVideoTexture.cjs.js"),J=require("./useFont.cjs.js"),Y=require("./useSpriteLoader.cjs.js"),Z=require("./Helper.cjs.js"),$=require("./Stats.cjs.js"),ee=require("./StatsGl.cjs.js"),re=require("./useDepthBuffer.cjs.js"),se=require("./useAspect.cjs.js"),te=require("./useCamera.cjs.js"),oe=require("./useDetectGPU.cjs.js"),ie=require("./useHelper.cjs.js"),ae=require("./useBVH.cjs.js"),ue=require("./useContextBridge.cjs.js"),ce=require("./useAnimations.cjs.js"),ne=require("./useFBO.cjs.js"),je=require("./useIntersect.cjs.js"),pe=require("./useBoxProjectedEnv.cjs.js"),le=require("./BBAnchor.cjs.js"),xe=require("./useTrailTexture.cjs.js"),qe=require("./useCubeCamera.cjs.js"),de=require("./Example.cjs.js"),me=require("./SpriteAnimator.cjs.js"),he=require("./CurveModifier.cjs.js"),Ce=require("./MeshDistortMaterial.cjs.js"),Se=require("./MeshWobbleMaterial.cjs.js"),Me=require("./MeshReflectorMaterial.cjs.js"),Te=require("./MeshRefractionMaterial.cjs.js"),Pe=require("./MeshTransmissionMaterial.cjs.js"),be=require("./MeshDiscardMaterial.cjs.js"),fe=require("./PointMaterial.cjs.js"),Be=require("./shaderMaterial.cjs.js"),ge=require("./softShadows.cjs.js"),ve=require("./shapes.cjs.js"),Ae=require("./RoundedBox.cjs.js"),Le=require("./ScreenQuad.cjs.js"),Re=require("./Center.cjs.js"),Ge=require("./Resize.cjs.js"),Fe=require("./Bounds.cjs.js"),De=require("./CameraShake.cjs.js"),Ee=require("./Float.cjs.js"),ke=require("./Stage.cjs.js"),we=require("./Backdrop.cjs.js"),ze=require("./Shadow.cjs.js"),Oe=require("./Caustics.cjs.js"),Ie=require("./ContactShadows.cjs.js"),ye=require("./AccumulativeShadows.cjs.js"),He=require("./Reflector.cjs.js"),Ve=require("./SpotLight.cjs.js"),We=require("./Environment.cjs.js"),Qe=require("./Lightformer.cjs.js"),Xe=require("./Sky.cjs.js"),Ke=require("./Stars.cjs.js"),Ne=require("./Cloud.cjs.js"),Ue=require("./Sparkles.cjs.js"),_e=require("./useEnvironment.cjs.js"),Je=require("./useMatcapTexture.cjs.js"),Ye=require("./useNormalTexture.cjs.js"),Ze=require("./Wireframe.cjs.js"),$e=require("./ShadowAlpha.cjs.js"),er=require("./Points.cjs.js"),rr=require("./Instances.cjs.js"),sr=require("./Segments.cjs.js"),tr=require("./Detailed.cjs.js"),or=require("./Preload.cjs.js"),ir=require("./BakeShadows.cjs.js"),ar=require("./meshBounds.cjs.js"),ur=require("./AdaptiveDpr.cjs.js"),cr=require("./AdaptiveEvents.cjs.js"),nr=require("./PerformanceMonitor.cjs.js"),jr=require("./RenderTexture.cjs.js"),pr=require("./RenderCubeTexture.cjs.js"),lr=require("./Mask.cjs.js"),xr=require("./Hud.cjs.js"),qr=require("./Fisheye.cjs.js"),dr=require("./MeshPortalMaterial.cjs.js"),mr=require("./calculateScaleFactor.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("three"),require("@react-three/fiber"),require("three-stdlib"),require("suspend-react"),require("../helpers/constants.cjs.js"),require("meshline"),require("camera-controls"),require("maath"),require("zustand"),require("hls.js"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("react-composer"),require("../helpers/deprecated.cjs.js"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("uuid"),require("../materials/WireframeMaterial.cjs.js"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.ScreenSizer=s.ScreenSizer,exports.QuadraticBezierLine=t.QuadraticBezierLine,exports.CubicBezierLine=o.CubicBezierLine,exports.CatmullRomLine=i.CatmullRomLine,exports.Line=a.Line,exports.PositionalAudio=u.PositionalAudio,exports.Text=c.Text,exports.Text3D=n.Text3D,exports.Effects=j.Effects,exports.isWebGL2Available=j.isWebGL2Available,exports.GradientTexture=p.GradientTexture,exports.GradientType=p.GradientType,exports.Image=l.Image,exports.Edges=x.Edges,exports.Outlines=q.Outlines,exports.Trail=d.Trail,exports.useTrail=d.useTrail,exports.Sampler=m.Sampler,exports.useSurfaceSampler=m.useSurfaceSampler,exports.ComputedAttribute=h.ComputedAttribute,exports.Clone=C.Clone,exports.MarchingCube=S.MarchingCube,exports.MarchingCubes=S.MarchingCubes,exports.MarchingPlane=S.MarchingPlane,exports.Decal=M.Decal,exports.Svg=T.Svg,exports.Gltf=P.Gltf,exports.AsciiRenderer=b.AsciiRenderer,exports.Splat=f.Splat,exports.OrthographicCamera=B.OrthographicCamera,exports.PerspectiveCamera=g.PerspectiveCamera,exports.CubeCamera=v.CubeCamera,exports.DeviceOrientationControls=A.DeviceOrientationControls,exports.FlyControls=L.FlyControls,exports.MapControls=R.MapControls,exports.OrbitControls=G.OrbitControls,exports.TrackballControls=F.TrackballControls,exports.ArcballControls=D.ArcballControls,exports.TransformControls=E.TransformControls,exports.PointerLockControls=k.PointerLockControls,exports.FirstPersonControls=w.FirstPersonControls,exports.CameraControls=z.CameraControls,exports.MotionPathControls=O.MotionPathControls,exports.useMotion=O.useMotion,exports.GizmoHelper=I.GizmoHelper,exports.useGizmoContext=I.useGizmoContext,exports.GizmoViewcube=y.GizmoViewcube,exports.GizmoViewport=H.GizmoViewport,exports.Grid=V.Grid,exports.useCubeTexture=W.useCubeTexture,exports.useFBX=Q.useFBX,exports.useGLTF=X.useGLTF,exports.useKTX2=K.useKTX2,exports.useProgress=N.useProgress,exports.IsObject=U.IsObject,exports.useTexture=U.useTexture,exports.useVideoTexture=_.useVideoTexture,exports.useFont=J.useFont,exports.calculateAspectRatio=Y.calculateAspectRatio,exports.getFirstItem=Y.getFirstItem,exports.useSpriteLoader=Y.useSpriteLoader,exports.Helper=Z.Helper,exports.Stats=$.Stats,exports.StatsGl=ee.StatsGl,exports.useDepthBuffer=re.useDepthBuffer,exports.useAspect=se.useAspect,exports.useCamera=te.useCamera,exports.useDetectGPU=oe.useDetectGPU,exports.useHelper=ie.useHelper,exports.Bvh=ae.Bvh,exports.useBVH=ae.useBVH,exports.useContextBridge=ue.useContextBridge,exports.useAnimations=ce.useAnimations,exports.useFBO=ne.useFBO,exports.useIntersect=je.useIntersect,exports.useBoxProjectedEnv=pe.useBoxProjectedEnv,exports.BBAnchor=le.BBAnchor,exports.useTrailTexture=xe.useTrailTexture,exports.useCubeCamera=qe.useCubeCamera,exports.Example=de.Example,exports.SpriteAnimator=me.SpriteAnimator,exports.useSpriteAnimator=me.useSpriteAnimator,exports.CurveModifier=he.CurveModifier,exports.MeshDistortMaterial=Ce.MeshDistortMaterial,exports.MeshWobbleMaterial=Se.MeshWobbleMaterial,exports.MeshReflectorMaterial=Me.MeshReflectorMaterial,exports.MeshRefractionMaterial=Te.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Pe.MeshTransmissionMaterial,exports.MeshDiscardMaterial=be.MeshDiscardMaterial,exports.PointMaterial=fe.PointMaterial,exports.PointMaterialImpl=fe.PointMaterialImpl,exports.shaderMaterial=Be.shaderMaterial,exports.SoftShadows=ge.SoftShadows,exports.Box=ve.Box,exports.Capsule=ve.Capsule,exports.Circle=ve.Circle,exports.Cone=ve.Cone,exports.Cylinder=ve.Cylinder,exports.Dodecahedron=ve.Dodecahedron,exports.Extrude=ve.Extrude,exports.Icosahedron=ve.Icosahedron,exports.Lathe=ve.Lathe,exports.Octahedron=ve.Octahedron,exports.Plane=ve.Plane,exports.Polyhedron=ve.Polyhedron,exports.Ring=ve.Ring,exports.Shape=ve.Shape,exports.Sphere=ve.Sphere,exports.Tetrahedron=ve.Tetrahedron,exports.Torus=ve.Torus,exports.TorusKnot=ve.TorusKnot,exports.Tube=ve.Tube,exports.RoundedBox=Ae.RoundedBox,exports.ScreenQuad=Le.ScreenQuad,exports.Center=Re.Center,exports.Resize=Ge.Resize,exports.Bounds=Fe.Bounds,exports.useBounds=Fe.useBounds,exports.CameraShake=De.CameraShake,exports.Float=Ee.Float,exports.Stage=ke.Stage,exports.Backdrop=we.Backdrop,exports.Shadow=ze.Shadow,exports.Caustics=Oe.Caustics,exports.ContactShadows=Ie.ContactShadows,exports.AccumulativeShadows=ye.AccumulativeShadows,exports.RandomizedLight=ye.RandomizedLight,exports.accumulativeContext=ye.accumulativeContext,exports.Reflector=He.Reflector,exports.SpotLight=Ve.SpotLight,exports.SpotLightShadow=Ve.SpotLightShadow,exports.Environment=We.Environment,exports.EnvironmentCube=We.EnvironmentCube,exports.EnvironmentMap=We.EnvironmentMap,exports.EnvironmentPortal=We.EnvironmentPortal,exports.Lightformer=Qe.Lightformer,exports.Sky=Xe.Sky,exports.calcPosFromAngles=Xe.calcPosFromAngles,exports.Stars=Ke.Stars,exports.Cloud=Ne.Cloud,exports.CloudInstance=Ne.CloudInstance,exports.Clouds=Ne.Clouds,exports.Sparkles=Ue.Sparkles,exports.useEnvironment=_e.useEnvironment,exports.useMatcapTexture=Je.useMatcapTexture,exports.useNormalTexture=Ye.useNormalTexture,exports.Wireframe=Ze.Wireframe,exports.ShadowAlpha=$e.ShadowAlpha,exports.Point=er.Point,exports.Points=er.Points,exports.PointsBuffer=er.PointsBuffer,exports.PositionPoint=er.PositionPoint,exports.Instance=rr.Instance,exports.Instances=rr.Instances,exports.Merged=rr.Merged,exports.Segment=sr.Segment,exports.SegmentObject=sr.SegmentObject,exports.Segments=sr.Segments,exports.Detailed=tr.Detailed,exports.Preload=or.Preload,exports.BakeShadows=ir.BakeShadows,exports.meshBounds=ar.meshBounds,exports.AdaptiveDpr=ur.AdaptiveDpr,exports.AdaptiveEvents=cr.AdaptiveEvents,exports.PerformanceMonitor=nr.PerformanceMonitor,exports.usePerformanceMonitor=nr.usePerformanceMonitor,exports.RenderTexture=jr.RenderTexture,exports.RenderCubeTexture=pr.RenderCubeTexture,exports.Mask=lr.Mask,exports.useMask=lr.useMask,exports.Hud=xr.Hud,exports.Fisheye=qr.Fisheye,exports.MeshPortalMaterial=dr.MeshPortalMaterial,exports.calculateScaleFactor=mr.calculateScaleFactor;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./ScreenSizer.cjs.js"),t=require("./QuadraticBezierLine.cjs.js"),o=require("./CubicBezierLine.cjs.js"),i=require("./CatmullRomLine.cjs.js"),a=require("./Line.cjs.js"),u=require("./PositionalAudio.cjs.js"),c=require("./Text.cjs.js"),n=require("./Text3D.cjs.js"),j=require("./Effects.cjs.js"),p=require("./GradientTexture.cjs.js"),l=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),q=require("./Outlines.cjs.js"),d=require("./Trail.cjs.js"),m=require("./Sampler.cjs.js"),h=require("./ComputedAttribute.cjs.js"),C=require("./Clone.cjs.js"),S=require("./MarchingCubes.cjs.js"),M=require("./Decal.cjs.js"),T=require("./Svg.cjs.js"),P=require("./Gltf.cjs.js"),b=require("./AsciiRenderer.cjs.js"),f=require("./Splat.cjs.js"),g=require("./OrthographicCamera.cjs.js"),B=require("./PerspectiveCamera.cjs.js"),v=require("./CubeCamera.cjs.js"),A=require("./DeviceOrientationControls.cjs.js"),L=require("./FlyControls.cjs.js"),R=require("./MapControls.cjs.js"),G=require("./OrbitControls.cjs.js"),F=require("./TrackballControls.cjs.js"),D=require("./ArcballControls.cjs.js"),E=require("./TransformControls.cjs.js"),k=require("./PointerLockControls.cjs.js"),w=require("./FirstPersonControls.cjs.js"),z=require("./CameraControls.cjs.js"),O=require("./MotionPathControls.cjs.js"),I=require("./GizmoHelper.cjs.js"),y=require("./GizmoViewcube.cjs.js"),H=require("./GizmoViewport.cjs.js"),V=require("./Grid.cjs.js"),W=require("./useCubeTexture.cjs.js"),Q=require("./useFBX.cjs.js"),X=require("./useGLTF.cjs.js"),K=require("./useKTX2.cjs.js"),N=require("./useProgress.cjs.js"),U=require("./useTexture.cjs.js"),_=require("./useVideoTexture.cjs.js"),J=require("./useFont.cjs.js"),Y=require("./useSpriteLoader.cjs.js"),Z=require("./Helper.cjs.js"),$=require("./Stats.cjs.js"),ee=require("./StatsGl.cjs.js"),re=require("./useDepthBuffer.cjs.js"),se=require("./useAspect.cjs.js"),te=require("./useCamera.cjs.js"),oe=require("./useDetectGPU.cjs.js"),ie=require("./useHelper.cjs.js"),ae=require("./useBVH.cjs.js"),ue=require("./useContextBridge.cjs.js"),ce=require("./useAnimations.cjs.js"),ne=require("./useFBO.cjs.js"),je=require("./useIntersect.cjs.js"),pe=require("./useBoxProjectedEnv.cjs.js"),le=require("./BBAnchor.cjs.js"),xe=require("./useTrailTexture.cjs.js"),qe=require("./useCubeCamera.cjs.js"),de=require("./Example.cjs.js"),me=require("./SpriteAnimator.cjs.js"),he=require("./CurveModifier.cjs.js"),Ce=require("./MeshDistortMaterial.cjs.js"),Se=require("./MeshWobbleMaterial.cjs.js"),Me=require("./MeshReflectorMaterial.cjs.js"),Te=require("./MeshRefractionMaterial.cjs.js"),Pe=require("./MeshTransmissionMaterial.cjs.js"),be=require("./MeshDiscardMaterial.cjs.js"),fe=require("./PointMaterial.cjs.js"),ge=require("./shaderMaterial.cjs.js"),Be=require("./softShadows.cjs.js"),ve=require("./shapes.cjs.js"),Ae=require("./RoundedBox.cjs.js"),Le=require("./ScreenQuad.cjs.js"),Re=require("./Center.cjs.js"),Ge=require("./Resize.cjs.js"),Fe=require("./Bounds.cjs.js"),De=require("./CameraShake.cjs.js"),Ee=require("./Float.cjs.js"),ke=require("./Stage.cjs.js"),we=require("./Backdrop.cjs.js"),ze=require("./Shadow.cjs.js"),Oe=require("./Caustics.cjs.js"),Ie=require("./ContactShadows.cjs.js"),ye=require("./AccumulativeShadows.cjs.js"),He=require("./Reflector.cjs.js"),Ve=require("./SpotLight.cjs.js"),We=require("./Environment.cjs.js"),Qe=require("./Lightformer.cjs.js"),Xe=require("./Sky.cjs.js"),Ke=require("./Stars.cjs.js"),Ne=require("./Cloud.cjs.js"),Ue=require("./Sparkles.cjs.js"),_e=require("./useEnvironment.cjs.js"),Je=require("./useMatcapTexture.cjs.js"),Ye=require("./useNormalTexture.cjs.js"),Ze=require("./Wireframe.cjs.js"),$e=require("./ShadowAlpha.cjs.js"),er=require("./Points.cjs.js"),rr=require("./Instances.cjs.js"),sr=require("./Segments.cjs.js"),tr=require("./Detailed.cjs.js"),or=require("./Preload.cjs.js"),ir=require("./BakeShadows.cjs.js"),ar=require("./meshBounds.cjs.js"),ur=require("./AdaptiveDpr.cjs.js"),cr=require("./AdaptiveEvents.cjs.js"),nr=require("./PerformanceMonitor.cjs.js"),jr=require("./RenderTexture.cjs.js"),pr=require("./RenderCubeTexture.cjs.js"),lr=require("./Mask.cjs.js"),xr=require("./Hud.cjs.js"),qr=require("./Fisheye.cjs.js"),dr=require("./MeshPortalMaterial.cjs.js"),mr=require("./calculateScaleFactor.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("three"),require("@react-three/fiber"),require("three-stdlib"),require("suspend-react"),require("../helpers/constants.cjs.js"),require("meshline"),require("camera-controls"),require("maath"),require("zustand"),require("hls.js"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("react-composer"),require("../helpers/deprecated.cjs.js"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("uuid"),require("../materials/WireframeMaterial.cjs.js"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.ScreenSizer=s.ScreenSizer,exports.QuadraticBezierLine=t.QuadraticBezierLine,exports.CubicBezierLine=o.CubicBezierLine,exports.CatmullRomLine=i.CatmullRomLine,exports.Line=a.Line,exports.PositionalAudio=u.PositionalAudio,exports.Text=c.Text,exports.Text3D=n.Text3D,exports.Effects=j.Effects,exports.isWebGL2Available=j.isWebGL2Available,exports.GradientTexture=p.GradientTexture,exports.GradientType=p.GradientType,exports.Image=l.Image,exports.Edges=x.Edges,exports.Outlines=q.Outlines,exports.Trail=d.Trail,exports.useTrail=d.useTrail,exports.Sampler=m.Sampler,exports.useSurfaceSampler=m.useSurfaceSampler,exports.ComputedAttribute=h.ComputedAttribute,exports.Clone=C.Clone,exports.MarchingCube=S.MarchingCube,exports.MarchingCubes=S.MarchingCubes,exports.MarchingPlane=S.MarchingPlane,exports.Decal=M.Decal,exports.Svg=T.Svg,exports.Gltf=P.Gltf,exports.AsciiRenderer=b.AsciiRenderer,exports.Splat=f.Splat,exports.OrthographicCamera=g.OrthographicCamera,exports.PerspectiveCamera=B.PerspectiveCamera,exports.CubeCamera=v.CubeCamera,exports.DeviceOrientationControls=A.DeviceOrientationControls,exports.FlyControls=L.FlyControls,exports.MapControls=R.MapControls,exports.OrbitControls=G.OrbitControls,exports.TrackballControls=F.TrackballControls,exports.ArcballControls=D.ArcballControls,exports.TransformControls=E.TransformControls,exports.PointerLockControls=k.PointerLockControls,exports.FirstPersonControls=w.FirstPersonControls,exports.CameraControls=z.CameraControls,exports.MotionPathControls=O.MotionPathControls,exports.useMotion=O.useMotion,exports.GizmoHelper=I.GizmoHelper,exports.useGizmoContext=I.useGizmoContext,exports.GizmoViewcube=y.GizmoViewcube,exports.GizmoViewport=H.GizmoViewport,exports.Grid=V.Grid,exports.useCubeTexture=W.useCubeTexture,exports.useFBX=Q.useFBX,exports.useGLTF=X.useGLTF,exports.useKTX2=K.useKTX2,exports.useProgress=N.useProgress,exports.IsObject=U.IsObject,exports.useTexture=U.useTexture,exports.useVideoTexture=_.useVideoTexture,exports.useFont=J.useFont,exports.calculateAspectRatio=Y.calculateAspectRatio,exports.getFirstItem=Y.getFirstItem,exports.useSpriteLoader=Y.useSpriteLoader,exports.Helper=Z.Helper,exports.Stats=$.Stats,exports.StatsGl=ee.StatsGl,exports.useDepthBuffer=re.useDepthBuffer,exports.useAspect=se.useAspect,exports.useCamera=te.useCamera,exports.useDetectGPU=oe.useDetectGPU,exports.useHelper=ie.useHelper,exports.Bvh=ae.Bvh,exports.useBVH=ae.useBVH,exports.useContextBridge=ue.useContextBridge,exports.useAnimations=ce.useAnimations,exports.useFBO=ne.useFBO,exports.useIntersect=je.useIntersect,exports.useBoxProjectedEnv=pe.useBoxProjectedEnv,exports.BBAnchor=le.BBAnchor,exports.useTrailTexture=xe.useTrailTexture,exports.useCubeCamera=qe.useCubeCamera,exports.Example=de.Example,exports.SpriteAnimator=me.SpriteAnimator,exports.useSpriteAnimator=me.useSpriteAnimator,exports.CurveModifier=he.CurveModifier,exports.MeshDistortMaterial=Ce.MeshDistortMaterial,exports.MeshWobbleMaterial=Se.MeshWobbleMaterial,exports.MeshReflectorMaterial=Me.MeshReflectorMaterial,exports.MeshRefractionMaterial=Te.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Pe.MeshTransmissionMaterial,exports.MeshDiscardMaterial=be.MeshDiscardMaterial,exports.PointMaterial=fe.PointMaterial,exports.PointMaterialImpl=fe.PointMaterialImpl,exports.shaderMaterial=ge.shaderMaterial,exports.SoftShadows=Be.SoftShadows,exports.Box=ve.Box,exports.Capsule=ve.Capsule,exports.Circle=ve.Circle,exports.Cone=ve.Cone,exports.Cylinder=ve.Cylinder,exports.Dodecahedron=ve.Dodecahedron,exports.Extrude=ve.Extrude,exports.Icosahedron=ve.Icosahedron,exports.Lathe=ve.Lathe,exports.Octahedron=ve.Octahedron,exports.Plane=ve.Plane,exports.Polyhedron=ve.Polyhedron,exports.Ring=ve.Ring,exports.Shape=ve.Shape,exports.Sphere=ve.Sphere,exports.Tetrahedron=ve.Tetrahedron,exports.Torus=ve.Torus,exports.TorusKnot=ve.TorusKnot,exports.Tube=ve.Tube,exports.RoundedBox=Ae.RoundedBox,exports.ScreenQuad=Le.ScreenQuad,exports.Center=Re.Center,exports.Resize=Ge.Resize,exports.Bounds=Fe.Bounds,exports.useBounds=Fe.useBounds,exports.CameraShake=De.CameraShake,exports.Float=Ee.Float,exports.Stage=ke.Stage,exports.Backdrop=we.Backdrop,exports.Shadow=ze.Shadow,exports.Caustics=Oe.Caustics,exports.ContactShadows=Ie.ContactShadows,exports.AccumulativeShadows=ye.AccumulativeShadows,exports.RandomizedLight=ye.RandomizedLight,exports.accumulativeContext=ye.accumulativeContext,exports.Reflector=He.Reflector,exports.SpotLight=Ve.SpotLight,exports.SpotLightShadow=Ve.SpotLightShadow,exports.Environment=We.Environment,exports.EnvironmentCube=We.EnvironmentCube,exports.EnvironmentMap=We.EnvironmentMap,exports.EnvironmentPortal=We.EnvironmentPortal,exports.Lightformer=Qe.Lightformer,exports.Sky=Xe.Sky,exports.calcPosFromAngles=Xe.calcPosFromAngles,exports.Stars=Ke.Stars,exports.Cloud=Ne.Cloud,exports.CloudInstance=Ne.CloudInstance,exports.Clouds=Ne.Clouds,exports.Sparkles=Ue.Sparkles,exports.useEnvironment=_e.useEnvironment,exports.useMatcapTexture=Je.useMatcapTexture,exports.useNormalTexture=Ye.useNormalTexture,exports.Wireframe=Ze.Wireframe,exports.ShadowAlpha=$e.ShadowAlpha,exports.Point=er.Point,exports.Points=er.Points,exports.PointsBuffer=er.PointsBuffer,exports.PositionPoint=er.PositionPoint,exports.Instance=rr.Instance,exports.Instances=rr.Instances,exports.Merged=rr.Merged,exports.Segment=sr.Segment,exports.SegmentObject=sr.SegmentObject,exports.Segments=sr.Segments,exports.Detailed=tr.Detailed,exports.Preload=or.Preload,exports.BakeShadows=ir.BakeShadows,exports.meshBounds=ar.meshBounds,exports.AdaptiveDpr=ur.AdaptiveDpr,exports.AdaptiveEvents=cr.AdaptiveEvents,exports.PerformanceMonitor=nr.PerformanceMonitor,exports.usePerformanceMonitor=nr.usePerformanceMonitor,exports.RenderTexture=jr.RenderTexture,exports.RenderCubeTexture=pr.RenderCubeTexture,exports.Mask=lr.Mask,exports.useMask=lr.useMask,exports.Hud=xr.Hud,exports.Fisheye=qr.Fisheye,exports.MeshPortalMaterial=dr.MeshPortalMaterial,exports.calculateScaleFactor=mr.calculateScaleFactor;
|
package/core/index.js
CHANGED
|
@@ -147,6 +147,7 @@ import '../materials/ConvolutionMaterial.js';
|
|
|
147
147
|
import '../materials/MeshReflectorMaterial.js';
|
|
148
148
|
import '../materials/MeshRefractionMaterial.js';
|
|
149
149
|
import '../materials/DiscardMaterial.js';
|
|
150
|
+
import '@monogrid/gainmap-js';
|
|
150
151
|
import '../helpers/environment-assets.js';
|
|
151
152
|
import '../materials/SpotLightMaterial.js';
|
|
152
153
|
import 'uuid';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("../helpers/environment-assets.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("@monogrid/gainmap-js"),s=require("../helpers/environment-assets.cjs.js"),i=require("../helpers/deprecated.cjs.js");const p=e=>Array.isArray(e);exports.useEnvironment=function({files:a=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:o="",preset:l,encoding:d,extensions:g}={}){var u;let c,b=null,h=!1;if(l){if(!(l in s.presetsObj))throw new Error("Preset must be one of: "+Object.keys(s.presetsObj).join(", "));a=s.presetsObj[l],o="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}const j=p(a)&&6===a.length,f=p(a)&&3===a.length&&a.some((e=>e.endsWith("json"))),m=p(a)?a[0]:a;if(h=p(a),c=j?"cube":f?"webp":m.startsWith("data:application/exr")?"exr":m.startsWith("data:application/hdr")?"hdr":m.startsWith("data:image/jpeg")?"jpg":null==(u=m.split(".").pop())||null==(u=u.split("?"))||null==(u=u.shift())?void 0:u.toLowerCase(),b="cube"===c?r.CubeTextureLoader:"hdr"===c?n.RGBELoader:"exr"===c?n.EXRLoader:"jpg"===c||"jpeg"===c?t.HDRJPGLoader:"webp"===c?t.GainMapLoader:null,!b)throw new Error("useEnvironment: Unrecognized file extension: "+a);const x=e.useThree((e=>e.gl)),w=e.useLoader(b,h?[a]:a,(e=>{"webp"!==c&&"jpg"!==c&&"jpeg"!==c||e.setRenderer(x),null==e.setPath||e.setPath(o),g&&g(e)}));let v=h?w[0]:w;var E;return"jpg"!==c&&"jpeg"!==c&&"webp"!==c||(v=null==(E=v.renderTarget)?void 0:E.texture),v.mapping=j?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in v?v.colorSpace=(null!=d?d:j)?"srgb":"srgb-linear":v.encoding=(null!=d?d:j)?i.sRGBEncoding:i.LinearEncoding,v};
|
package/core/useEnvironment.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { useLoader } from '@react-three/fiber';
|
|
1
|
+
import { useThree, useLoader } from '@react-three/fiber';
|
|
2
2
|
import { CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
|
|
3
3
|
import { RGBELoader, EXRLoader } from 'three-stdlib';
|
|
4
|
+
import { HDRJPGLoader, GainMapLoader } from '@monogrid/gainmap-js';
|
|
4
5
|
import { presetsObj } from '../helpers/environment-assets.js';
|
|
5
6
|
import { sRGBEncoding, LinearEncoding } from '../helpers/deprecated.js';
|
|
6
7
|
|
|
@@ -13,32 +14,44 @@ function useEnvironment({
|
|
|
13
14
|
encoding = undefined,
|
|
14
15
|
extensions
|
|
15
16
|
} = {}) {
|
|
16
|
-
var
|
|
17
|
+
var _firstEntry$split$pop;
|
|
17
18
|
let loader = null;
|
|
18
|
-
let
|
|
19
|
+
let multiFile = false;
|
|
19
20
|
let extension;
|
|
20
21
|
if (preset) {
|
|
21
22
|
if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '));
|
|
22
23
|
files = presetsObj[preset];
|
|
23
24
|
path = CUBEMAP_ROOT;
|
|
24
25
|
}
|
|
26
|
+
const isCubemap = isArray(files) && files.length === 6;
|
|
27
|
+
const isGainmap = isArray(files) && files.length === 3 && files.some(file => file.endsWith('json'));
|
|
28
|
+
const firstEntry = isArray(files) ? files[0] : files;
|
|
25
29
|
|
|
26
30
|
// Everything else
|
|
27
|
-
|
|
28
|
-
extension =
|
|
29
|
-
loader =
|
|
31
|
+
multiFile = isArray(files);
|
|
32
|
+
extension = isCubemap ? 'cube' : isGainmap ? 'webp' : firstEntry.startsWith('data:application/exr') ? 'exr' : firstEntry.startsWith('data:application/hdr') ? 'hdr' : firstEntry.startsWith('data:image/jpeg') ? 'jpg' : (_firstEntry$split$pop = firstEntry.split('.').pop()) == null || (_firstEntry$split$pop = _firstEntry$split$pop.split('?')) == null || (_firstEntry$split$pop = _firstEntry$split$pop.shift()) == null ? void 0 : _firstEntry$split$pop.toLowerCase();
|
|
33
|
+
loader = extension === 'cube' ? CubeTextureLoader : extension === 'hdr' ? RGBELoader : extension === 'exr' ? EXRLoader : extension === 'jpg' || extension === 'jpeg' ? HDRJPGLoader : extension === 'webp' ? GainMapLoader : null;
|
|
30
34
|
if (!loader) throw new Error('useEnvironment: Unrecognized file extension: ' + files);
|
|
35
|
+
const gl = useThree(state => state.gl);
|
|
31
36
|
const loaderResult = useLoader(
|
|
32
37
|
// @ts-expect-error
|
|
33
|
-
loader,
|
|
38
|
+
loader, multiFile ? [files] : files, loader => {
|
|
39
|
+
// Gainmap requires a renderer
|
|
40
|
+
if (extension === 'webp' || extension === 'jpg' || extension === 'jpeg') {
|
|
41
|
+
loader.setRenderer(gl);
|
|
42
|
+
}
|
|
34
43
|
loader.setPath == null || loader.setPath(path);
|
|
35
44
|
if (extensions) extensions(loader);
|
|
36
45
|
});
|
|
37
|
-
|
|
46
|
+
let texture = multiFile ?
|
|
38
47
|
// @ts-ignore
|
|
39
48
|
loaderResult[0] : loaderResult;
|
|
40
|
-
|
|
41
|
-
|
|
49
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'webp') {
|
|
50
|
+
var _renderTarget;
|
|
51
|
+
texture = (_renderTarget = texture.renderTarget) == null ? void 0 : _renderTarget.texture;
|
|
52
|
+
}
|
|
53
|
+
texture.mapping = isCubemap ? CubeReflectionMapping : EquirectangularReflectionMapping;
|
|
54
|
+
if ('colorSpace' in texture) texture.colorSpace = (encoding !== null && encoding !== void 0 ? encoding : isCubemap) ? 'srgb' : 'srgb-linear';else texture.encoding = (encoding !== null && encoding !== void 0 ? encoding : isCubemap) ? sRGBEncoding : LinearEncoding;
|
|
42
55
|
return texture;
|
|
43
56
|
}
|
|
44
57
|
|
package/core/useTexture.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o,s){const a=r.useThree((e=>e.gl)),c=r.useLoader(e.TextureLoader,u(o)?Object.values(o):o);t.useLayoutEffect((()=>{null==s||s(c)}),[s]),t.useEffect((()=>{if("initTexture"in a){
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o,s){const a=r.useThree((e=>e.gl)),c=r.useLoader(e.TextureLoader,u(o)?Object.values(o):o);t.useLayoutEffect((()=>{null==s||s(c)}),[s]),t.useEffect((()=>{if("initTexture"in a){let r=[];Array.isArray(c)?r=c:c instanceof e.Texture?r=[c]:u(c)&&(r=Object.values(c)),r.forEach((r=>{r instanceof e.Texture&&a.initTexture(r)}))}}),[a,c]);return t.useMemo((()=>{if(u(o)){const e={};let r=0;for(const t in o)e[t]=c[r++];return e}return c}),[o,c])}o.preload=t=>r.useLoader.preload(e.TextureLoader,t),o.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=u,exports.useTexture=o;
|
package/core/useTexture.d.ts
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { Texture } from 'three';
|
|
2
|
-
export declare const IsObject: (url:
|
|
3
|
-
|
|
2
|
+
export declare const IsObject: (url: unknown) => url is Record<string, string>;
|
|
3
|
+
type TextureArray<T> = T extends string[] ? Texture[] : never;
|
|
4
|
+
type TextureRecord<T> = T extends Record<string, string> ? {
|
|
4
5
|
[key in keyof T]: Texture;
|
|
5
|
-
} :
|
|
6
|
+
} : never;
|
|
7
|
+
type SingleTexture<T> = T extends string ? Texture : never;
|
|
8
|
+
export type MappedTextureType<T extends string[] | string | Record<string, string>> = TextureArray<T> | TextureRecord<T> | SingleTexture<T>;
|
|
6
9
|
export declare function useTexture<Url extends string[] | string | Record<string, string>>(input: Url, onLoad?: (texture: MappedTextureType<Url>) => void): MappedTextureType<Url>;
|
|
7
10
|
export declare namespace useTexture {
|
|
8
|
-
var preload: (url: string) => undefined;
|
|
11
|
+
var preload: (url: string | string[]) => undefined;
|
|
9
12
|
var clear: (input: string | string[]) => void;
|
|
10
13
|
}
|
|
14
|
+
export {};
|
package/core/useTexture.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TextureLoader } from 'three';
|
|
1
|
+
import { TextureLoader, Texture } from 'three';
|
|
2
2
|
import { useThree, useLoader } from '@react-three/fiber';
|
|
3
3
|
import { useLayoutEffect, useEffect, useMemo } from 'react';
|
|
4
4
|
|
|
@@ -15,8 +15,19 @@ function useTexture(input, onLoad) {
|
|
|
15
15
|
// NOTE: only available for WebGLRenderer
|
|
16
16
|
useEffect(() => {
|
|
17
17
|
if ('initTexture' in gl) {
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
let textureArray = [];
|
|
19
|
+
if (Array.isArray(textures)) {
|
|
20
|
+
textureArray = textures;
|
|
21
|
+
} else if (textures instanceof Texture) {
|
|
22
|
+
textureArray = [textures];
|
|
23
|
+
} else if (IsObject(textures)) {
|
|
24
|
+
textureArray = Object.values(textures);
|
|
25
|
+
}
|
|
26
|
+
textureArray.forEach(texture => {
|
|
27
|
+
if (texture instanceof Texture) {
|
|
28
|
+
gl.initTexture(texture);
|
|
29
|
+
}
|
|
30
|
+
});
|
|
20
31
|
}
|
|
21
32
|
}, [gl, textures]);
|
|
22
33
|
const mappedTextures = useMemo(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@react-three/fiber"),i=require("three");const s=t=>Math.sqrt(1-Math.pow(t-1,2));class a{constructor({size:t=256,maxAge:e=750,radius:i=.3,intensity:a=.2,interpolate:h=0,smoothing:r=0,minForce:c=.3,blend:n="screen",ease:o=s}={}){this.size=t,this.maxAge=e,this.radius=i,this.intensity=a,this.ease=o,this.interpolate=h,this.smoothing=r,this.minForce=c,this.blend=n,this.trail=[],this.force=0,this.initTexture()}initTexture(){this.canvas=document.createElement("canvas"),this.canvas.width=this.canvas.height=this.size
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@react-three/fiber"),i=require("three");const s=t=>Math.sqrt(1-Math.pow(t-1,2));class a{constructor({size:t=256,maxAge:e=750,radius:i=.3,intensity:a=.2,interpolate:h=0,smoothing:r=0,minForce:c=.3,blend:n="screen",ease:o=s}={}){this.size=t,this.maxAge=e,this.radius=i,this.intensity=a,this.ease=o,this.interpolate=h,this.smoothing=r,this.minForce=c,this.blend=n,this.trail=[],this.force=0,this.initTexture()}initTexture(){this.canvas=document.createElement("canvas"),this.canvas.width=this.canvas.height=this.size;const t=this.canvas.getContext("2d");if(null===t)throw new Error("2D not available");this.ctx=t,this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.texture=new i.Texture(this.canvas),this.canvas.id="touchTexture",this.canvas.style.width=this.canvas.style.height=`${this.canvas.width}px`}update(t){this.clear(),this.trail.forEach(((e,i)=>{e.age+=1e3*t,e.age>this.maxAge&&this.trail.splice(i,1)})),this.trail.length||(this.force=0),this.trail.forEach((t=>{this.drawTouch(t)})),this.texture.needsUpdate=!0}clear(){this.ctx.globalCompositeOperation="source-over",this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height)}addTouch(t){const e=this.trail[this.trail.length-1];if(e){const i=e.x-t.x,s=e.y-t.y,a=i*i+s*s,h=Math.max(this.minForce,Math.min(1e4*a,1));if(this.force=function(t,e,i=.9){return e*i+t*(1-i)}(h,this.force,this.smoothing),this.interpolate){const t=Math.ceil(a/Math.pow(.5*this.radius/this.interpolate,2));if(t>1)for(let a=1;a<t;a++)this.trail.push({x:e.x-i/t*a,y:e.y-s/t*a,age:0,force:h})}}this.trail.push({x:t.x,y:t.y,age:0,force:this.force})}drawTouch(t){const e={x:t.x*this.size,y:(1-t.y)*this.size};let i=1;i=t.age<.3*this.maxAge?this.ease(t.age/(.3*this.maxAge)):this.ease(1-(t.age-.3*this.maxAge)/(.7*this.maxAge)),i*=t.force,this.ctx.globalCompositeOperation=this.blend;const s=this.size*this.radius*i,a=this.ctx.createRadialGradient(e.x,e.y,Math.max(0,.25*s),e.x,e.y,Math.max(0,s));a.addColorStop(0,`rgba(255, 255, 255, ${this.intensity})`),a.addColorStop(1,"rgba(0, 0, 0, 0.0)"),this.ctx.beginPath(),this.ctx.fillStyle=a,this.ctx.arc(e.x,e.y,Math.max(0,s),0,2*Math.PI),this.ctx.fill()}}exports.useTrailTexture=function(i={}){const{size:s,maxAge:h,radius:r,intensity:c,interpolate:n,smoothing:o,minForce:l,blend:x,ease:u}=i,d=t.useMemo((()=>new a(i)),[s,h,r,c,n,o,l,x,u]);e.useFrame(((t,e)=>{d.update(e)}));const g=t.useCallback((t=>d.addTouch(t.uv)),[d]);return[d.texture,g]};
|
package/core/useTrailTexture.js
CHANGED
|
@@ -2,15 +2,6 @@ import { useMemo, useCallback } from 'react';
|
|
|
2
2
|
import { useFrame } from '@react-three/fiber';
|
|
3
3
|
import { Texture } from 'three';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* Adapted from https://github.com/brunoimbrizi/interactive-particles/blob/master/src/scripts/webgl/particles/TrailTexture.js
|
|
7
|
-
* Changes:
|
|
8
|
-
* * accepts config as constructor params
|
|
9
|
-
* * frame-rate independent aging
|
|
10
|
-
* * added option to interpolate between slow mouse events
|
|
11
|
-
* * added option for smoothing between values to avoid large jumps in force
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
5
|
// smooth new sample (measurement) based on previous sample (current)
|
|
15
6
|
function smoothAverage(current, measurement, smoothing = 0.9) {
|
|
16
7
|
return measurement * smoothing + current * (1.0 - smoothing);
|
|
@@ -47,7 +38,11 @@ class TrailTexture {
|
|
|
47
38
|
initTexture() {
|
|
48
39
|
this.canvas = document.createElement('canvas');
|
|
49
40
|
this.canvas.width = this.canvas.height = this.size;
|
|
50
|
-
|
|
41
|
+
const ctx = this.canvas.getContext('2d');
|
|
42
|
+
if (ctx === null) {
|
|
43
|
+
throw new Error('2D not available');
|
|
44
|
+
}
|
|
45
|
+
this.ctx = ctx;
|
|
51
46
|
this.ctx.fillStyle = 'black';
|
|
52
47
|
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
|
53
48
|
this.texture = new Texture(this.canvas);
|