@react-three/drei 9.56.24 → 9.56.26
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 +8 -8
- package/core/Billboard.cjs.js +1 -1
- package/core/Billboard.js +1 -1
- package/core/MeshRefractionMaterial.cjs.js +1 -1
- package/core/MeshRefractionMaterial.js +13 -5
- package/index.cjs.js +1 -1
- package/materials/MeshRefractionMaterial.cjs.js +1 -1
- package/materials/MeshRefractionMaterial.js +40 -34
- package/package.json +1 -1
- package/web/Html.cjs.js +1 -1
- package/web/Html.js +11 -4
package/README.md
CHANGED
|
@@ -318,7 +318,7 @@ type Props = JSX.IntrinsicElements['group'] & {
|
|
|
318
318
|
}
|
|
319
319
|
```
|
|
320
320
|
|
|
321
|
-
Using the `frames` prop you can control if this camera renders
|
|
321
|
+
Using the `frames` prop you can control if this camera renders indefinitely or statically (a given number of times).
|
|
322
322
|
If you have two static objects in the scene, make it `frames={2}` for instance, so that both objects get to "see" one another in the reflections, which takes multiple renders.
|
|
323
323
|
If you have moving objects, unset the prop and use a smaller `resolution` instead.
|
|
324
324
|
|
|
@@ -389,11 +389,11 @@ type CameraControlsProps = {
|
|
|
389
389
|
type ScrollControlsProps = {
|
|
390
390
|
/** Precision, default 0.00001 */
|
|
391
391
|
eps?: number
|
|
392
|
-
/**
|
|
392
|
+
/** Horizontal scroll, default false (vertical) */
|
|
393
393
|
horizontal?: boolean
|
|
394
394
|
/** Infinite scroll, default false (experimental!) */
|
|
395
395
|
infinite?: boolean
|
|
396
|
-
/** Defines the
|
|
396
|
+
/** Defines the length of the scroll area, each page is height:100%, default 1 */
|
|
397
397
|
pages?: number
|
|
398
398
|
/** A factor that increases scroll bar travel, default 1 */
|
|
399
399
|
distance?: number
|
|
@@ -415,7 +415,7 @@ Scroll controls create a HTML scroll container in front of the canvas. Everythin
|
|
|
415
415
|
You can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view.
|
|
416
416
|
|
|
417
417
|
```jsx
|
|
418
|
-
|
|
418
|
+
<ScrollControls pages={3} damping={0.1}>
|
|
419
419
|
{/* Canvas contents in here will *not* scroll, but receive useScroll! */}
|
|
420
420
|
<SomeModel />
|
|
421
421
|
<Scroll>
|
|
@@ -1340,7 +1340,7 @@ The decal box has to intersect the surface, otherwise it will not be visible. if
|
|
|
1340
1340
|
</mesh>
|
|
1341
1341
|
```
|
|
1342
1342
|
|
|
1343
|
-
If you do not
|
|
1343
|
+
If you do not specify a material it will create a transparent meshStandardMaterial with a polygonOffsetFactor of -10 and all rest-props will be spread over it.
|
|
1344
1344
|
|
|
1345
1345
|
```jsx
|
|
1346
1346
|
<mesh>
|
|
@@ -1427,7 +1427,7 @@ Easily add reflections and/or blur to any mesh. It takes surface roughness into
|
|
|
1427
1427
|
<mesh>
|
|
1428
1428
|
<planeGeometry />
|
|
1429
1429
|
<MeshReflectorMaterial
|
|
1430
|
-
blur={[0, 0]} // Blur ground reflections (width,
|
|
1430
|
+
blur={[0, 0]} // Blur ground reflections (width, height), 0 skips blur
|
|
1431
1431
|
mixBlur={0} // How much blur mixes with surface roughness (default = 1)
|
|
1432
1432
|
mixStrength={1} // Strength of the reflections
|
|
1433
1433
|
mixContrast={1} // Contrast of the reflections
|
|
@@ -1588,7 +1588,7 @@ return (
|
|
|
1588
1588
|
<MeshTransmissionMaterial />
|
|
1589
1589
|
```
|
|
1590
1590
|
|
|
1591
|
-
If each material rendering the scene on its own is too
|
|
1591
|
+
If each material rendering the scene on its own is too expensive you can share a buffer texture. Either by enabling `transmissionSampler` which would use the threejs-internal buffer that MeshPhysicalMaterials use. This might be faster, the downside is that no transmissive material can "see" other transparent or transmissive objects.
|
|
1592
1592
|
|
|
1593
1593
|
```jsx
|
|
1594
1594
|
<mesh geometry={torus}>
|
|
@@ -1837,7 +1837,7 @@ const [hidden, set] = useState()
|
|
|
1837
1837
|
Html can hide behind geometry as if it was part of the 3D scene using this mode. It can be enabled by using `"blending"` as the `occlude` prop.
|
|
1838
1838
|
|
|
1839
1839
|
```jsx
|
|
1840
|
-
// Enable real
|
|
1840
|
+
// Enable real occlusion
|
|
1841
1841
|
<Html occlude="blending" />
|
|
1842
1842
|
```
|
|
1843
1843
|
|
package/core/Billboard.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("react-merge-refs");function o(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)}var c=o(e),a=u(r),f=o(n);const i=a.forwardRef((function({follow:e=!0,lockX:r=!1,lockY:n=!1,lockZ:o=!1,...u},i){const l=a.useRef();return t.useFrame((({camera:t})=>{if(!e||!l.current)return;const u=l.current.rotation.clone();l.current.quaternion
|
|
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("react-merge-refs");function o(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)}var c=o(e),a=u(r),f=o(n);const i=a.forwardRef((function({follow:e=!0,lockX:r=!1,lockY:n=!1,lockZ:o=!1,...u},i){const l=a.useRef();return t.useFrame((({camera:t})=>{if(!e||!l.current)return;const u=l.current.rotation.clone();t.getWorldQuaternion(l.current.quaternion),r&&(l.current.rotation.x=u.x),n&&(l.current.rotation.y=u.y),o&&(l.current.rotation.z=u.z)})),a.createElement("group",c.default({ref:f.default([l,i])},u))}));exports.Billboard=i;
|
package/core/Billboard.js
CHANGED
|
@@ -27,7 +27,7 @@ const Billboard = /*#__PURE__*/React.forwardRef(function Billboard({
|
|
|
27
27
|
|
|
28
28
|
const prevRotation = localRef.current.rotation.clone(); // always face the camera
|
|
29
29
|
|
|
30
|
-
localRef.current.quaternion
|
|
30
|
+
camera.getWorldQuaternion(localRef.current.quaternion); // readjust any axis that is locked
|
|
31
31
|
|
|
32
32
|
if (lockX) localRef.current.rotation.x = prevRotation.x;
|
|
33
33
|
if (lockY) localRef.current.rotation.y = prevRotation.y;
|
|
@@ -1 +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"),a=require("three-mesh-bvh"),n=require("../materials/MeshRefractionMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),a=require("three-mesh-bvh"),n=require("../materials/MeshRefractionMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("./shaderMaterial.cjs.js");var u=i(e),s=o(r);exports.MeshRefractionMaterial=function({aberrationStrength:e=0,fastChroma:i=!0,envMap:o,...c}){t.extend({MeshRefractionMaterial:n.MeshRefractionMaterial});const l=r.useRef(),{size:f}=t.useThree(),M=r.useMemo((()=>{var r,t;const a={},n=(u=o)&&u.isCubeTexture;var u;const s=(null!==(r=n?null==(t=o.image[0])?void 0:t.width:o.image.width)&&void 0!==r?r:1024)/4,c=Math.floor(Math.log2(s)),l=Math.pow(2,c),f=3*Math.max(l,112),M=4*l;return n&&(a.ENVMAP_TYPE_CUBEM=""),a.CUBEUV_TEXEL_WIDTH=""+1/f,a.CUBEUV_TEXEL_HEIGHT=""+1/M,a.CUBEUV_MAX_MIP=`${c}.0`,e>0&&(a.CHROMATIC_ABERRATIONS=""),i&&(a.FAST_CHROMA=""),a}),[e,i]);return r.useLayoutEffect((()=>{var e,r,t;const n=null==(e=l.current)||null==(r=e.__r3f)||null==(t=r.parent)?void 0:t.geometry;n&&l.current.bvh.updateFrom(new a.MeshBVH(n.toNonIndexed(),{lazyGeneration:!1,strategy:a.SAH}))}),[]),t.useFrame((({camera:e})=>{l.current.viewMatrixInverse=e.matrixWorld,l.current.projectionMatrixInverse=e.projectionMatrixInverse})),s.createElement("meshRefractionMaterial",u.default({key:JSON.stringify(M),defines:M,ref:l,resolution:[f.width,f.height],aberrationStrength:e,envMap:o},c))};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useRef, useMemo, useLayoutEffect } from 'react';
|
|
4
|
-
import { extend, useThree } from '@react-three/fiber';
|
|
4
|
+
import { extend, useThree, useFrame } from '@react-three/fiber';
|
|
5
5
|
import { MeshBVH, SAH } from 'three-mesh-bvh';
|
|
6
6
|
import { MeshRefractionMaterial as MeshRefractionMaterial$1 } from '../materials/MeshRefractionMaterial.js';
|
|
7
7
|
|
|
@@ -50,11 +50,19 @@ function MeshRefractionMaterial({
|
|
|
50
50
|
// Get the geometry of this materials parent
|
|
51
51
|
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; // Update the BVH
|
|
52
52
|
|
|
53
|
-
if (geometry)
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
if (geometry) {
|
|
54
|
+
material.current.bvh.updateFrom(new MeshBVH(geometry.toNonIndexed(), {
|
|
55
|
+
lazyGeneration: false,
|
|
56
|
+
strategy: SAH
|
|
57
|
+
}));
|
|
58
|
+
}
|
|
57
59
|
}, []);
|
|
60
|
+
useFrame(({
|
|
61
|
+
camera
|
|
62
|
+
}) => {
|
|
63
|
+
material.current.viewMatrixInverse = camera.matrixWorld;
|
|
64
|
+
material.current.projectionMatrixInverse = camera.projectionMatrixInverse;
|
|
65
|
+
});
|
|
58
66
|
return /*#__PURE__*/React.createElement("meshRefractionMaterial", _extends({
|
|
59
67
|
// @ts-ignore
|
|
60
68
|
key: JSON.stringify(defines) // @ts-ignore
|