@react-three/drei 9.8.2 → 9.11.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 +98 -1
- package/core/BBAnchor.cjs.js +1 -0
- package/core/BBAnchor.d.ts +7 -0
- package/core/BBAnchor.js +37 -0
- package/core/Float.cjs.js +1 -1
- package/core/Float.d.ts +3 -1
- package/core/Float.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/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
|
|
@@ -1922,7 +2018,8 @@ This component makes its contents float or hover.
|
|
|
1922
2018
|
<Float
|
|
1923
2019
|
speed={1} // Animation speed, defaults to 1
|
|
1924
2020
|
rotationIntensity={1} // XYZ rotation intensity, defaults to 1
|
|
1925
|
-
floatIntensity={1} // Up/down float intensity, defaults to 1
|
|
2021
|
+
floatIntensity={1} // Up/down float intensity, works like a multiplier with floatingRange,defaults to 1
|
|
2022
|
+
floatingRange={[1, 10]} // Range of y-axis values the object will float within, defaults to [-0.1,0.1]
|
|
1926
2023
|
>
|
|
1927
2024
|
<mesh />
|
|
1928
2025
|
</Float>
|
|
@@ -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/Float.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("react-merge-refs");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("react-merge-refs"),n=require("three");function o(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 u=a(e),i=o(r),c=a(n);const l=u.forwardRef((({children:e,speed:r=1,rotationIntensity:n=1,floatIntensity:o=1,floatingRange:a=[-.1,.1],...l},f)=>{const s=u.useRef(null),d=u.useRef(1e4*Math.random());return t.useFrame((e=>{var t,u;const i=d.current+e.clock.getElapsedTime();s.current.rotation.x=Math.cos(i/4*r)/8*n,s.current.rotation.y=Math.sin(i/4*r)/8*n,s.current.rotation.z=Math.sin(i/4*r)/20*n;let l=Math.sin(i/4*r)/10;l=c.MathUtils.mapLinear(l,-.1,.1,null!==(t=null==a?void 0:a[0])&&void 0!==t?t:-.1,null!==(u=null==a?void 0:a[1])&&void 0!==u?u:.1),s.current.position.y=l*o})),u.createElement("group",l,u.createElement("group",{ref:i.default([s,f])},e))}));exports.Float=l;
|
package/core/Float.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import * as THREE from 'three';
|
|
2
3
|
export declare type FloatProps = JSX.IntrinsicElements['group'] & {
|
|
3
4
|
speed?: number;
|
|
4
5
|
rotationIntensity?: number;
|
|
5
6
|
floatIntensity?: number;
|
|
6
7
|
children?: React.ReactNode;
|
|
8
|
+
floatingRange?: [number?, number?];
|
|
7
9
|
};
|
|
8
|
-
export declare const Float: React.ForwardRefExoticComponent<Pick<FloatProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "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 | "speed" | "rotationIntensity" | "floatIntensity"> & React.RefAttributes<
|
|
10
|
+
export declare const Float: React.ForwardRefExoticComponent<Pick<FloatProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "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 | "speed" | "rotationIntensity" | "floatIntensity" | "floatingRange"> & React.RefAttributes<THREE.Group>>;
|
package/core/Float.js
CHANGED
|
@@ -1,22 +1,28 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFrame } from '@react-three/fiber';
|
|
3
3
|
import mergeRefs from 'react-merge-refs';
|
|
4
|
+
import * as THREE from 'three';
|
|
4
5
|
|
|
5
6
|
const Float = /*#__PURE__*/React.forwardRef(({
|
|
6
7
|
children,
|
|
7
8
|
speed = 1,
|
|
8
9
|
rotationIntensity = 1,
|
|
9
10
|
floatIntensity = 1,
|
|
11
|
+
floatingRange = [-0.1, 0.1],
|
|
10
12
|
...props
|
|
11
13
|
}, forwardRef) => {
|
|
12
14
|
const ref = React.useRef(null);
|
|
13
15
|
const offset = React.useRef(Math.random() * 10000);
|
|
14
16
|
useFrame(state => {
|
|
17
|
+
var _floatingRange$, _floatingRange$2;
|
|
18
|
+
|
|
15
19
|
const t = offset.current + state.clock.getElapsedTime();
|
|
16
20
|
ref.current.rotation.x = Math.cos(t / 4 * speed) / 8 * rotationIntensity;
|
|
17
21
|
ref.current.rotation.y = Math.sin(t / 4 * speed) / 8 * rotationIntensity;
|
|
18
22
|
ref.current.rotation.z = Math.sin(t / 4 * speed) / 20 * rotationIntensity;
|
|
19
|
-
|
|
23
|
+
let yPosition = Math.sin(t / 4 * speed) / 10;
|
|
24
|
+
yPosition = THREE.MathUtils.mapLinear(yPosition, -0.1, 0.1, (_floatingRange$ = floatingRange == null ? void 0 : floatingRange[0]) !== null && _floatingRange$ !== void 0 ? _floatingRange$ : -0.1, (_floatingRange$2 = floatingRange == null ? void 0 : floatingRange[1]) !== null && _floatingRange$2 !== void 0 ? _floatingRange$2 : 0.1);
|
|
25
|
+
ref.current.position.y = yPosition * floatIntensity;
|
|
20
26
|
});
|
|
21
27
|
return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
|
|
22
28
|
ref: mergeRefs([ref, forwardRef])
|
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/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';
|