@react-three/drei 9.8.1 → 9.10.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 +96 -0
- package/core/BBAnchor.cjs.js +1 -0
- package/core/BBAnchor.d.ts +7 -0
- package/core/BBAnchor.js +37 -0
- package/core/Effects.cjs.js +1 -1
- package/core/Effects.d.ts +4 -1
- package/core/Effects.js +7 -1
- package/core/Mask.cjs.js +1 -0
- package/core/Mask.d.ts +28 -0
- package/core/Mask.js +37 -0
- package/core/SpotLight.d.ts +1 -1
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +2 -0
- package/core/index.js +2 -0
- package/index.cjs.js +1 -1
- package/index.js +2 -0
- package/native/index.cjs.js +1 -1
- package/native/index.js +2 -0
- package/package.json +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +2 -0
package/README.md
CHANGED
|
@@ -106,6 +106,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
106
106
|
<li><a href="#useintersect">useIntersect</a></li>
|
|
107
107
|
<li><a href="#useboxprojectedenv">useBoxProjectedEnv</a></li>
|
|
108
108
|
<li><a href="#useTrail">useTrail</a></li>
|
|
109
|
+
<li><a href="#BBAnchor">BBAnchor</a></li>
|
|
109
110
|
</ul>
|
|
110
111
|
<li><a href="#loading">Loaders</a></li>
|
|
111
112
|
<ul>
|
|
@@ -135,6 +136,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
135
136
|
<ul>
|
|
136
137
|
<li><a href="#view">View</a></li>
|
|
137
138
|
<li><a href="#rendertexture">RenderTexture</a></li>
|
|
139
|
+
<li><a href="#mask">Mask</a></li>
|
|
138
140
|
</ul>
|
|
139
141
|
</ul>
|
|
140
142
|
</td>
|
|
@@ -1376,6 +1378,37 @@ useFrame(() => {
|
|
|
1376
1378
|
})
|
|
1377
1379
|
```
|
|
1378
1380
|
|
|
1381
|
+
#### BBAnchor
|
|
1382
|
+
|
|
1383
|
+
[](https://drei.vercel.app/?path=/story/misc-BBAnchor--b-box-offset-with-html)
|
|
1384
|
+
|
|
1385
|
+
A component using AABB (Axis-aligned bounding boxes) to offset children position by specified multipliers (`anchor` property) on each axis. You can use this component to change children positioning in regard of the parent's bounding box, eg. pinning [Html](#html) component to one of the parent's corners. Multipliers determine the offset value based on the `AABB`'s size:
|
|
1386
|
+
|
|
1387
|
+
```
|
|
1388
|
+
childrenAnchor = boundingBoxPosition + (boundingBoxSize * anchor / 2)
|
|
1389
|
+
```
|
|
1390
|
+
|
|
1391
|
+
```jsx
|
|
1392
|
+
<BBAnchor
|
|
1393
|
+
anchor // THREE.Vector3 or [number, number, number]
|
|
1394
|
+
{...groupProps} // All THREE.Group props are valid
|
|
1395
|
+
>
|
|
1396
|
+
{children}
|
|
1397
|
+
</BBAnchor>
|
|
1398
|
+
```
|
|
1399
|
+
|
|
1400
|
+
For instance, one could want the Html component to be pinned to `positive x`, `positive y`, and `positive z` corner of a [Box](#shapes) object:
|
|
1401
|
+
|
|
1402
|
+
```jsx
|
|
1403
|
+
<Box>
|
|
1404
|
+
<BBAnchor anchor={[1, 1, 1]}>
|
|
1405
|
+
<Html center>
|
|
1406
|
+
<span>Hello world!</span>
|
|
1407
|
+
</Html>
|
|
1408
|
+
</BBAnchor>
|
|
1409
|
+
</Box>
|
|
1410
|
+
```
|
|
1411
|
+
|
|
1379
1412
|
# Loading
|
|
1380
1413
|
|
|
1381
1414
|
#### Loader
|
|
@@ -1828,6 +1861,69 @@ This component allows you to render a live scene into a texture which you can th
|
|
|
1828
1861
|
<mesh />
|
|
1829
1862
|
```
|
|
1830
1863
|
|
|
1864
|
+
#### Mask
|
|
1865
|
+
|
|
1866
|
+
<p>
|
|
1867
|
+
<a href="https://codesandbox.io/s/z3f2mw"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/z3f2mw/screenshot.png" alt="Demo"/></a>
|
|
1868
|
+
</p>
|
|
1869
|
+
|
|
1870
|
+
Masks use the scencil buffer to cut out areas of the screen. This is usually cheaper as it doesn't require double renders or createPortal.
|
|
1871
|
+
|
|
1872
|
+
```tsx
|
|
1873
|
+
<Mask
|
|
1874
|
+
/** Each mask must have an id, you can have compound masks referring to the same id */
|
|
1875
|
+
id: number
|
|
1876
|
+
/** If colors of the masks own material will leak through, default: false */
|
|
1877
|
+
colorWrite?: boolean
|
|
1878
|
+
/** If depth of the masks own material will leak through, default: false */
|
|
1879
|
+
depthWrite?: boolean
|
|
1880
|
+
/** children must define a geometry, a render-prop function is allowed which may override the default material */
|
|
1881
|
+
children: (spread: MaskSpread) => React.ReactNode | React.ReactNode
|
|
1882
|
+
/>
|
|
1883
|
+
```
|
|
1884
|
+
|
|
1885
|
+
First you need to define a mask, give it the shape that you want.
|
|
1886
|
+
|
|
1887
|
+
```jsx
|
|
1888
|
+
<Mask id={1}>
|
|
1889
|
+
<planeGeometry />
|
|
1890
|
+
</Mask>
|
|
1891
|
+
```
|
|
1892
|
+
|
|
1893
|
+
Now refer to it with the `useMask` hook and the same id, your content will now be masked out by the geometry defined above.
|
|
1894
|
+
|
|
1895
|
+
```jsx
|
|
1896
|
+
const stencil = useMask(1)
|
|
1897
|
+
return (
|
|
1898
|
+
<mesh>
|
|
1899
|
+
<torusKnotGeoometry />
|
|
1900
|
+
<meshStandardMaterial {...stencil} />
|
|
1901
|
+
```
|
|
1902
|
+
|
|
1903
|
+
You can build compound masks with multiple shapes by re-using an id.
|
|
1904
|
+
|
|
1905
|
+
```jsx
|
|
1906
|
+
<Mask position={[-1, 0, 0]} id={1}>
|
|
1907
|
+
<planeGeometry />
|
|
1908
|
+
</Mask>
|
|
1909
|
+
<Mask position={[1, 0, 0]} id={1}>
|
|
1910
|
+
<circleGeometry />
|
|
1911
|
+
</Mask>
|
|
1912
|
+
```
|
|
1913
|
+
|
|
1914
|
+
You can override the material of a mask by using a render prop.
|
|
1915
|
+
|
|
1916
|
+
```jsx
|
|
1917
|
+
<Mask id={1}>
|
|
1918
|
+
{(spread) => (
|
|
1919
|
+
<>
|
|
1920
|
+
<planeGeometry args={[2, 2, 128, 128]} />
|
|
1921
|
+
<MeshDistortMaterial distort={0.5} radius={1} speed={10} {...spread} />
|
|
1922
|
+
</>
|
|
1923
|
+
)}
|
|
1924
|
+
</Mask>
|
|
1925
|
+
```
|
|
1926
|
+
|
|
1831
1927
|
# Staging
|
|
1832
1928
|
|
|
1833
1929
|
#### Center
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),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 r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=u(e),a=c(r),i=c(t);const f=new i.Box3,l=new i.Vector3;exports.BBAnchor=({anchor:e,...r})=>{const t=a.useRef(null),u=a.useRef(null);return a.useEffect((()=>{var e,r;null!=(e=t.current)&&null!=(r=e.parent)&&r.parent&&(u.current=t.current.parent,t.current.parent.parent.add(t.current))}),[]),n.useFrame((()=>{u.current&&(f.setFromObject(u.current),f.getSize(l),t.current.position.set(u.current.position.x+l.x*e[0]/2,u.current.position.y+l.y*e[1]/2,u.current.position.z+l.z*e[2]/2))})),a.createElement("group",o.default({ref:t},r))};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import * as THREE from 'three';
|
|
3
|
+
import { GroupProps } from '@react-three/fiber';
|
|
4
|
+
export interface BBAnchorProps extends GroupProps {
|
|
5
|
+
anchor: THREE.Vector3 | [number, number, number];
|
|
6
|
+
}
|
|
7
|
+
export declare const BBAnchor: ({ anchor, ...props }: BBAnchorProps) => JSX.Element;
|
package/core/BBAnchor.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as THREE from 'three';
|
|
4
|
+
import { useFrame } from '@react-three/fiber';
|
|
5
|
+
|
|
6
|
+
const boundingBox = new THREE.Box3();
|
|
7
|
+
const boundingBoxSize = new THREE.Vector3();
|
|
8
|
+
const BBAnchor = ({
|
|
9
|
+
anchor,
|
|
10
|
+
...props
|
|
11
|
+
}) => {
|
|
12
|
+
const ref = React.useRef(null);
|
|
13
|
+
const parentRef = React.useRef(null); // Reattach group created by this component to the parent's parent,
|
|
14
|
+
// so it becomes a sibling of its initial parent.
|
|
15
|
+
// We do that so the children have no impact on a bounding box of a parent.
|
|
16
|
+
|
|
17
|
+
React.useEffect(() => {
|
|
18
|
+
var _ref$current, _ref$current$parent;
|
|
19
|
+
|
|
20
|
+
if ((_ref$current = ref.current) != null && (_ref$current$parent = _ref$current.parent) != null && _ref$current$parent.parent) {
|
|
21
|
+
parentRef.current = ref.current.parent;
|
|
22
|
+
ref.current.parent.parent.add(ref.current);
|
|
23
|
+
}
|
|
24
|
+
}, []);
|
|
25
|
+
useFrame(() => {
|
|
26
|
+
if (parentRef.current) {
|
|
27
|
+
boundingBox.setFromObject(parentRef.current);
|
|
28
|
+
boundingBox.getSize(boundingBoxSize);
|
|
29
|
+
ref.current.position.set(parentRef.current.position.x + boundingBoxSize.x * anchor[0] / 2, parentRef.current.position.y + boundingBoxSize.y * anchor[1] / 2, parentRef.current.position.z + boundingBoxSize.z * anchor[2] / 2);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
return /*#__PURE__*/React.createElement("group", _extends({
|
|
33
|
+
ref: ref
|
|
34
|
+
}, props));
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { BBAnchor };
|
package/core/Effects.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib"),s=require("react-merge-refs");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib"),s=require("react-merge-refs");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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)}var o=u(e),i=c(r),l=u(s);const d=i.forwardRef((({children:e,multisamping:r=8,renderIndex:s=1,disableRender:u,disableGamma:c,disableRenderPass:d,depthBuffer:f=!0,stencilBuffer:p=!1,anisotropy:h=1,encoding:m,type:g,...b},y)=>{i.useMemo((()=>a.extend({EffectComposer:n.EffectComposer,RenderPass:n.RenderPass,ShaderPass:n.ShaderPass})),[]);const E=i.useRef(),{scene:v,camera:P,gl:R,size:w,viewport:x}=a.useThree(),[j]=i.useState((()=>{const e=new t.WebGLRenderTarget(w.width,w.height,{type:g||t.HalfFloatType,format:t.RGBAFormat,encoding:m||R.outputEncoding,depthBuffer:f,stencilBuffer:p,anisotropy:h});return e.samples=r,e}));i.useEffect((()=>{var e,r;null==(e=E.current)||e.setSize(w.width,w.height),null==(r=E.current)||r.setPixelRatio(x.dpr)}),[R,w,x.dpr]),a.useFrame((()=>{var e;u||null==(e=E.current)||e.render()}),s);const C=[];return d||C.push(i.createElement("renderPass",{key:"renderpass",attach:`passes-${C.length}`,args:[v,P]})),c||C.push(i.createElement("shaderPass",{attach:`passes-${C.length}`,key:"gammapass",args:[n.GammaCorrectionShader]})),i.Children.forEach(e,(e=>C.push(i.cloneElement(e,{key:C.length,attach:`passes-${C.length}`})))),i.createElement("effectComposer",o.default({ref:l.default([y,E]),args:[R,j]},b),C)}));exports.Effects=d,exports.isWebGL2Available=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}};
|
package/core/Effects.d.ts
CHANGED
|
@@ -20,4 +20,7 @@ export declare const Effects: React.ForwardRefExoticComponent<Pick<ReactThreeFib
|
|
|
20
20
|
disableGamma?: boolean | undefined;
|
|
21
21
|
disableRenderPass?: boolean | undefined;
|
|
22
22
|
disableRender?: boolean | undefined;
|
|
23
|
-
|
|
23
|
+
depthBuffer?: boolean | undefined;
|
|
24
|
+
stencilBuffer?: boolean | undefined;
|
|
25
|
+
anisotropy?: number | undefined;
|
|
26
|
+
}, "attach" | "args" | "children" | "key" | "onUpdate" | "type" | keyof EffectComposer<WebGLRenderTarget> | "multisamping" | "renderIndex" | "disableRender" | "disableGamma" | "disableRenderPass" | "depthBuffer" | "stencilBuffer" | "anisotropy" | "encoding"> & React.RefAttributes<unknown>>;
|
package/core/Effects.js
CHANGED
|
@@ -20,6 +20,9 @@ const Effects = /*#__PURE__*/React.forwardRef(({
|
|
|
20
20
|
disableRender,
|
|
21
21
|
disableGamma,
|
|
22
22
|
disableRenderPass,
|
|
23
|
+
depthBuffer = true,
|
|
24
|
+
stencilBuffer = false,
|
|
25
|
+
anisotropy = 1,
|
|
23
26
|
encoding,
|
|
24
27
|
type,
|
|
25
28
|
...props
|
|
@@ -41,7 +44,10 @@ const Effects = /*#__PURE__*/React.forwardRef(({
|
|
|
41
44
|
const t = new WebGLRenderTarget(size.width, size.height, {
|
|
42
45
|
type: type || HalfFloatType,
|
|
43
46
|
format: RGBAFormat,
|
|
44
|
-
encoding: encoding || gl.outputEncoding
|
|
47
|
+
encoding: encoding || gl.outputEncoding,
|
|
48
|
+
depthBuffer,
|
|
49
|
+
stencilBuffer,
|
|
50
|
+
anisotropy
|
|
45
51
|
});
|
|
46
52
|
t.samples = multisamping;
|
|
47
53
|
return t;
|
package/core/Mask.cjs.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
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 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 i=n(e),l=c(t),s=c(r);exports.Mask=function({id:e=1,children:t,colorWrite:r=!1,depthWrite:n=!1,...c}){const u=s.useMemo((()=>({colorWrite:r,depthWrite:n,stencilWrite:!0,stencilRef:e,stencilFunc:l.AlwaysStencilFunc,stencilFail:l.ReplaceStencilOp,stencilZFail:l.ReplaceStencilOp,stencilZPass:l.ReplaceStencilOp})),[r,n]);return s.createElement("mesh",i.default({renderOrder:-e},c),s.createElement("meshBasicMaterial",u),"function"==typeof t?t(u):t)},exports.useMask=function(e){return{stencilWrite:!0,stencilRef:e,stencilFunc:l.EqualStencilFunc,stencilFail:l.KeepStencilOp,stencilZFail:l.KeepStencilOp,stencilZPass:l.ReplaceStencilOp}};
|
package/core/Mask.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
declare type MaskSpread = {
|
|
4
|
+
colorWrite: boolean;
|
|
5
|
+
depthWrite: boolean;
|
|
6
|
+
stencilWrite: boolean;
|
|
7
|
+
stencilRef: number;
|
|
8
|
+
stencilFunc: THREE.StencilFunc;
|
|
9
|
+
stencilFail: THREE.StencilOp;
|
|
10
|
+
stencilZFail: THREE.StencilOp;
|
|
11
|
+
stencilZPass: THREE.StencilOp;
|
|
12
|
+
};
|
|
13
|
+
declare type Props = Omit<JSX.IntrinsicElements['mesh'], 'children'> & {
|
|
14
|
+
id: number;
|
|
15
|
+
colorWrite?: boolean;
|
|
16
|
+
depthWrite?: boolean;
|
|
17
|
+
children: (spread: MaskSpread) => React.ReactNode | React.ReactNode;
|
|
18
|
+
};
|
|
19
|
+
export declare function Mask({ id, children, colorWrite, depthWrite, ...props }: Props): JSX.Element;
|
|
20
|
+
export declare function useMask(id: number): {
|
|
21
|
+
stencilWrite: boolean;
|
|
22
|
+
stencilRef: number;
|
|
23
|
+
stencilFunc: THREE.StencilFunc;
|
|
24
|
+
stencilFail: THREE.StencilOp;
|
|
25
|
+
stencilZFail: THREE.StencilOp;
|
|
26
|
+
stencilZPass: THREE.StencilOp;
|
|
27
|
+
};
|
|
28
|
+
export {};
|
package/core/Mask.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
|
+
import * as THREE from 'three';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
function Mask({
|
|
6
|
+
id = 1,
|
|
7
|
+
children,
|
|
8
|
+
colorWrite = false,
|
|
9
|
+
depthWrite = false,
|
|
10
|
+
...props
|
|
11
|
+
}) {
|
|
12
|
+
const spread = React.useMemo(() => ({
|
|
13
|
+
colorWrite,
|
|
14
|
+
depthWrite,
|
|
15
|
+
stencilWrite: true,
|
|
16
|
+
stencilRef: id,
|
|
17
|
+
stencilFunc: THREE.AlwaysStencilFunc,
|
|
18
|
+
stencilFail: THREE.ReplaceStencilOp,
|
|
19
|
+
stencilZFail: THREE.ReplaceStencilOp,
|
|
20
|
+
stencilZPass: THREE.ReplaceStencilOp
|
|
21
|
+
}), [colorWrite, depthWrite]);
|
|
22
|
+
return /*#__PURE__*/React.createElement("mesh", _extends({
|
|
23
|
+
renderOrder: -id
|
|
24
|
+
}, props), /*#__PURE__*/React.createElement("meshBasicMaterial", spread), typeof children === 'function' ? children(spread) : children);
|
|
25
|
+
}
|
|
26
|
+
function useMask(id) {
|
|
27
|
+
return {
|
|
28
|
+
stencilWrite: true,
|
|
29
|
+
stencilRef: id,
|
|
30
|
+
stencilFunc: THREE.EqualStencilFunc,
|
|
31
|
+
stencilFail: THREE.KeepStencilOp,
|
|
32
|
+
stencilZFail: THREE.KeepStencilOp,
|
|
33
|
+
stencilZPass: THREE.ReplaceStencilOp
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export { Mask, useMask };
|
package/core/SpotLight.d.ts
CHANGED
|
@@ -26,5 +26,5 @@ declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@reac
|
|
|
26
26
|
radiusBottom?: number | undefined;
|
|
27
27
|
opacity?: number | undefined;
|
|
28
28
|
color?: string | number | undefined;
|
|
29
|
-
}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "distance" | "opacity" | "decay" | "target" | "angle" | "attenuation" | "penumbra" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "
|
|
29
|
+
}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "distance" | "opacity" | "decay" | "target" | "angle" | "depthBuffer" | "attenuation" | "penumbra" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "isSpotLight" | "anglePower" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
|
|
30
30
|
export { SpotLight };
|
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("./Text3D.cjs.js"),a=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.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("./Text3D.cjs.js"),a=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),c=require("./Edges.cjs.js"),p=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),l=require("./ComputedAttribute.cjs.js"),q=require("./Clone.cjs.js"),d=require("./OrthographicCamera.cjs.js"),m=require("./PerspectiveCamera.cjs.js"),C=require("./CubeCamera.cjs.js"),h=require("./DeviceOrientationControls.cjs.js"),B=require("./FlyControls.cjs.js"),b=require("./MapControls.cjs.js"),S=require("./OrbitControls.cjs.js"),M=require("./TrackballControls.cjs.js"),T=require("./ArcballControls.cjs.js"),P=require("./TransformControls.cjs.js"),f=require("./PointerLockControls.cjs.js"),g=require("./FirstPersonControls.cjs.js"),v=require("./GizmoHelper.cjs.js"),k=require("./GizmoViewcube.cjs.js"),A=require("./GizmoViewport.cjs.js"),E=require("./useCubeTexture.cjs.js"),L=require("./useFBX.cjs.js"),D=require("./useGLTF.cjs.js"),G=require("./useProgress.cjs.js"),F=require("./useTexture.cjs.js"),O=require("./useKTX2.cjs.js"),w=require("./Stats.cjs.js"),z=require("./useDepthBuffer.cjs.js"),I=require("./useAspect.cjs.js"),R=require("./useCamera.cjs.js"),y=require("./useDetectGPU.cjs.js"),H=require("./useHelper.cjs.js"),V=require("./useBVH.cjs.js"),Q=require("./useContextBridge.cjs.js"),X=require("./useAnimations.cjs.js"),K=require("./useFBO.cjs.js"),W=require("./useIntersect.cjs.js"),N=require("./useBoxProjectedEnv.cjs.js"),U=require("./BBAnchor.cjs.js"),_=require("./CurveModifier.cjs.js"),J=require("./MeshDistortMaterial.cjs.js"),Y=require("./MeshWobbleMaterial.cjs.js"),Z=require("./MeshReflectorMaterial.cjs.js"),$=require("./PointMaterial.cjs.js"),ee=require("./shaderMaterial.cjs.js"),re=require("./softShadows.cjs.js"),se=require("./shapes.cjs.js"),te=require("./RoundedBox.cjs.js"),oe=require("./ScreenQuad.cjs.js"),ie=require("./Center.cjs.js"),ue=require("./Bounds.cjs.js"),ae=require("./CameraShake.cjs.js"),ne=require("./Float.cjs.js"),je=require("./Stage.cjs.js"),ce=require("./Backdrop.cjs.js"),pe=require("./Shadow.cjs.js"),xe=require("./ContactShadows.cjs.js"),le=require("./Reflector.cjs.js"),qe=require("./SpotLight.cjs.js"),de=require("./Environment.cjs.js"),me=require("./Lightformer.cjs.js"),Ce=require("./Sky.cjs.js"),he=require("./Stars.cjs.js"),Be=require("./Cloud.cjs.js"),be=require("./Sparkles.cjs.js"),Se=require("./useMatcapTexture.cjs.js"),Me=require("./useNormalTexture.cjs.js"),Te=require("./Points.cjs.js"),Pe=require("./Instances.cjs.js"),fe=require("./Segments.cjs.js"),ge=require("./Detailed.cjs.js"),ve=require("./Preload.cjs.js"),ke=require("./BakeShadows.cjs.js"),Ae=require("./meshBounds.cjs.js"),Ee=require("./AdaptiveDpr.cjs.js"),Le=require("./AdaptiveEvents.cjs.js"),De=require("./RenderTexture.cjs.js"),Ge=require("./Mask.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("meshline"),require("lodash.pick"),require("lodash.omit"),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.Text3D=u.Text3D,exports.Effects=a.Effects,exports.isWebGL2Available=a.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=c.Edges,exports.Trail=p.Trail,exports.useTrail=p.useTrail,exports.Sampler=x.Sampler,exports.ComputedAttribute=l.ComputedAttribute,exports.Clone=q.Clone,exports.OrthographicCamera=d.OrthographicCamera,exports.PerspectiveCamera=m.PerspectiveCamera,exports.CubeCamera=C.CubeCamera,exports.DeviceOrientationControls=h.DeviceOrientationControls,exports.FlyControls=B.FlyControls,exports.MapControls=b.MapControls,exports.OrbitControls=S.OrbitControls,exports.TrackballControls=M.TrackballControls,exports.ArcballControls=T.ArcballControls,exports.TransformControls=P.TransformControls,exports.PointerLockControls=f.PointerLockControls,exports.FirstPersonControls=g.FirstPersonControls,exports.GizmoHelper=v.GizmoHelper,exports.useGizmoContext=v.useGizmoContext,exports.GizmoViewcube=k.GizmoViewcube,exports.GizmoViewport=A.GizmoViewport,exports.useCubeTexture=E.useCubeTexture,exports.useFBX=L.useFBX,exports.useGLTF=D.useGLTF,exports.useProgress=G.useProgress,exports.IsObject=F.IsObject,exports.useTexture=F.useTexture,exports.useKTX2=O.useKTX2,exports.Stats=w.Stats,exports.useDepthBuffer=z.useDepthBuffer,exports.useAspect=I.useAspect,exports.useCamera=R.useCamera,exports.useDetectGPU=y.useDetectGPU,exports.useHelper=H.useHelper,exports.useBVH=V.useBVH,exports.useContextBridge=Q.useContextBridge,exports.useAnimations=X.useAnimations,exports.useFBO=K.useFBO,exports.useIntersect=W.useIntersect,exports.useBoxProjectedEnv=N.useBoxProjectedEnv,exports.BBAnchor=U.BBAnchor,exports.CurveModifier=_.CurveModifier,exports.MeshDistortMaterial=J.MeshDistortMaterial,exports.MeshWobbleMaterial=Y.MeshWobbleMaterial,exports.MeshReflectorMaterial=Z.MeshReflectorMaterial,exports.PointMaterial=$.PointMaterial,exports.PointMaterialImpl=$.PointMaterialImpl,exports.shaderMaterial=ee.shaderMaterial,exports.softShadows=re.softShadows,exports.Box=se.Box,exports.Circle=se.Circle,exports.Cone=se.Cone,exports.Cylinder=se.Cylinder,exports.Dodecahedron=se.Dodecahedron,exports.Extrude=se.Extrude,exports.Icosahedron=se.Icosahedron,exports.Lathe=se.Lathe,exports.Octahedron=se.Octahedron,exports.Plane=se.Plane,exports.Polyhedron=se.Polyhedron,exports.Ring=se.Ring,exports.Sphere=se.Sphere,exports.Tetrahedron=se.Tetrahedron,exports.Torus=se.Torus,exports.TorusKnot=se.TorusKnot,exports.Tube=se.Tube,exports.RoundedBox=te.RoundedBox,exports.ScreenQuad=oe.ScreenQuad,exports.Center=ie.Center,exports.Bounds=ue.Bounds,exports.useBounds=ue.useBounds,exports.CameraShake=ae.CameraShake,exports.Float=ne.Float,exports.Stage=je.Stage,exports.Backdrop=ce.Backdrop,exports.Shadow=pe.Shadow,exports.ContactShadows=xe.ContactShadows,exports.Reflector=le.Reflector,exports.SpotLight=qe.SpotLight,exports.Environment=de.Environment,exports.EnvironmentCube=de.EnvironmentCube,exports.EnvironmentMap=de.EnvironmentMap,exports.EnvironmentPortal=de.EnvironmentPortal,exports.useEnvironment=de.useEnvironment,exports.Lightformer=me.Lightformer,exports.Sky=Ce.Sky,exports.calcPosFromAngles=Ce.calcPosFromAngles,exports.Stars=he.Stars,exports.Cloud=Be.Cloud,exports.Sparkles=be.Sparkles,exports.useMatcapTexture=Se.useMatcapTexture,exports.useNormalTexture=Me.useNormalTexture,exports.Point=Te.Point,exports.Points=Te.Points,exports.PointsBuffer=Te.PointsBuffer,exports.Instance=Pe.Instance,exports.Instances=Pe.Instances,exports.Merged=Pe.Merged,exports.Segment=fe.Segment,exports.SegmentObject=fe.SegmentObject,exports.Segments=fe.Segments,exports.Detailed=ge.Detailed,exports.Preload=ve.Preload,exports.BakeShadows=ke.BakeShadows,exports.meshBounds=Ae.meshBounds,exports.AdaptiveDpr=Ee.AdaptiveDpr,exports.AdaptiveEvents=Le.AdaptiveEvents,exports.RenderTexture=De.RenderTexture,exports.Mask=Ge.Mask,exports.useMask=Ge.useMask;
|
package/core/index.d.ts
CHANGED
|
@@ -46,6 +46,7 @@ export * from './useAnimations';
|
|
|
46
46
|
export * from './useFBO';
|
|
47
47
|
export * from './useIntersect';
|
|
48
48
|
export * from './useBoxProjectedEnv';
|
|
49
|
+
export * from './BBAnchor';
|
|
49
50
|
export * from './CurveModifier';
|
|
50
51
|
export * from './MeshDistortMaterial';
|
|
51
52
|
export * from './MeshWobbleMaterial';
|
|
@@ -84,3 +85,4 @@ export * from './meshBounds';
|
|
|
84
85
|
export * from './AdaptiveDpr';
|
|
85
86
|
export * from './AdaptiveEvents';
|
|
86
87
|
export * from './RenderTexture';
|
|
88
|
+
export * from './Mask';
|
package/core/index.js
CHANGED
|
@@ -46,6 +46,7 @@ export { useAnimations } from './useAnimations.js';
|
|
|
46
46
|
export { useFBO } from './useFBO.js';
|
|
47
47
|
export { useIntersect } from './useIntersect.js';
|
|
48
48
|
export { useBoxProjectedEnv } from './useBoxProjectedEnv.js';
|
|
49
|
+
export { BBAnchor } from './BBAnchor.js';
|
|
49
50
|
export { CurveModifier } from './CurveModifier.js';
|
|
50
51
|
export { MeshDistortMaterial } from './MeshDistortMaterial.js';
|
|
51
52
|
export { MeshWobbleMaterial } from './MeshWobbleMaterial.js';
|
|
@@ -84,6 +85,7 @@ export { meshBounds } from './meshBounds.js';
|
|
|
84
85
|
export { AdaptiveDpr } from './AdaptiveDpr.js';
|
|
85
86
|
export { AdaptiveEvents } from './AdaptiveEvents.js';
|
|
86
87
|
export { RenderTexture } from './RenderTexture.js';
|
|
88
|
+
export { Mask, useMask } from './Mask.js';
|
|
87
89
|
import '@babel/runtime/helpers/esm/extends';
|
|
88
90
|
import 'react';
|
|
89
91
|
import '@react-three/fiber';
|