@react-three/drei 9.29.2 → 9.30.1
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 +19 -0
- package/core/MeshRefractionMaterial.cjs.js +1 -0
- package/core/MeshRefractionMaterial.d.ts +25 -0
- package/core/MeshRefractionMaterial.js +48 -0
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.js +2 -0
- package/index.cjs.js +1 -1
- package/index.js +1 -0
- package/materials/MeshRefractionMaterial.cjs.js +1 -0
- package/materials/MeshRefractionMaterial.d.ts +4 -0
- package/materials/MeshRefractionMaterial.js +118 -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
|
@@ -80,6 +80,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
80
80
|
<li><a href="#meshreflectormaterial">MeshReflectorMaterial</a></li>
|
|
81
81
|
<li><a href="#meshwobblematerial">MeshWobbleMaterial</a></li>
|
|
82
82
|
<li><a href="#meshdistortmaterial">MeshDistortMaterial</a></li>
|
|
83
|
+
<li><a href="#meshrefractionmaterial">MeshRefractionMaterial</a></li>
|
|
83
84
|
<li><a href="#pointmaterial">PointMaterial</a></li>
|
|
84
85
|
<li><a href="#softshadows">softShadows</a></li>
|
|
85
86
|
<li><a href="#shadermaterial">shaderMaterial</a></li>
|
|
@@ -1158,6 +1159,24 @@ This material makes your geometry distort following simplex noise.
|
|
|
1158
1159
|
</mesh>
|
|
1159
1160
|
```
|
|
1160
1161
|
|
|
1162
|
+
#### MeshRefractionMaterial
|
|
1163
|
+
|
|
1164
|
+
<p>
|
|
1165
|
+
<a href="https://codesandbox.io/s/zqrreo"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/zqrreo/screenshot.png" alt="Demo"/></a>
|
|
1166
|
+
</p>
|
|
1167
|
+
|
|
1168
|
+
A convincing Glass/Diamond refraction material. Best pair it with a cube-camera!
|
|
1169
|
+
|
|
1170
|
+
```jsx
|
|
1171
|
+
<CubeCamera>
|
|
1172
|
+
{(texture) => (
|
|
1173
|
+
<mesh geometry={diamondGeometry} {...props}>
|
|
1174
|
+
<RefractionMaterial envMap={texture} toneMapped={false} />
|
|
1175
|
+
</mesh>
|
|
1176
|
+
)}
|
|
1177
|
+
</CubeCamera>
|
|
1178
|
+
```
|
|
1179
|
+
|
|
1161
1180
|
#### PointMaterial
|
|
1162
1181
|
|
|
1163
1182
|
<p>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three-mesh-bvh"),a=require("../materials/MeshRefractionMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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)}require("three"),require("./shaderMaterial.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({frames:e=1,resolution:i=256,near:u=.1,far:c=1e3,aberrationStrength:f=0,...l}){t.extend({MeshRefractionMaterial:a.MeshRefractionMaterial});const h=r.useRef(),{size:d}=t.useThree(),b=r.useMemo((()=>{const e={};return f>0&&(e.CHROMATIC_ABERRATIONS=""),e}),[f]);return r.useLayoutEffect((()=>{var e,r,t;const a=null==(e=h.current)||null==(r=e.__r3f)||null==(t=r.parent)?void 0:t.geometry;a&&h.current.bvh.updateFrom(new n.MeshBVH(a.toNonIndexed(),{lazyGeneration:!1,strategy:n.SAH}))}),[]),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(!!f),defines:b,ref:h,resolution:[d.width,d.height],aberrationStrength:f},l))};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import * as THREE from 'three';
|
|
3
|
+
import { ReactThreeFiber } from '@react-three/fiber';
|
|
4
|
+
import { MeshRefractionMaterial as MeshRefractionMaterial_ } from '../materials/MeshRefractionMaterial';
|
|
5
|
+
declare global {
|
|
6
|
+
namespace JSX {
|
|
7
|
+
interface IntrinsicElements {
|
|
8
|
+
meshRefractionMaterial: typeof MeshRefractionMaterial_;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
declare type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
|
|
13
|
+
bounces?: number;
|
|
14
|
+
ior?: number;
|
|
15
|
+
fresnel?: number;
|
|
16
|
+
aberrationStrength?: number;
|
|
17
|
+
color?: ReactThreeFiber.Color;
|
|
18
|
+
resolution?: ReactThreeFiber.Vector2;
|
|
19
|
+
envMap?: THREE.Texture;
|
|
20
|
+
frames?: number;
|
|
21
|
+
near?: number;
|
|
22
|
+
far?: number;
|
|
23
|
+
};
|
|
24
|
+
export declare function MeshRefractionMaterial({ frames, resolution, near, far, aberrationStrength, ...props }: MeshRefractionMaterialProps): JSX.Element;
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useRef, useMemo, useLayoutEffect } from 'react';
|
|
4
|
+
import { extend, useThree } from '@react-three/fiber';
|
|
5
|
+
import { MeshBVH, SAH } from 'three-mesh-bvh';
|
|
6
|
+
import { MeshRefractionMaterial as MeshRefractionMaterial$1 } from '../materials/MeshRefractionMaterial.js';
|
|
7
|
+
|
|
8
|
+
function MeshRefractionMaterial({
|
|
9
|
+
frames = 1,
|
|
10
|
+
resolution = 256,
|
|
11
|
+
near = 0.1,
|
|
12
|
+
far = 1000,
|
|
13
|
+
aberrationStrength = 0,
|
|
14
|
+
...props
|
|
15
|
+
}) {
|
|
16
|
+
extend({
|
|
17
|
+
MeshRefractionMaterial: MeshRefractionMaterial$1
|
|
18
|
+
});
|
|
19
|
+
const material = useRef();
|
|
20
|
+
const {
|
|
21
|
+
size
|
|
22
|
+
} = useThree();
|
|
23
|
+
const defines = useMemo(() => {
|
|
24
|
+
const temp = {};
|
|
25
|
+
if (aberrationStrength > 0) temp.CHROMATIC_ABERRATIONS = '';
|
|
26
|
+
return temp;
|
|
27
|
+
}, [aberrationStrength]);
|
|
28
|
+
useLayoutEffect(() => {
|
|
29
|
+
var _material$current, _material$current$__r, _material$current$__r2;
|
|
30
|
+
|
|
31
|
+
const geometry = (_material$current = material.current) == null ? void 0 : (_material$current$__r = _material$current.__r3f) == null ? void 0 : (_material$current$__r2 = _material$current$__r.parent) == null ? void 0 : _material$current$__r2.geometry;
|
|
32
|
+
if (geometry) material.current.bvh.updateFrom(new MeshBVH(geometry.toNonIndexed(), {
|
|
33
|
+
lazyGeneration: false,
|
|
34
|
+
strategy: SAH
|
|
35
|
+
}));
|
|
36
|
+
}, []);
|
|
37
|
+
return /*#__PURE__*/React.createElement("meshRefractionMaterial", _extends({
|
|
38
|
+
// @ts-ignore
|
|
39
|
+
key: JSON.stringify(!!aberrationStrength) // @ts-ignore
|
|
40
|
+
,
|
|
41
|
+
defines: defines,
|
|
42
|
+
ref: material,
|
|
43
|
+
resolution: [size.width, size.height],
|
|
44
|
+
aberrationStrength: aberrationStrength
|
|
45
|
+
}, props));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export { MeshRefractionMaterial };
|
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("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),c=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=require("./OrthographicCamera.cjs.js"),M=require("./PerspectiveCamera.cjs.js"),S=require("./CubeCamera.cjs.js"),b=require("./DeviceOrientationControls.cjs.js"),P=require("./FlyControls.cjs.js"),B=require("./MapControls.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("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),c=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=require("./OrthographicCamera.cjs.js"),M=require("./PerspectiveCamera.cjs.js"),S=require("./CubeCamera.cjs.js"),b=require("./DeviceOrientationControls.cjs.js"),P=require("./FlyControls.cjs.js"),B=require("./MapControls.cjs.js"),f=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),g=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),L=require("./FirstPersonControls.cjs.js"),k=require("./pivotControls/index.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),F=require("./useFBX.cjs.js"),G=require("./useGLTF.cjs.js"),z=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),V=require("./useVideoTexture.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),Q=require("./useAspect.cjs.js"),X=require("./useCamera.cjs.js"),K=require("./useDetectGPU.cjs.js"),W=require("./useHelper.cjs.js"),N=require("./useBVH.cjs.js"),U=require("./useContextBridge.cjs.js"),_=require("./useAnimations.cjs.js"),J=require("./useFBO.cjs.js"),Y=require("./useIntersect.cjs.js"),Z=require("./useBoxProjectedEnv.cjs.js"),$=require("./BBAnchor.cjs.js"),ee=require("./CurveModifier.cjs.js"),re=require("./MeshDistortMaterial.cjs.js"),se=require("./MeshWobbleMaterial.cjs.js"),te=require("./MeshReflectorMaterial.cjs.js"),oe=require("./MeshRefractionMaterial.cjs.js"),ie=require("./PointMaterial.cjs.js"),ue=require("./shaderMaterial.cjs.js"),ae=require("./softShadows.cjs.js"),ce=require("./shapes.cjs.js"),ne=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./Center.cjs.js"),le=require("./Bounds.cjs.js"),xe=require("./CameraShake.cjs.js"),qe=require("./Float.cjs.js"),de=require("./Stage.cjs.js"),me=require("./Backdrop.cjs.js"),Ce=require("./Shadow.cjs.js"),he=require("./ContactShadows.cjs.js"),Me=require("./AccumulativeShadows.cjs.js"),Se=require("./Reflector.cjs.js"),be=require("./SpotLight.cjs.js"),Pe=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),fe=require("./Sky.cjs.js"),Te=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),Ae=require("./useMatcapTexture.cjs.js"),Le=require("./useNormalTexture.cjs.js"),ke=require("./Points.cjs.js"),De=require("./Instances.cjs.js"),Ee=require("./Segments.cjs.js"),Re=require("./Detailed.cjs.js"),we=require("./Preload.cjs.js"),Fe=require("./BakeShadows.cjs.js"),Ge=require("./meshBounds.cjs.js"),ze=require("./AdaptiveDpr.cjs.js"),Oe=require("./AdaptiveEvents.cjs.js"),Ie=require("./PerformanceMonitor.cjs.js"),Ve=require("./RenderTexture.cjs.js"),ye=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("./pivotControls/AxisArrow.cjs.js"),require("./pivotControls/context.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("../web/Html.cjs.js"),require("react-dom/client"),require("lodash.clamp"),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("../materials/MeshRefractionMaterial.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.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=x.Sampler,exports.useSurfaceSampler=x.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=C.Decal,exports.OrthographicCamera=h.OrthographicCamera,exports.PerspectiveCamera=M.PerspectiveCamera,exports.CubeCamera=S.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=P.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=f.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=g.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=L.FirstPersonControls,exports.PivotControls=k.PivotControls,exports.calculateScaleFactor=k.calculateScaleFactor,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=F.useFBX,exports.useGLTF=G.useGLTF,exports.useKTX2=z.useKTX2,exports.useProgress=O.useProgress,exports.IsObject=I.IsObject,exports.useTexture=I.useTexture,exports.useVideoTexture=V.useVideoTexture,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=Q.useAspect,exports.useCamera=X.useCamera,exports.useDetectGPU=K.useDetectGPU,exports.useHelper=W.useHelper,exports.useBVH=N.useBVH,exports.useContextBridge=U.useContextBridge,exports.useAnimations=_.useAnimations,exports.useFBO=J.useFBO,exports.useIntersect=Y.useIntersect,exports.useBoxProjectedEnv=Z.useBoxProjectedEnv,exports.BBAnchor=$.BBAnchor,exports.CurveModifier=ee.CurveModifier,exports.MeshDistortMaterial=re.MeshDistortMaterial,exports.MeshWobbleMaterial=se.MeshWobbleMaterial,exports.MeshReflectorMaterial=te.MeshReflectorMaterial,exports.MeshRefractionMaterial=oe.MeshRefractionMaterial,exports.PointMaterial=ie.PointMaterial,exports.PointMaterialImpl=ie.PointMaterialImpl,exports.shaderMaterial=ue.shaderMaterial,exports.softShadows=ae.softShadows,exports.Box=ce.Box,exports.Capsule=ce.Capsule,exports.Circle=ce.Circle,exports.Cone=ce.Cone,exports.Cylinder=ce.Cylinder,exports.Dodecahedron=ce.Dodecahedron,exports.Extrude=ce.Extrude,exports.Icosahedron=ce.Icosahedron,exports.Lathe=ce.Lathe,exports.Octahedron=ce.Octahedron,exports.Plane=ce.Plane,exports.Polyhedron=ce.Polyhedron,exports.Ring=ce.Ring,exports.Sphere=ce.Sphere,exports.Tetrahedron=ce.Tetrahedron,exports.Torus=ce.Torus,exports.TorusKnot=ce.TorusKnot,exports.Tube=ce.Tube,exports.RoundedBox=ne.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.Center=pe.Center,exports.Bounds=le.Bounds,exports.useBounds=le.useBounds,exports.CameraShake=xe.CameraShake,exports.Float=qe.Float,exports.Stage=de.Stage,exports.Backdrop=me.Backdrop,exports.Shadow=Ce.Shadow,exports.ContactShadows=he.ContactShadows,exports.AccumulativeShadows=Me.AccumulativeShadows,exports.RandomizedLight=Me.RandomizedLight,exports.accumulativeContext=Me.accumulativeContext,exports.Reflector=Se.Reflector,exports.SpotLight=be.SpotLight,exports.Environment=Pe.Environment,exports.EnvironmentCube=Pe.EnvironmentCube,exports.EnvironmentMap=Pe.EnvironmentMap,exports.EnvironmentPortal=Pe.EnvironmentPortal,exports.useEnvironment=Pe.useEnvironment,exports.Lightformer=Be.Lightformer,exports.Sky=fe.Sky,exports.calcPosFromAngles=fe.calcPosFromAngles,exports.Stars=Te.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=ge.Sparkles,exports.useMatcapTexture=Ae.useMatcapTexture,exports.useNormalTexture=Le.useNormalTexture,exports.Point=ke.Point,exports.Points=ke.Points,exports.PointsBuffer=ke.PointsBuffer,exports.Instance=De.Instance,exports.Instances=De.Instances,exports.Merged=De.Merged,exports.Segment=Ee.Segment,exports.SegmentObject=Ee.SegmentObject,exports.Segments=Ee.Segments,exports.Detailed=Re.Detailed,exports.Preload=we.Preload,exports.BakeShadows=Fe.BakeShadows,exports.meshBounds=Ge.meshBounds,exports.AdaptiveDpr=ze.AdaptiveDpr,exports.AdaptiveEvents=Oe.AdaptiveEvents,exports.PerformanceMonitor=Ie.PerformanceMonitor,exports.usePerformanceMonitor=Ie.usePerformanceMonitor,exports.RenderTexture=Ve.RenderTexture,exports.Mask=ye.Mask,exports.useMask=ye.useMask;
|
package/core/index.d.ts
CHANGED
|
@@ -56,6 +56,7 @@ export * from './CurveModifier';
|
|
|
56
56
|
export * from './MeshDistortMaterial';
|
|
57
57
|
export * from './MeshWobbleMaterial';
|
|
58
58
|
export * from './MeshReflectorMaterial';
|
|
59
|
+
export * from './MeshRefractionMaterial';
|
|
59
60
|
export * from './PointMaterial';
|
|
60
61
|
export * from './shaderMaterial';
|
|
61
62
|
export * from './softShadows';
|
package/core/index.js
CHANGED
|
@@ -56,6 +56,7 @@ export { CurveModifier } from './CurveModifier.js';
|
|
|
56
56
|
export { MeshDistortMaterial } from './MeshDistortMaterial.js';
|
|
57
57
|
export { MeshWobbleMaterial } from './MeshWobbleMaterial.js';
|
|
58
58
|
export { MeshReflectorMaterial } from './MeshReflectorMaterial.js';
|
|
59
|
+
export { MeshRefractionMaterial } from './MeshRefractionMaterial.js';
|
|
59
60
|
export { PointMaterial, PointMaterialImpl } from './PointMaterial.js';
|
|
60
61
|
export { shaderMaterial } from './shaderMaterial.js';
|
|
61
62
|
export { softShadows } from './softShadows.js';
|
|
@@ -119,6 +120,7 @@ import 'three-mesh-bvh';
|
|
|
119
120
|
import '../materials/BlurPass.js';
|
|
120
121
|
import '../materials/ConvolutionMaterial.js';
|
|
121
122
|
import '../materials/MeshReflectorMaterial.js';
|
|
123
|
+
import '../materials/MeshRefractionMaterial.js';
|
|
122
124
|
import '../helpers/environment-assets.js';
|
|
123
125
|
import '../materials/SpotLightMaterial.js';
|
|
124
126
|
import '../helpers/Position.js';
|