@react-three/drei 7.26.0 → 7.27.2
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 +51 -35
- package/core/MeshReflectorMaterial.cjs.js +1 -0
- package/core/MeshReflectorMaterial.d.ts +28 -0
- package/core/MeshReflectorMaterial.js +188 -0
- package/core/Reflector.cjs.js +1 -1
- package/core/Reflector.d.ts +7 -5
- package/core/Reflector.js +12 -3
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.js +2 -1
- package/index.cjs.js +1 -1
- package/index.js +1 -2
- package/materials/MeshReflectorMaterial.cjs.js +1 -1
- package/materials/MeshReflectorMaterial.d.ts +13 -1
- package/materials/MeshReflectorMaterial.js +48 -2
- package/native/index.cjs.js +1 -1
- package/native/index.d.ts +0 -1
- package/native/index.js +4 -3
- package/package.json +1 -1
- package/web/PresentationControls.cjs.js +1 -1
- package/web/PresentationControls.d.ts +1 -1
- package/web/PresentationControls.js +7 -7
- package/web/index.cjs.js +1 -1
- package/web/index.d.ts +0 -1
- package/web/index.js +4 -3
- package/materials/index.cjs.js +0 -1
- package/materials/index.d.ts +0 -2
- package/materials/index.js +0 -4
package/README.md
CHANGED
|
@@ -68,6 +68,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
68
68
|
</ul>
|
|
69
69
|
<li><a href="#shaders">Shaders</a></li>
|
|
70
70
|
<ul>
|
|
71
|
+
<li><a href="#meshreflectormaterial">MeshReflectorMaterial</a></li>
|
|
71
72
|
<li><a href="#meshwobblematerial">MeshWobbleMaterial</a></li>
|
|
72
73
|
<li><a href="#meshdistortmaterial">MeshDistortMaterial</a></li>
|
|
73
74
|
<li><a href="#pointmaterial">PointMaterial</a></li>
|
|
@@ -159,10 +160,9 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
159
160
|
<li><a href="#stage">Stage</a></li>
|
|
160
161
|
<li><a href="#backdrop">Backdrop</a></li>
|
|
161
162
|
<li><a href="#environment">Environment</a></li>
|
|
162
|
-
<li><a href="#
|
|
163
|
+
<li><a href="#spotlight">SpotLight</a></li>
|
|
163
164
|
<li><a href="#shadow">Shadow</a></li>
|
|
164
165
|
<li><a href="#contactshadows">ContactShadows</a></li>
|
|
165
|
-
<li><a href="#reflector">Reflector</a></li>
|
|
166
166
|
<li><a href="#sky">Sky</a></li>
|
|
167
167
|
<li><a href="#stars">Stars</a></li>
|
|
168
168
|
<li><a href="#cloud">Cloud</a></li>
|
|
@@ -182,12 +182,25 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
182
182
|
|
|
183
183
|
A responsive [THREE.PerspectiveCamera](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) that can set itself as the default.
|
|
184
184
|
|
|
185
|
+
```jsx
|
|
186
|
+
<PerspectiveCamera makeDefault {...props} />
|
|
187
|
+
<mesh />
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
You can also give it children, which will now occupy the same position as the camera and follow along as it moves.
|
|
191
|
+
|
|
185
192
|
```jsx
|
|
186
193
|
<PerspectiveCamera makeDefault {...props}>
|
|
187
194
|
<mesh />
|
|
188
195
|
</PerspectiveCamera>
|
|
189
196
|
```
|
|
190
197
|
|
|
198
|
+
You can also drive it manually, it won't be responsive and you have to calculate aspect ration yourself.
|
|
199
|
+
|
|
200
|
+
```jsx
|
|
201
|
+
<PerspectiveCamera manual aspect={...} onUpdate={(c) => c.updateProjectionMatrix()}>
|
|
202
|
+
```
|
|
203
|
+
|
|
191
204
|
#### OrthographicCamera
|
|
192
205
|
|
|
193
206
|
[](https://drei.vercel.app/?path=/story/camera-orthographiccamera--orthographic-camera-scene-st)
|
|
@@ -331,7 +344,7 @@ function Foo() {
|
|
|
331
344
|
|
|
332
345
|

|
|
333
346
|
|
|
334
|
-
|
|
347
|
+
Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentational purposes. These controls do not turn the camera but will spin their contents. They will not suddenly come to rest when they reach limits like OrbitControls do, but rather smoothly anticipate stopping position.
|
|
335
348
|
|
|
336
349
|
```jsx
|
|
337
350
|
<PresentationControls
|
|
@@ -592,6 +605,41 @@ return <primitive object={scene} />
|
|
|
592
605
|
|
|
593
606
|
# Shaders
|
|
594
607
|
|
|
608
|
+
#### MeshReflectorMaterial
|
|
609
|
+
|
|
610
|
+
[](https://drei.vercel.app/?path=/story/shaders-meshreflectormaterial--reflector-st)
|
|
611
|
+
|
|
612
|
+
Easily add reflections and/or blur to any mesh. It takes surface roughness into account for a more realistic effect. This material extends from [THREE.MeshStandardMaterial](https://threejs.org/docs/index.html?q=meshsta#api/en/materials/MeshStandardMaterial) and accepts all its props.
|
|
613
|
+
|
|
614
|
+
```jsx
|
|
615
|
+
<mesh>
|
|
616
|
+
<planeGeometry />
|
|
617
|
+
<MeshReflectorMaterial
|
|
618
|
+
blur={[0, 0]} // Blur ground reflections (width, heigt), 0 skips blur
|
|
619
|
+
mixBlur={0} // How much blur mixes with surface roughness (default = 1)
|
|
620
|
+
mixStrength={1} // Strength of the reflections
|
|
621
|
+
resolution={256} // Off-buffer resolution, lower=faster, higher=better quality, slower
|
|
622
|
+
mirror={0} // Mirror environment, 0 = texture colors, 1 = pick up env colors
|
|
623
|
+
depthScale={0} // Scale the depth factor (0 = no depth, default = 0)
|
|
624
|
+
minDepthThreshold={0.9} // Lower edge for the depthTexture interpolation (default = 0)
|
|
625
|
+
maxDepthThreshold={1} // Upper edge for the depthTexture interpolation (default = 0)
|
|
626
|
+
depthToBlurRatioBias={0.25} // Adds a bias factor to the depthTexture before calculating the blur amount [blurFactor = blurTexture * (depthTexture + bias)]. It accepts values between 0 and 1, default is 0.25. An amount > 0 of bias makes sure that the blurTexture is not too sharp because of the multiplication with the depthTexture
|
|
627
|
+
gamma={1} // Reflection layer gamma
|
|
628
|
+
contrast={1} // Reflection layer contrast
|
|
629
|
+
brightness={0} // Reflection layer brightness
|
|
630
|
+
distortion={1} // Amount of distortion based on the distortionMap texture
|
|
631
|
+
distortionMap={distortionTexture} // The red channel of this texture is used as the distortion map. Default is null
|
|
632
|
+
debug={0} /* Depending on the assigned value, one of the following channels is shown:
|
|
633
|
+
0 = no debug
|
|
634
|
+
1 = depth channel
|
|
635
|
+
2 = base channel
|
|
636
|
+
3 = distortion channel
|
|
637
|
+
4 = lod channel (based on the roughness)
|
|
638
|
+
*/
|
|
639
|
+
>
|
|
640
|
+
</mesh>
|
|
641
|
+
```
|
|
642
|
+
|
|
595
643
|
#### MeshWobbleMaterial
|
|
596
644
|
|
|
597
645
|
[](https://drei.vercel.app/?path=/story/shaders-meshwobblematerial--mesh-wobble-material-st)
|
|
@@ -1506,38 +1554,6 @@ function Foo() {
|
|
|
1506
1554
|
return <SpotLight depthBuffer={depthBuffer} />
|
|
1507
1555
|
```
|
|
1508
1556
|
|
|
1509
|
-
#### Reflector
|
|
1510
|
-
|
|
1511
|
-
[](https://drei.vercel.app/?path=/story/misc-reflector--reflector-st)
|
|
1512
|
-
|
|
1513
|
-
Easily add reflections and/or blur to a planar surface. This reflector can also blur and takes surface roughness into account for a more realistic effect.
|
|
1514
|
-
|
|
1515
|
-
```jsx
|
|
1516
|
-
<Reflector
|
|
1517
|
-
args={[1, 1]} // PlaneBufferGeometry arguments
|
|
1518
|
-
blur={[0, 0]} // Blur ground reflections (width, heigt), 0 skips blur
|
|
1519
|
-
mixBlur={1.0} // How much blur mixes with surface roughness (default = 0), note that this can affect performance
|
|
1520
|
-
mixStrength={0.5} // Strength of the reflections
|
|
1521
|
-
resolution={256} // Off-buffer resolution, lower=faster, higher=better quality
|
|
1522
|
-
mirror={0.5} // Mirror environment, 0 = texture colors, 1 = pick up env colors
|
|
1523
|
-
depthScale={1} // Scale the depth factor (0 = no depth, default = 0)
|
|
1524
|
-
minDepthThreshold={0.9} // Lower edge for the depthTexture interpolation (default = 0)
|
|
1525
|
-
maxDepthThreshold={1} // Upper edge for the depthTexture interpolation (default = 0)
|
|
1526
|
-
depthToBlurRatioBias={0.25} // Adds a bias factor to the depthTexture before calculating the blur amount [blurFactor = blurTexture * (depthTexture + bias)]. It accepts values between 0 and 1, default is 0.25. An amount > 0 of bias makes sure that the blurTexture is not too sharp because of the multiplication with the depthTexture
|
|
1527
|
-
distortion={0} // Amount of distortion based on the distortionMap texture
|
|
1528
|
-
distortionMap={distortionTexture} // The red channel of this texture is used as the distortion map. Default is null
|
|
1529
|
-
debug={0} /* Depending on the assigned value, one of the following channels is shown:
|
|
1530
|
-
0 = no debug
|
|
1531
|
-
1 = depth channel
|
|
1532
|
-
2 = base channel
|
|
1533
|
-
3 = distortion channel
|
|
1534
|
-
4 = lod channel (based on the roughness)
|
|
1535
|
-
*/
|
|
1536
|
-
>
|
|
1537
|
-
{(Material, props) => <Material {...props}>}
|
|
1538
|
-
</Reflector>
|
|
1539
|
-
```
|
|
1540
|
-
|
|
1541
1557
|
#### Environment
|
|
1542
1558
|
|
|
1543
1559
|
[](https://drei.pmnd.rs/?path=/story/abstractions-environment--environment-st)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),i=require("../materials/BlurPass.cjs.js"),o=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,debug:f=0,distortion:x=1,gamma:M=1,contrast:T=1,brightness:b=0,distortionMap:g,...S},y)=>{const w=a.useThree((({gl:e})=>e)),R=a.useThree((({camera:e})=>e)),v=a.useThree((({scene:e})=>e)),j=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,B=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[_]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Vector3)),[U]=d.useState((()=>new r.Vector3)),[E]=d.useState((()=>new r.Matrix4)),[O]=d.useState((()=>new r.Vector3(0,0,-1))),[F]=d.useState((()=>new r.Vector4)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Vector3)),[q]=d.useState((()=>new r.Vector4)),[I]=d.useState((()=>new r.Matrix4)),[k]=d.useState((()=>new r.PerspectiveCamera)),L=d.useCallback((()=>{var e;const t=B.current.parent||(null==(e=B.current)?void 0:e.__r3f.parent);if(!t)return;if(P.setFromMatrixPosition(t.matrixWorld),U.setFromMatrixPosition(R.matrixWorld),E.extractRotation(t.matrixWorld),_.set(0,0,1),_.applyMatrix4(E),V.subVectors(P,U),V.dot(_)>0)return;V.reflect(_).negate(),V.add(P),E.extractRotation(R.matrixWorld),O.set(0,0,-1),O.applyMatrix4(E),O.add(U),W.subVectors(P,O),W.reflect(_).negate(),W.add(P),k.position.copy(V),k.up.set(0,1,0),k.up.applyMatrix4(E),k.up.reflect(_),k.lookAt(W),k.far=R.far,k.updateMatrixWorld(),k.projectionMatrix.copy(R.projectionMatrix),I.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),I.multiply(k.projectionMatrix),I.multiply(k.matrixWorldInverse),I.multiply(t.matrixWorld),D.setFromNormalAndCoplanarPoint(_,P),D.applyMatrix4(k.matrixWorldInverse),F.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const r=k.projectionMatrix;q.x=(Math.sign(F.x)+r.elements[8])/r.elements[0],q.y=(Math.sign(F.y)+r.elements[9])/r.elements[5],q.z=-1,q.w=(1+r.elements[10])/r.elements[14],F.multiplyScalar(2/F.dot(q)),r.elements[2]=F.x,r.elements[6]=F.y,r.elements[10]=F.z+1,r.elements[14]=F.w}),[]),[C,z,A,G]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:w.outputEncoding},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new i.BlurPass({gl:w,resolution:n,width:o[0],height:o[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:I,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:j,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,debug:f,distortion:x,distortionMap:g,gamma:M,contrast:T,brightness:b,"defines-USE_BLUR":j?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":g?"":void 0}]}),[w,o,I,n,h,j,e,t,s,l,p,m,f,x,g,M,T,b]);return a.useFrame((()=>{var e;const t=B.current.parent||(null==(e=B.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;L(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(C),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(v,k),j&&A.render(w,C,z),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+G["defines-USE_BLUR"]+G["defines-USE_DEPTH"]+G["defines-USE_DISTORTION"],ref:c.default([B,y])},G,S))}));exports.MeshReflectorMaterial=p;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Texture } from 'three';
|
|
3
|
+
import { MeshReflectorMaterialProps, MeshReflectorMaterial as MeshReflectorMaterialImpl } from '../materials/MeshReflectorMaterial';
|
|
4
|
+
export declare type Props = JSX.IntrinsicElements['meshStandardMaterial'] & {
|
|
5
|
+
resolution?: number;
|
|
6
|
+
mixBlur?: number;
|
|
7
|
+
mixStrength?: number;
|
|
8
|
+
blur?: [number, number] | number;
|
|
9
|
+
mirror: number;
|
|
10
|
+
minDepthThreshold?: number;
|
|
11
|
+
maxDepthThreshold?: number;
|
|
12
|
+
depthScale?: number;
|
|
13
|
+
depthToBlurRatioBias?: number;
|
|
14
|
+
debug?: number;
|
|
15
|
+
distortionMap?: Texture;
|
|
16
|
+
distortion?: number;
|
|
17
|
+
gamma?: number;
|
|
18
|
+
contrast?: number;
|
|
19
|
+
brightness?: number;
|
|
20
|
+
};
|
|
21
|
+
declare global {
|
|
22
|
+
namespace JSX {
|
|
23
|
+
interface IntrinsicElements {
|
|
24
|
+
meshReflectorMaterialImpl: MeshReflectorMaterialProps;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "transparent" | "fog" | "blur" | "opacity" | "precision" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "resolution" | "wireframe" | "wireframeLinewidth" | "skinning" | "morphTargets" | "morphNormals" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "vertexTangents" | "flatShading" | "isMeshStandardMaterial" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "gamma" | "contrast" | "brightness" | "distortionMap"> & React.RefAttributes<MeshReflectorMaterialImpl>>;
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, RGBFormat, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
|
|
4
|
+
import { extend, useThree, useFrame } from '@react-three/fiber';
|
|
5
|
+
import mergeRefs from 'react-merge-refs';
|
|
6
|
+
import { BlurPass } from '../materials/BlurPass.js';
|
|
7
|
+
import { MeshReflectorMaterial as MeshReflectorMaterial$1 } from '../materials/MeshReflectorMaterial.js';
|
|
8
|
+
|
|
9
|
+
extend({
|
|
10
|
+
MeshReflectorMaterialImpl: MeshReflectorMaterial$1
|
|
11
|
+
});
|
|
12
|
+
const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
|
|
13
|
+
mixBlur = 0,
|
|
14
|
+
mixStrength = 1,
|
|
15
|
+
resolution = 256,
|
|
16
|
+
blur = [0, 0],
|
|
17
|
+
minDepthThreshold = 0.9,
|
|
18
|
+
maxDepthThreshold = 1,
|
|
19
|
+
depthScale = 0,
|
|
20
|
+
depthToBlurRatioBias = 0.25,
|
|
21
|
+
mirror = 0,
|
|
22
|
+
debug = 0,
|
|
23
|
+
distortion = 1,
|
|
24
|
+
gamma = 1,
|
|
25
|
+
contrast = 1,
|
|
26
|
+
brightness = 0,
|
|
27
|
+
distortionMap,
|
|
28
|
+
...props
|
|
29
|
+
}, ref) => {
|
|
30
|
+
const gl = useThree(({
|
|
31
|
+
gl
|
|
32
|
+
}) => gl);
|
|
33
|
+
const camera = useThree(({
|
|
34
|
+
camera
|
|
35
|
+
}) => camera);
|
|
36
|
+
const scene = useThree(({
|
|
37
|
+
scene
|
|
38
|
+
}) => scene);
|
|
39
|
+
blur = Array.isArray(blur) ? blur : [blur, blur];
|
|
40
|
+
const hasBlur = blur[0] + blur[1] > 0;
|
|
41
|
+
const materialRef = React.useRef(null);
|
|
42
|
+
const [reflectorPlane] = React.useState(() => new Plane());
|
|
43
|
+
const [normal] = React.useState(() => new Vector3());
|
|
44
|
+
const [reflectorWorldPosition] = React.useState(() => new Vector3());
|
|
45
|
+
const [cameraWorldPosition] = React.useState(() => new Vector3());
|
|
46
|
+
const [rotationMatrix] = React.useState(() => new Matrix4());
|
|
47
|
+
const [lookAtPosition] = React.useState(() => new Vector3(0, 0, -1));
|
|
48
|
+
const [clipPlane] = React.useState(() => new Vector4());
|
|
49
|
+
const [view] = React.useState(() => new Vector3());
|
|
50
|
+
const [target] = React.useState(() => new Vector3());
|
|
51
|
+
const [q] = React.useState(() => new Vector4());
|
|
52
|
+
const [textureMatrix] = React.useState(() => new Matrix4());
|
|
53
|
+
const [virtualCamera] = React.useState(() => new PerspectiveCamera());
|
|
54
|
+
const beforeRender = React.useCallback(() => {
|
|
55
|
+
var _materialRef$current;
|
|
56
|
+
|
|
57
|
+
// TODO: As of R3f 7-8 this should be __r3f.parent
|
|
58
|
+
const parent = materialRef.current.parent || ((_materialRef$current = materialRef.current) == null ? void 0 : _materialRef$current.__r3f.parent);
|
|
59
|
+
if (!parent) return;
|
|
60
|
+
reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld);
|
|
61
|
+
cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
|
|
62
|
+
rotationMatrix.extractRotation(parent.matrixWorld);
|
|
63
|
+
normal.set(0, 0, 1);
|
|
64
|
+
normal.applyMatrix4(rotationMatrix);
|
|
65
|
+
view.subVectors(reflectorWorldPosition, cameraWorldPosition); // Avoid rendering when reflector is facing away
|
|
66
|
+
|
|
67
|
+
if (view.dot(normal) > 0) return;
|
|
68
|
+
view.reflect(normal).negate();
|
|
69
|
+
view.add(reflectorWorldPosition);
|
|
70
|
+
rotationMatrix.extractRotation(camera.matrixWorld);
|
|
71
|
+
lookAtPosition.set(0, 0, -1);
|
|
72
|
+
lookAtPosition.applyMatrix4(rotationMatrix);
|
|
73
|
+
lookAtPosition.add(cameraWorldPosition);
|
|
74
|
+
target.subVectors(reflectorWorldPosition, lookAtPosition);
|
|
75
|
+
target.reflect(normal).negate();
|
|
76
|
+
target.add(reflectorWorldPosition);
|
|
77
|
+
virtualCamera.position.copy(view);
|
|
78
|
+
virtualCamera.up.set(0, 1, 0);
|
|
79
|
+
virtualCamera.up.applyMatrix4(rotationMatrix);
|
|
80
|
+
virtualCamera.up.reflect(normal);
|
|
81
|
+
virtualCamera.lookAt(target);
|
|
82
|
+
virtualCamera.far = camera.far; // Used in WebGLBackground
|
|
83
|
+
|
|
84
|
+
virtualCamera.updateMatrixWorld();
|
|
85
|
+
virtualCamera.projectionMatrix.copy(camera.projectionMatrix); // Update the texture matrix
|
|
86
|
+
|
|
87
|
+
textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
|
|
88
|
+
textureMatrix.multiply(virtualCamera.projectionMatrix);
|
|
89
|
+
textureMatrix.multiply(virtualCamera.matrixWorldInverse);
|
|
90
|
+
textureMatrix.multiply(parent.matrixWorld); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
|
|
91
|
+
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
|
|
92
|
+
|
|
93
|
+
reflectorPlane.setFromNormalAndCoplanarPoint(normal, reflectorWorldPosition);
|
|
94
|
+
reflectorPlane.applyMatrix4(virtualCamera.matrixWorldInverse);
|
|
95
|
+
clipPlane.set(reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant);
|
|
96
|
+
const projectionMatrix = virtualCamera.projectionMatrix;
|
|
97
|
+
q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
|
|
98
|
+
q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
|
|
99
|
+
q.z = -1.0;
|
|
100
|
+
q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
|
|
101
|
+
|
|
102
|
+
clipPlane.multiplyScalar(2.0 / clipPlane.dot(q)); // Replacing the third row of the projection matrix
|
|
103
|
+
|
|
104
|
+
projectionMatrix.elements[2] = clipPlane.x;
|
|
105
|
+
projectionMatrix.elements[6] = clipPlane.y;
|
|
106
|
+
projectionMatrix.elements[10] = clipPlane.z + 1.0;
|
|
107
|
+
projectionMatrix.elements[14] = clipPlane.w; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
108
|
+
}, []);
|
|
109
|
+
const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
|
|
110
|
+
const parameters = {
|
|
111
|
+
minFilter: LinearFilter,
|
|
112
|
+
magFilter: LinearFilter,
|
|
113
|
+
format: RGBFormat,
|
|
114
|
+
encoding: gl.outputEncoding
|
|
115
|
+
};
|
|
116
|
+
const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
|
|
117
|
+
fbo1.depthBuffer = true;
|
|
118
|
+
fbo1.depthTexture = new DepthTexture(resolution, resolution);
|
|
119
|
+
fbo1.depthTexture.format = DepthFormat;
|
|
120
|
+
fbo1.depthTexture.type = UnsignedShortType;
|
|
121
|
+
const fbo2 = new WebGLRenderTarget(resolution, resolution, parameters);
|
|
122
|
+
const blurpass = new BlurPass({
|
|
123
|
+
gl,
|
|
124
|
+
resolution,
|
|
125
|
+
width: blur[0],
|
|
126
|
+
height: blur[1],
|
|
127
|
+
minDepthThreshold,
|
|
128
|
+
maxDepthThreshold,
|
|
129
|
+
depthScale,
|
|
130
|
+
depthToBlurRatioBias
|
|
131
|
+
});
|
|
132
|
+
const reflectorProps = {
|
|
133
|
+
mirror,
|
|
134
|
+
textureMatrix,
|
|
135
|
+
mixBlur,
|
|
136
|
+
tDiffuse: fbo1.texture,
|
|
137
|
+
tDepth: fbo1.depthTexture,
|
|
138
|
+
tDiffuseBlur: fbo2.texture,
|
|
139
|
+
hasBlur,
|
|
140
|
+
mixStrength,
|
|
141
|
+
minDepthThreshold,
|
|
142
|
+
maxDepthThreshold,
|
|
143
|
+
depthScale,
|
|
144
|
+
depthToBlurRatioBias,
|
|
145
|
+
transparent: true,
|
|
146
|
+
debug,
|
|
147
|
+
distortion,
|
|
148
|
+
distortionMap,
|
|
149
|
+
gamma,
|
|
150
|
+
contrast,
|
|
151
|
+
brightness,
|
|
152
|
+
'defines-USE_BLUR': hasBlur ? '' : undefined,
|
|
153
|
+
'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
|
|
154
|
+
'defines-USE_DISTORTION': distortionMap ? '' : undefined
|
|
155
|
+
};
|
|
156
|
+
return [fbo1, fbo2, blurpass, reflectorProps];
|
|
157
|
+
}, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap, gamma, contrast, brightness]);
|
|
158
|
+
useFrame(() => {
|
|
159
|
+
var _materialRef$current2;
|
|
160
|
+
|
|
161
|
+
// TODO: As of R3f 7-8 this should be __r3f.parent
|
|
162
|
+
const parent = materialRef.current.parent || ((_materialRef$current2 = materialRef.current) == null ? void 0 : _materialRef$current2.__r3f.parent);
|
|
163
|
+
if (!parent) return;
|
|
164
|
+
parent.visible = false;
|
|
165
|
+
const currentXrEnabled = gl.xr.enabled;
|
|
166
|
+
const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
|
|
167
|
+
beforeRender();
|
|
168
|
+
gl.xr.enabled = false;
|
|
169
|
+
gl.shadowMap.autoUpdate = false;
|
|
170
|
+
gl.setRenderTarget(fbo1);
|
|
171
|
+
gl.state.buffers.depth.setMask(true);
|
|
172
|
+
if (!gl.autoClear) gl.clear();
|
|
173
|
+
gl.render(scene, virtualCamera);
|
|
174
|
+
if (hasBlur) blurpass.render(gl, fbo1, fbo2);
|
|
175
|
+
gl.xr.enabled = currentXrEnabled;
|
|
176
|
+
gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
|
|
177
|
+
parent.visible = true;
|
|
178
|
+
gl.setRenderTarget(null);
|
|
179
|
+
});
|
|
180
|
+
return /*#__PURE__*/React.createElement("meshReflectorMaterialImpl", _extends({
|
|
181
|
+
attach: "material" // Defines can't be updated dynamically, so we need to recreate the material
|
|
182
|
+
,
|
|
183
|
+
key: 'key' + reflectorProps['defines-USE_BLUR'] + reflectorProps['defines-USE_DEPTH'] + reflectorProps['defines-USE_DISTORTION'],
|
|
184
|
+
ref: mergeRefs([materialRef, ref])
|
|
185
|
+
}, reflectorProps, props));
|
|
186
|
+
});
|
|
187
|
+
|
|
188
|
+
export { MeshReflectorMaterial };
|
package/core/Reflector.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),s=require("../materials/MeshReflectorMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=i(e),d=l(t),c=i(n);a.extend({MeshReflectorMaterial:s.MeshReflectorMaterial});const m=d.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,blur:s=[0,0],args:i=[1,1],minDepthThreshold:l=.9,maxDepthThreshold:m=1,depthScale:p=0,depthToBlurRatioBias:h=.25,mirror:f=0,children:x,debug:M=0,distortion:b=1,gamma:g=1,contrast:w=1,brightness:T=0,distortionMap:y,...R},S)=>{d.useEffect((()=>{console.warn("Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!")}),[]);const j=a.useThree((({gl:e})=>e)),B=a.useThree((({camera:e})=>e)),v=a.useThree((({scene:e})=>e)),D=(s=Array.isArray(s)?s:[s,s])[0]+s[1]>0,P=d.useRef(null),[E]=d.useState((()=>new r.Plane)),[F]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.Vector3(0,0,-1))),[U]=d.useState((()=>new r.Vector4)),[_]=d.useState((()=>new r.Vector3)),[C]=d.useState((()=>new r.Vector3)),[L]=d.useState((()=>new r.Vector4)),[k]=d.useState((()=>new r.Matrix4)),[z]=d.useState((()=>new r.PerspectiveCamera)),A=d.useCallback((()=>{if(V.setFromMatrixPosition(P.current.matrixWorld),W.setFromMatrixPosition(B.matrixWorld),O.extractRotation(P.current.matrixWorld),F.set(0,0,1),F.applyMatrix4(O),_.subVectors(V,W),_.dot(F)>0)return;_.reflect(F).negate(),_.add(V),O.extractRotation(B.matrixWorld),q.set(0,0,-1),q.applyMatrix4(O),q.add(W),C.subVectors(V,q),C.reflect(F).negate(),C.add(V),z.position.copy(_),z.up.set(0,1,0),z.up.applyMatrix4(O),z.up.reflect(F),z.lookAt(C),z.far=B.far,z.updateMatrixWorld(),z.projectionMatrix.copy(B.projectionMatrix),k.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),k.multiply(z.projectionMatrix),k.multiply(z.matrixWorldInverse),k.multiply(P.current.matrixWorld),E.setFromNormalAndCoplanarPoint(F,V),E.applyMatrix4(z.matrixWorldInverse),U.set(E.normal.x,E.normal.y,E.normal.z,E.constant);const e=z.projectionMatrix;L.x=(Math.sign(U.x)+e.elements[8])/e.elements[0],L.y=(Math.sign(U.y)+e.elements[9])/e.elements[5],L.z=-1,L.w=(1+e.elements[10])/e.elements[14],U.multiplyScalar(2/U.dot(L)),e.elements[2]=U.x,e.elements[6]=U.y,e.elements[10]=U.z+1,e.elements[14]=U.w}),[]),[G,I,N,H]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:j.outputEncoding},i=new r.WebGLRenderTarget(n,n,a);i.depthBuffer=!0,i.depthTexture=new r.DepthTexture(n,n),i.depthTexture.format=r.DepthFormat,i.depthTexture.type=r.UnsignedShortType;const u=new r.WebGLRenderTarget(n,n,a);return[i,u,new o.BlurPass({gl:j,resolution:n,width:s[0],height:s[1],minDepthThreshold:l,maxDepthThreshold:m,depthScale:p,depthToBlurRatioBias:h}),{mirror:f,textureMatrix:k,mixBlur:e,tDiffuse:i.texture,tDepth:i.depthTexture,tDiffuseBlur:u.texture,hasBlur:D,mixStrength:t,minDepthThreshold:l,maxDepthThreshold:m,depthScale:p,depthToBlurRatioBias:h,transparent:!0,debug:M,distortion:b,distortionMap:y,gamma:g,contrast:w,brightness:T,"defines-USE_BLUR":D?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":y?"":void 0}]}),[j,s,k,n,f,D,e,t,l,m,p,h,M,b,y,g,w,T]);return a.useFrame((()=>{if(null==P||!P.current)return;P.current.visible=!1;const e=j.xr.enabled,t=j.shadowMap.autoUpdate;A(),j.xr.enabled=!1,j.shadowMap.autoUpdate=!1,j.setRenderTarget(G),j.state.buffers.depth.setMask(!0),j.autoClear||j.clear(),j.render(v,z),D&&N.render(j,G,I),j.xr.enabled=e,j.shadowMap.autoUpdate=t,P.current.visible=!0,j.setRenderTarget(null)})),d.createElement("mesh",u.default({ref:c.default([P,S])},R),d.createElement("planeBufferGeometry",{args:i}),x?x("meshReflectorMaterial",H):d.createElement("meshReflectorMaterial",H))}));exports.Reflector=m;
|
package/core/Reflector.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Mesh, Texture } from 'three';
|
|
3
|
-
import {
|
|
4
|
-
export declare type ReflectorChildProps = MeshReflectorMaterialImpl;
|
|
3
|
+
import { MeshReflectorMaterialProps } from '../materials/MeshReflectorMaterial';
|
|
5
4
|
export declare type ReflectorProps = Omit<JSX.IntrinsicElements['mesh'], 'args' | 'children'> & Pick<JSX.IntrinsicElements['planeBufferGeometry'], 'args'> & {
|
|
6
5
|
resolution?: number;
|
|
7
6
|
mixBlur?: number;
|
|
@@ -15,15 +14,18 @@ export declare type ReflectorProps = Omit<JSX.IntrinsicElements['mesh'], 'args'
|
|
|
15
14
|
debug?: number;
|
|
16
15
|
distortionMap?: Texture;
|
|
17
16
|
distortion?: number;
|
|
17
|
+
gamma?: number;
|
|
18
|
+
contrast?: number;
|
|
19
|
+
brightness?: number;
|
|
18
20
|
children?: {
|
|
19
|
-
(Component: React.ElementType<JSX.IntrinsicElements['meshReflectorMaterial']>, ComponentProps:
|
|
21
|
+
(Component: React.ElementType<JSX.IntrinsicElements['meshReflectorMaterial']>, ComponentProps: MeshReflectorMaterialProps): JSX.Element | null;
|
|
20
22
|
};
|
|
21
23
|
};
|
|
22
24
|
declare global {
|
|
23
25
|
namespace JSX {
|
|
24
26
|
interface IntrinsicElements {
|
|
25
|
-
meshReflectorMaterial:
|
|
27
|
+
meshReflectorMaterial: MeshReflectorMaterialProps;
|
|
26
28
|
}
|
|
27
29
|
}
|
|
28
30
|
}
|
|
29
|
-
export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "
|
|
31
|
+
export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "gamma" | "contrast" | "brightness" | "distortionMap"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
|
package/core/Reflector.js
CHANGED
|
@@ -10,7 +10,7 @@ extend({
|
|
|
10
10
|
MeshReflectorMaterial
|
|
11
11
|
});
|
|
12
12
|
const Reflector = /*#__PURE__*/React.forwardRef(({
|
|
13
|
-
mixBlur = 0
|
|
13
|
+
mixBlur = 0,
|
|
14
14
|
mixStrength = 0.5,
|
|
15
15
|
resolution = 256,
|
|
16
16
|
blur = [0, 0],
|
|
@@ -19,13 +19,19 @@ const Reflector = /*#__PURE__*/React.forwardRef(({
|
|
|
19
19
|
maxDepthThreshold = 1,
|
|
20
20
|
depthScale = 0,
|
|
21
21
|
depthToBlurRatioBias = 0.25,
|
|
22
|
-
mirror,
|
|
22
|
+
mirror = 0,
|
|
23
23
|
children,
|
|
24
24
|
debug = 0,
|
|
25
25
|
distortion = 1,
|
|
26
|
+
gamma = 1,
|
|
27
|
+
contrast = 1,
|
|
28
|
+
brightness = 0,
|
|
26
29
|
distortionMap,
|
|
27
30
|
...props
|
|
28
31
|
}, ref) => {
|
|
32
|
+
React.useEffect(() => {
|
|
33
|
+
console.warn('Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!');
|
|
34
|
+
}, []);
|
|
29
35
|
const gl = useThree(({
|
|
30
36
|
gl
|
|
31
37
|
}) => gl);
|
|
@@ -140,12 +146,15 @@ const Reflector = /*#__PURE__*/React.forwardRef(({
|
|
|
140
146
|
debug,
|
|
141
147
|
distortion,
|
|
142
148
|
distortionMap,
|
|
149
|
+
gamma,
|
|
150
|
+
contrast,
|
|
151
|
+
brightness,
|
|
143
152
|
'defines-USE_BLUR': hasBlur ? '' : undefined,
|
|
144
153
|
'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
|
|
145
154
|
'defines-USE_DISTORTION': distortionMap ? '' : undefined
|
|
146
155
|
};
|
|
147
156
|
return [fbo1, fbo2, blurpass, reflectorProps];
|
|
148
|
-
}, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap]);
|
|
157
|
+
}, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap, gamma, contrast, brightness]);
|
|
149
158
|
useFrame(() => {
|
|
150
159
|
if (!(meshRef != null && meshRef.current)) return;
|
|
151
160
|
meshRef.current.visible = false;
|
package/core/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),c=require("./Image.cjs.js"),j=require("./OrthographicCamera.cjs.js"),p=require("./PerspectiveCamera.cjs.js"),n=require("./CubeCamera.cjs.js"),l=require("./DeviceOrientationControls.cjs.js"),x=require("./FlyControls.cjs.js"),q=require("./MapControls.cjs.js"),d=require("./OrbitControls.cjs.js"),h=require("./TrackballControls.cjs.js"),C=require("./ArcballControls.cjs.js"),m=require("./TransformControls.cjs.js"),B=require("./PointerLockControls.cjs.js"),S=require("./FirstPersonControls.cjs.js"),f=require("./GizmoHelper.cjs.js"),b=require("./GizmoViewcube.cjs.js"),P=require("./GizmoViewport.cjs.js"),M=require("./useCubeTexture.cjs.js"),T=require("./useFBX.cjs.js"),g=require("./useGLTF.cjs.js"),v=require("./useProgress.cjs.js"),D=require("./useTexture.cjs.js"),L=require("./Stats.cjs.js"),A=require("./DepthBuffer.cjs.js"),G=require("./useDepthBuffer.cjs.js"),k=require("./useAspect.cjs.js"),F=require("./useCamera.cjs.js"),w=require("./useDetectGPU.cjs.js"),z=require("./useHelper.cjs.js"),I=require("./useBVH.cjs.js"),O=require("./useContextBridge.cjs.js"),E=require("./useAnimations.cjs.js"),R=require("./useFBO.cjs.js"),y=require("./useIntersect.cjs.js"),H=require("./useSimplification.cjs.js"),V=require("./useTessellation.cjs.js"),Q=require("./useEdgeSplit.cjs.js"),W=require("./CurveModifier.cjs.js"),N=require("./MeshDistortMaterial.cjs.js"),U=require("./MeshWobbleMaterial.cjs.js"),X=require("./MeshReflectorMaterial.cjs.js"),K=require("./PointMaterial.cjs.js"),_=require("./shaderMaterial.cjs.js"),J=require("./softShadows.cjs.js"),Y=require("./shapes.cjs.js"),Z=require("./RoundedBox.cjs.js"),$=require("./ScreenQuad.cjs.js"),ee=require("./Center.cjs.js"),re=require("./Bounds.cjs.js"),se=require("./CameraShake.cjs.js"),te=require("./Float.cjs.js"),oe=require("./Stage.cjs.js"),ie=require("./Backdrop.cjs.js"),ue=require("./Shadow.cjs.js"),ae=require("./ContactShadows.cjs.js"),ce=require("./Reflector.cjs.js"),je=require("./SpotLight.cjs.js"),pe=require("./Environment.cjs.js"),ne=require("./Sky.cjs.js"),le=require("./Stars.cjs.js"),xe=require("./Cloud.cjs.js"),qe=require("./useMatcapTexture.cjs.js"),de=require("./useNormalTexture.cjs.js"),he=require("./Points.cjs.js"),Ce=require("./Instances.cjs.js"),me=require("./Segments.cjs.js"),Be=require("./Detailed.cjs.js"),Se=require("./Preload.cjs.js"),fe=require("./BakeShadows.cjs.js"),be=require("./meshBounds.cjs.js"),Pe=require("./AdaptiveDpr.cjs.js"),Me=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("use-asset"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../assets/cloud.base64.cjs.js"),require("../helpers/matcap-assets.cjs.js"),require("../helpers/normal-assets.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=c.Image,exports.OrthographicCamera=j.OrthographicCamera,exports.PerspectiveCamera=p.PerspectiveCamera,exports.CubeCamera=n.CubeCamera,exports.DeviceOrientationControls=l.DeviceOrientationControls,exports.FlyControls=x.FlyControls,exports.MapControls=q.MapControls,exports.OrbitControls=d.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=C.ArcballControls,exports.TransformControls=m.TransformControls,exports.PointerLockControls=B.PointerLockControls,exports.FirstPersonControls=S.FirstPersonControls,exports.GizmoHelper=f.GizmoHelper,exports.useGizmoContext=f.useGizmoContext,exports.GizmoViewcube=b.GizmoViewcube,exports.GizmoViewport=P.GizmoViewport,exports.useCubeTexture=M.useCubeTexture,exports.useFBX=T.useFBX,exports.useGLTF=g.useGLTF,exports.useProgress=v.useProgress,exports.IsObject=D.IsObject,exports.useTexture=D.useTexture,exports.Stats=L.Stats,exports.DepthBuffer=A.DepthBuffer,exports.useDepthBuffer=G.useDepthBuffer,exports.useAspect=k.useAspect,exports.useCamera=F.useCamera,exports.useDetectGPU=w.useDetectGPU,exports.useHelper=z.useHelper,exports.useBVH=I.useBVH,exports.useContextBridge=O.useContextBridge,exports.useAnimations=E.useAnimations,exports.useFBO=R.useFBO,exports.useIntersect=y.useIntersect,exports.useSimplification=H.useSimplification,exports.useTessellation=V.useTessellation,exports.useEdgeSplit=Q.useEdgeSplit,exports.CurveModifier=W.CurveModifier,exports.MeshDistortMaterial=N.MeshDistortMaterial,exports.MeshWobbleMaterial=U.MeshWobbleMaterial,exports.MeshReflectorMaterial=X.MeshReflectorMaterial,exports.PointMaterial=K.PointMaterial,exports.PointMaterialImpl=K.PointMaterialImpl,exports.shaderMaterial=_.shaderMaterial,exports.softShadows=J.softShadows,exports.Box=Y.Box,exports.Circle=Y.Circle,exports.Cone=Y.Cone,exports.Cylinder=Y.Cylinder,exports.Dodecahedron=Y.Dodecahedron,exports.Extrude=Y.Extrude,exports.Icosahedron=Y.Icosahedron,exports.Lathe=Y.Lathe,exports.Octahedron=Y.Octahedron,exports.Parametric=Y.Parametric,exports.Plane=Y.Plane,exports.Polyhedron=Y.Polyhedron,exports.Ring=Y.Ring,exports.Sphere=Y.Sphere,exports.Tetrahedron=Y.Tetrahedron,exports.Torus=Y.Torus,exports.TorusKnot=Y.TorusKnot,exports.Tube=Y.Tube,exports.RoundedBox=Z.RoundedBox,exports.ScreenQuad=$.ScreenQuad,exports.Center=ee.Center,exports.Bounds=re.Bounds,exports.useBounds=re.useBounds,exports.CameraShake=se.CameraShake,exports.Float=te.Float,exports.Stage=oe.Stage,exports.Backdrop=ie.Backdrop,exports.Shadow=ue.Shadow,exports.ContactShadows=ae.ContactShadows,exports.Reflector=ce.Reflector,exports.SpotLight=je.SpotLight,exports.Environment=pe.Environment,exports.Sky=ne.Sky,exports.calcPosFromAngles=ne.calcPosFromAngles,exports.Stars=le.Stars,exports.Cloud=xe.Cloud,exports.useMatcapTexture=qe.useMatcapTexture,exports.useNormalTexture=de.useNormalTexture,exports.Point=he.Point,exports.Points=he.Points,exports.PointsBuffer=he.PointsBuffer,exports.Instance=Ce.Instance,exports.Instances=Ce.Instances,exports.Merged=Ce.Merged,exports.Segment=me.Segment,exports.Segments=me.Segments,exports.Detailed=Be.Detailed,exports.Preload=Se.Preload,exports.BakeShadows=fe.BakeShadows,exports.meshBounds=be.meshBounds,exports.AdaptiveDpr=Pe.AdaptiveDpr,exports.AdaptiveEvents=Me.AdaptiveEvents;
|
package/core/index.d.ts
CHANGED
|
@@ -45,6 +45,7 @@ export * from './useEdgeSplit';
|
|
|
45
45
|
export * from './CurveModifier';
|
|
46
46
|
export * from './MeshDistortMaterial';
|
|
47
47
|
export * from './MeshWobbleMaterial';
|
|
48
|
+
export * from './MeshReflectorMaterial';
|
|
48
49
|
export * from './PointMaterial';
|
|
49
50
|
export * from './shaderMaterial';
|
|
50
51
|
export * from './softShadows';
|
package/core/index.js
CHANGED
|
@@ -45,6 +45,7 @@ export { useEdgeSplit } from './useEdgeSplit.js';
|
|
|
45
45
|
export { CurveModifier } from './CurveModifier.js';
|
|
46
46
|
export { MeshDistortMaterial } from './MeshDistortMaterial.js';
|
|
47
47
|
export { MeshWobbleMaterial } from './MeshWobbleMaterial.js';
|
|
48
|
+
export { MeshReflectorMaterial } from './MeshReflectorMaterial.js';
|
|
48
49
|
export { PointMaterial, PointMaterialImpl } from './PointMaterial.js';
|
|
49
50
|
export { shaderMaterial } from './shaderMaterial.js';
|
|
50
51
|
export { softShadows } from './softShadows.js';
|
|
@@ -91,10 +92,10 @@ import '../helpers/useEffectfulState.js';
|
|
|
91
92
|
import 'detect-gpu';
|
|
92
93
|
import 'use-asset';
|
|
93
94
|
import 'three-mesh-bvh';
|
|
94
|
-
import '../helpers/environment-assets.js';
|
|
95
95
|
import '../materials/BlurPass.js';
|
|
96
96
|
import '../materials/ConvolutionMaterial.js';
|
|
97
97
|
import '../materials/MeshReflectorMaterial.js';
|
|
98
|
+
import '../helpers/environment-assets.js';
|
|
98
99
|
import '../materials/SpotLightMaterial.js';
|
|
99
100
|
import '../assets/cloud.base64.js';
|
|
100
101
|
import '../helpers/matcap-assets.js';
|