@react-three/drei 9.62.4 → 9.64.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 +32 -0
- package/core/CubeCamera.cjs.js +1 -1
- package/core/CubeCamera.d.ts +5 -9
- package/core/CubeCamera.js +21 -32
- package/core/Decal.cjs.js +1 -1
- package/core/Decal.d.ts +2 -3
- package/core/Decal.js +4 -3
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.js +1 -0
- package/core/useCubeCamera.cjs.js +1 -0
- package/core/useCubeCamera.d.ts +14 -0
- package/core/useCubeCamera.js +50 -0
- package/index.cjs.js +1 -1
- package/index.js +1 -0
- package/native/index.cjs.js +1 -1
- package/native/index.js +1 -0
- package/package.json +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +1 -0
package/README.md
CHANGED
|
@@ -110,6 +110,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
110
110
|
<li><a href="#usecontextbridge">useContextBridge</a></li>
|
|
111
111
|
<li><a href="#usefbo">useFBO</a></li>
|
|
112
112
|
<li><a href="#usecamera">useCamera</a></li>
|
|
113
|
+
<li><a href="#usecubecamera">useCubeCamera</a></li>
|
|
113
114
|
<li><a href="#usedetectgpu">useDetectGPU</a></li>
|
|
114
115
|
<li><a href="#useaspect">useAspect</a></li>
|
|
115
116
|
<li><a href="#usecursor">useCursor</a></li>
|
|
@@ -1999,6 +2000,10 @@ return <Stats parent={parent} />
|
|
|
1999
2000
|
|
|
2000
2001
|
[](https://drei.vercel.app/?path=/story/staging-wireframe--wireframe-st)
|
|
2001
2002
|
|
|
2003
|
+
<p>
|
|
2004
|
+
<a href="https://codesandbox.io/s/2572o5"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2572o5/screenshot.png" alt="Demo"/></a>
|
|
2005
|
+
</p>
|
|
2006
|
+
|
|
2002
2007
|
Renders an Antialiased, shader based wireframe on or around a geometry.
|
|
2003
2008
|
|
|
2004
2009
|
```jsx
|
|
@@ -2096,6 +2101,31 @@ A hook for the rare case when you are using non-default cameras for heads-up-dis
|
|
|
2096
2101
|
<mesh raycast={useCamera(customCamera)} />
|
|
2097
2102
|
```
|
|
2098
2103
|
|
|
2104
|
+
#### useCubeCamera
|
|
2105
|
+
|
|
2106
|
+
[](https://drei.vercel.app/?path=/story/misc-usecubecamera)
|
|
2107
|
+
|
|
2108
|
+
Creates a [`THREE.CubeCamera`](https://threejs.org/docs/#api/en/cameras/CubeCamera) that renders into a `fbo` renderTarget and that you can `update()`.
|
|
2109
|
+
|
|
2110
|
+
```tsx
|
|
2111
|
+
export function useCubeCamera({
|
|
2112
|
+
/** Resolution of the FBO, 256 */
|
|
2113
|
+
resolution?: number
|
|
2114
|
+
/** Camera near, 0.1 */
|
|
2115
|
+
near?: number
|
|
2116
|
+
/** Camera far, 1000 */
|
|
2117
|
+
far?: number
|
|
2118
|
+
/** Custom environment map that is temporarily set as the scenes background */
|
|
2119
|
+
envMap?: THREE.Texture
|
|
2120
|
+
/** Custom fog that is temporarily set as the scenes fog */
|
|
2121
|
+
fog?: Fog | FogExp2
|
|
2122
|
+
})
|
|
2123
|
+
```
|
|
2124
|
+
|
|
2125
|
+
```jsx
|
|
2126
|
+
const { fbo, camera, update } = useCubeCamera()
|
|
2127
|
+
```
|
|
2128
|
+
|
|
2099
2129
|
#### useDetectGPU
|
|
2100
2130
|
|
|
2101
2131
|
[](https://drei.pmnd.rs/?path=/story/misc-usedetectgpu)
|
|
@@ -2421,6 +2451,7 @@ return (
|
|
|
2421
2451
|
<VideoMaterial src={stream} />
|
|
2422
2452
|
</React.Suspense>
|
|
2423
2453
|
```
|
|
2454
|
+
|
|
2424
2455
|
```jsx
|
|
2425
2456
|
function VideoMaterial({ src }) {
|
|
2426
2457
|
const texture = useVideoTexture(src)
|
|
@@ -2428,6 +2459,7 @@ function VideoMaterial({ src }) {
|
|
|
2428
2459
|
return <meshBasicMaterial map={texture} toneMapped={false} />
|
|
2429
2460
|
}
|
|
2430
2461
|
```
|
|
2462
|
+
|
|
2431
2463
|
NB: It's important to wrap `VideoMaterial` into `React.Suspense` since, `useVideoTexture(src)` here will be suspended until the user shares its screen.
|
|
2432
2464
|
|
|
2433
2465
|
#### useTrailTexture
|
package/core/CubeCamera.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./useCubeCamera.cjs.js");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 u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var a=u(e);exports.CubeCamera=function({children:e,frames:u=1/0,resolution:n,near:c,far:i,envMap:o,fog:f,...s}){const l=a.useRef(),{fbo:b,camera:p,update:m}=t.useCubeCamera({resolution:n,near:c,far:i,envMap:o,fog:f});let v=0;return r.useFrame((()=>{l.current&&(u===1/0||v<u)&&(l.current.visible=!1,m(),l.current.visible=!0,v++)})),a.createElement("group",s,a.createElement("primitive",{object:p}),a.createElement("group",{ref:l},e(b.texture)))};
|
package/core/CubeCamera.d.ts
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Texture } from 'three';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import { CubeCameraOptions } from './useCubeCamera';
|
|
3
4
|
declare type Props = JSX.IntrinsicElements['group'] & {
|
|
4
|
-
frames?: number;
|
|
5
|
-
resolution?: number;
|
|
6
|
-
near?: number;
|
|
7
|
-
far?: number;
|
|
8
|
-
envMap?: THREE.Texture;
|
|
9
|
-
fog?: Fog | FogExp2;
|
|
10
5
|
children: (tex: Texture) => React.ReactNode;
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
frames?: number;
|
|
7
|
+
} & CubeCameraOptions;
|
|
8
|
+
export declare function CubeCamera({ children, frames, resolution, near, far, envMap, fog, ...props }: Props): JSX.Element;
|
|
13
9
|
export {};
|
package/core/CubeCamera.js
CHANGED
|
@@ -1,51 +1,40 @@
|
|
|
1
|
-
import { WebGLCubeRenderTarget, HalfFloatType } from 'three';
|
|
2
1
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import { useFrame } from '@react-three/fiber';
|
|
3
|
+
import { useCubeCamera } from './useCubeCamera.js';
|
|
4
4
|
|
|
5
5
|
function CubeCamera({
|
|
6
6
|
children,
|
|
7
|
-
fog,
|
|
8
7
|
frames = Infinity,
|
|
9
|
-
resolution
|
|
10
|
-
near
|
|
11
|
-
far
|
|
8
|
+
resolution,
|
|
9
|
+
near,
|
|
10
|
+
far,
|
|
12
11
|
envMap,
|
|
12
|
+
fog,
|
|
13
13
|
...props
|
|
14
14
|
}) {
|
|
15
15
|
const ref = React.useRef();
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return fbo;
|
|
28
|
-
}, [resolution]);
|
|
16
|
+
const {
|
|
17
|
+
fbo,
|
|
18
|
+
camera,
|
|
19
|
+
update
|
|
20
|
+
} = useCubeCamera({
|
|
21
|
+
resolution,
|
|
22
|
+
near,
|
|
23
|
+
far,
|
|
24
|
+
envMap,
|
|
25
|
+
fog
|
|
26
|
+
});
|
|
29
27
|
let count = 0;
|
|
30
|
-
let originalFog;
|
|
31
|
-
let originalBackground;
|
|
32
28
|
useFrame(() => {
|
|
33
|
-
if (
|
|
29
|
+
if (ref.current && (frames === Infinity || count < frames)) {
|
|
34
30
|
ref.current.visible = false;
|
|
35
|
-
|
|
36
|
-
originalBackground = scene.background;
|
|
37
|
-
scene.background = envMap || originalBackground;
|
|
38
|
-
scene.fog = fog || originalFog;
|
|
39
|
-
camera.update(gl, scene);
|
|
40
|
-
scene.fog = originalFog;
|
|
41
|
-
scene.background = originalBackground;
|
|
31
|
+
update();
|
|
42
32
|
ref.current.visible = true;
|
|
43
33
|
count++;
|
|
44
34
|
}
|
|
45
35
|
});
|
|
46
|
-
return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("
|
|
47
|
-
|
|
48
|
-
args: [near, far, fbo]
|
|
36
|
+
return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("primitive", {
|
|
37
|
+
object: camera
|
|
49
38
|
}), /*#__PURE__*/React.createElement("group", {
|
|
50
39
|
ref: ref
|
|
51
40
|
}, children(fbo.texture)));
|
package/core/Decal.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"),n=require("@react-three/fiber"),o=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 s=a(e),c=i(t),l=i(r);function u(e=[0,0,0]){return function(e){return Array.isArray(e)}(e)?e:e instanceof l.Vector3||e instanceof l.Euler?[e.x,e.y,e.z]:[e,e,e]}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),o=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 s=a(e),c=i(t),l=i(r);function u(e=[0,0,0]){return function(e){return Array.isArray(e)}(e)?e:e instanceof l.Vector3||e instanceof l.Euler?[e.x,e.y,e.z]:[e,e,e]}const f=c.forwardRef((function({debug:e,mesh:t,children:r,position:a,rotation:i,scale:f,...p},m){const y=c.useRef(null);c.useImperativeHandle(m,(()=>y.current));const d=c.useRef(null);return c.useLayoutEffect((()=>{const e=(null==t?void 0:t.current)||y.current.parent,r=y.current;if(!(e instanceof l.Mesh))throw new Error('Decal must have a Mesh as parent or specify its "mesh" prop');const s={position:new l.Vector3,rotation:new l.Euler,scale:new l.Vector3(1,1,1)};if(e){n.applyProps(s,{position:a,scale:f});const t=e.matrixWorld.clone();if(e.matrixWorld.identity(),i&&"number"!=typeof i)n.applyProps(s,{rotation:i});else{const t=new l.Object3D;t.position.copy(s.position),t.lookAt(e.position),"number"==typeof i&&t.rotateZ(i),n.applyProps(s,{rotation:t.rotation})}return r.geometry=new o.DecalGeometry(e,s.position,s.rotation,s.scale),d.current&&n.applyProps(d.current,s),e.matrixWorld=t,()=>{r.geometry.dispose()}}}),[t,...u(a),...u(f),...u(i)]),c.createElement("mesh",{ref:y},r||c.createElement("meshStandardMaterial",s.default({transparent:!0,polygonOffset:!0,polygonOffsetFactor:-10},p)),e&&c.createElement("mesh",{ref:d},c.createElement("boxGeometry",null),c.createElement("meshNormalMaterial",{wireframe:!0}),c.createElement("axesHelper",null)))}));exports.Decal=f;
|
package/core/Decal.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as THREE from 'three';
|
|
3
3
|
import * as FIBER from '@react-three/fiber';
|
|
4
|
-
declare type DecalProps = Omit<JSX.IntrinsicElements['meshStandardMaterial'], 'children'> & {
|
|
4
|
+
export declare type DecalProps = Omit<JSX.IntrinsicElements['meshStandardMaterial'], 'children'> & {
|
|
5
5
|
debug?: boolean;
|
|
6
6
|
mesh?: React.MutableRefObject<THREE.Mesh>;
|
|
7
7
|
position?: FIBER.Vector3;
|
|
@@ -10,5 +10,4 @@ declare type DecalProps = Omit<JSX.IntrinsicElements['meshStandardMaterial'], 'c
|
|
|
10
10
|
map?: THREE.Texture;
|
|
11
11
|
children?: React.ReactNode;
|
|
12
12
|
};
|
|
13
|
-
export declare
|
|
14
|
-
export {};
|
|
13
|
+
export declare const Decal: React.ForwardRefExoticComponent<Pick<DecalProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "scale" | "rotation" | "mesh" | keyof THREE.MeshStandardMaterial | "debug"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
|
package/core/Decal.js
CHANGED
|
@@ -18,7 +18,7 @@ function vecToArray(vec = [0, 0, 0]) {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
function Decal({
|
|
21
|
+
const Decal = /*#__PURE__*/React.forwardRef(function Decal({
|
|
22
22
|
debug,
|
|
23
23
|
mesh,
|
|
24
24
|
children,
|
|
@@ -26,8 +26,9 @@ function Decal({
|
|
|
26
26
|
rotation,
|
|
27
27
|
scale,
|
|
28
28
|
...props
|
|
29
|
-
}) {
|
|
29
|
+
}, forwardRef) {
|
|
30
30
|
const ref = React.useRef(null);
|
|
31
|
+
React.useImperativeHandle(forwardRef, () => ref.current);
|
|
31
32
|
const helper = React.useRef(null);
|
|
32
33
|
React.useLayoutEffect(() => {
|
|
33
34
|
const parent = (mesh == null ? void 0 : mesh.current) || ref.current.parent;
|
|
@@ -86,6 +87,6 @@ function Decal({
|
|
|
86
87
|
}, /*#__PURE__*/React.createElement("boxGeometry", null), /*#__PURE__*/React.createElement("meshNormalMaterial", {
|
|
87
88
|
wireframe: true
|
|
88
89
|
}), /*#__PURE__*/React.createElement("axesHelper", null)));
|
|
89
|
-
}
|
|
90
|
+
});
|
|
90
91
|
|
|
91
92
|
export { Decal };
|
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("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),a=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),q=require("./Sampler.cjs.js"),d=require("./ComputedAttribute.cjs.js"),m=require("./Clone.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),a=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),q=require("./Sampler.cjs.js"),d=require("./ComputedAttribute.cjs.js"),m=require("./Clone.cjs.js"),C=require("./MarchingCubes.cjs.js"),h=require("./Decal.cjs.js"),M=require("./Svg.cjs.js"),S=require("./Gltf.cjs.js"),T=require("./AsciiRenderer.cjs.js"),b=require("./OrthographicCamera.cjs.js"),f=require("./PerspectiveCamera.cjs.js"),B=require("./CubeCamera.cjs.js"),P=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),v=require("./MapControls.cjs.js"),A=require("./OrbitControls.cjs.js"),L=require("./TrackballControls.cjs.js"),D=require("./ArcballControls.cjs.js"),k=require("./TransformControls.cjs.js"),G=require("./PointerLockControls.cjs.js"),E=require("./FirstPersonControls.cjs.js"),R=require("./CameraControls.cjs.js"),w=require("./GizmoHelper.cjs.js"),z=require("./GizmoViewcube.cjs.js"),F=require("./GizmoViewport.cjs.js"),O=require("./Grid.cjs.js"),I=require("./useCubeTexture.cjs.js"),H=require("./useFBX.cjs.js"),V=require("./useGLTF.cjs.js"),y=require("./useKTX2.cjs.js"),W=require("./useProgress.cjs.js"),Q=require("./useTexture.cjs.js"),X=require("./useVideoTexture.cjs.js"),K=require("./Stats.cjs.js"),N=require("./useDepthBuffer.cjs.js"),U=require("./useAspect.cjs.js"),_=require("./useCamera.cjs.js"),J=require("./useDetectGPU.cjs.js"),Y=require("./useHelper.cjs.js"),Z=require("./useBVH.cjs.js"),$=require("./useContextBridge.cjs.js"),ee=require("./useAnimations.cjs.js"),re=require("./useFBO.cjs.js"),se=require("./useIntersect.cjs.js"),te=require("./useBoxProjectedEnv.cjs.js"),oe=require("./BBAnchor.cjs.js"),ie=require("./useTrailTexture.cjs.js"),ae=require("./useCubeCamera.cjs.js"),ue=require("./CurveModifier.cjs.js"),ce=require("./MeshDistortMaterial.cjs.js"),ne=require("./MeshWobbleMaterial.cjs.js"),je=require("./MeshReflectorMaterial.cjs.js"),pe=require("./MeshRefractionMaterial.cjs.js"),xe=require("./MeshTransmissionMaterial.cjs.js"),le=require("./MeshDiscardMaterial.cjs.js"),qe=require("./PointMaterial.cjs.js"),de=require("./shaderMaterial.cjs.js"),me=require("./softShadows.cjs.js"),Ce=require("./shapes.cjs.js"),he=require("./RoundedBox.cjs.js"),Me=require("./ScreenQuad.cjs.js"),Se=require("./Center.cjs.js"),Te=require("./Bounds.cjs.js"),be=require("./CameraShake.cjs.js"),fe=require("./Float.cjs.js"),Be=require("./Stage.cjs.js"),Pe=require("./Backdrop.cjs.js"),ge=require("./Shadow.cjs.js"),ve=require("./Caustics.cjs.js"),Ae=require("./ContactShadows.cjs.js"),Le=require("./AccumulativeShadows.cjs.js"),De=require("./Reflector.cjs.js"),ke=require("./SpotLight.cjs.js"),Ge=require("./Environment.cjs.js"),Ee=require("./Lightformer.cjs.js"),Re=require("./Sky.cjs.js"),we=require("./Stars.cjs.js"),ze=require("./Cloud.cjs.js"),Fe=require("./Sparkles.cjs.js"),Oe=require("./useEnvironment.cjs.js"),Ie=require("./useMatcapTexture.cjs.js"),He=require("./useNormalTexture.cjs.js"),Ve=require("./Wireframe.cjs.js"),ye=require("./Points.cjs.js"),We=require("./Instances.cjs.js"),Qe=require("./Segments.cjs.js"),Xe=require("./Detailed.cjs.js"),Ke=require("./Preload.cjs.js"),Ne=require("./BakeShadows.cjs.js"),Ue=require("./meshBounds.cjs.js"),_e=require("./AdaptiveDpr.cjs.js"),Je=require("./AdaptiveEvents.cjs.js"),Ye=require("./PerformanceMonitor.cjs.js"),Ze=require("./RenderTexture.cjs.js"),$e=require("./Mask.cjs.js"),er=require("./Hud.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("camera-controls"),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("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../materials/WireframeMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=a.PositionalAudio,exports.Text=u.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.Image=p.Image,exports.Edges=x.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=q.Sampler,exports.useSurfaceSampler=q.useSurfaceSampler,exports.ComputedAttribute=d.ComputedAttribute,exports.Clone=m.Clone,exports.MarchingCube=C.MarchingCube,exports.MarchingCubes=C.MarchingCubes,exports.MarchingPlane=C.MarchingPlane,exports.Decal=h.Decal,exports.Svg=M.Svg,exports.Gltf=S.Gltf,exports.AsciiRenderer=T.AsciiRenderer,exports.OrthographicCamera=b.OrthographicCamera,exports.PerspectiveCamera=f.PerspectiveCamera,exports.CubeCamera=B.CubeCamera,exports.DeviceOrientationControls=P.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=v.MapControls,exports.OrbitControls=A.OrbitControls,exports.TrackballControls=L.TrackballControls,exports.ArcballControls=D.ArcballControls,exports.TransformControls=k.TransformControls,exports.PointerLockControls=G.PointerLockControls,exports.FirstPersonControls=E.FirstPersonControls,exports.CameraControls=R.CameraControls,exports.GizmoHelper=w.GizmoHelper,exports.useGizmoContext=w.useGizmoContext,exports.GizmoViewcube=z.GizmoViewcube,exports.GizmoViewport=F.GizmoViewport,exports.Grid=O.Grid,exports.useCubeTexture=I.useCubeTexture,exports.useFBX=H.useFBX,exports.useGLTF=V.useGLTF,exports.useKTX2=y.useKTX2,exports.useProgress=W.useProgress,exports.IsObject=Q.IsObject,exports.useTexture=Q.useTexture,exports.useVideoTexture=X.useVideoTexture,exports.Stats=K.Stats,exports.useDepthBuffer=N.useDepthBuffer,exports.useAspect=U.useAspect,exports.useCamera=_.useCamera,exports.useDetectGPU=J.useDetectGPU,exports.useHelper=Y.useHelper,exports.Bvh=Z.Bvh,exports.useBVH=Z.useBVH,exports.useContextBridge=$.useContextBridge,exports.useAnimations=ee.useAnimations,exports.useFBO=re.useFBO,exports.useIntersect=se.useIntersect,exports.useBoxProjectedEnv=te.useBoxProjectedEnv,exports.BBAnchor=oe.BBAnchor,exports.useTrailTexture=ie.useTrailTexture,exports.useCubeCamera=ae.useCubeCamera,exports.CurveModifier=ue.CurveModifier,exports.MeshDistortMaterial=ce.MeshDistortMaterial,exports.MeshWobbleMaterial=ne.MeshWobbleMaterial,exports.MeshReflectorMaterial=je.MeshReflectorMaterial,exports.MeshRefractionMaterial=pe.MeshRefractionMaterial,exports.MeshTransmissionMaterial=xe.MeshTransmissionMaterial,exports.MeshDiscardMaterial=le.MeshDiscardMaterial,exports.PointMaterial=qe.PointMaterial,exports.PointMaterialImpl=qe.PointMaterialImpl,exports.shaderMaterial=de.shaderMaterial,exports.SoftShadows=me.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.Shape=Ce.Shape,exports.Sphere=Ce.Sphere,exports.Tetrahedron=Ce.Tetrahedron,exports.Torus=Ce.Torus,exports.TorusKnot=Ce.TorusKnot,exports.Tube=Ce.Tube,exports.RoundedBox=he.RoundedBox,exports.ScreenQuad=Me.ScreenQuad,exports.Center=Se.Center,exports.Bounds=Te.Bounds,exports.useBounds=Te.useBounds,exports.CameraShake=be.CameraShake,exports.Float=fe.Float,exports.Stage=Be.Stage,exports.Backdrop=Pe.Backdrop,exports.Shadow=ge.Shadow,exports.Caustics=ve.Caustics,exports.ContactShadows=Ae.ContactShadows,exports.AccumulativeShadows=Le.AccumulativeShadows,exports.RandomizedLight=Le.RandomizedLight,exports.accumulativeContext=Le.accumulativeContext,exports.Reflector=De.Reflector,exports.SpotLight=ke.SpotLight,exports.SpotLightShadow=ke.SpotLightShadow,exports.Environment=Ge.Environment,exports.EnvironmentCube=Ge.EnvironmentCube,exports.EnvironmentMap=Ge.EnvironmentMap,exports.EnvironmentPortal=Ge.EnvironmentPortal,exports.Lightformer=Ee.Lightformer,exports.Sky=Re.Sky,exports.calcPosFromAngles=Re.calcPosFromAngles,exports.Stars=we.Stars,exports.Cloud=ze.Cloud,exports.Sparkles=Fe.Sparkles,exports.useEnvironment=Oe.useEnvironment,exports.useMatcapTexture=Ie.useMatcapTexture,exports.useNormalTexture=He.useNormalTexture,exports.Wireframe=Ve.Wireframe,exports.Point=ye.Point,exports.Points=ye.Points,exports.PointsBuffer=ye.PointsBuffer,exports.PositionPoint=ye.PositionPoint,exports.Instance=We.Instance,exports.Instances=We.Instances,exports.Merged=We.Merged,exports.Segment=Qe.Segment,exports.SegmentObject=Qe.SegmentObject,exports.Segments=Qe.Segments,exports.Detailed=Xe.Detailed,exports.Preload=Ke.Preload,exports.BakeShadows=Ne.BakeShadows,exports.meshBounds=Ue.meshBounds,exports.AdaptiveDpr=_e.AdaptiveDpr,exports.AdaptiveEvents=Je.AdaptiveEvents,exports.PerformanceMonitor=Ye.PerformanceMonitor,exports.usePerformanceMonitor=Ye.usePerformanceMonitor,exports.RenderTexture=Ze.RenderTexture,exports.Mask=$e.Mask,exports.useMask=$e.useMask,exports.Hud=er.Hud;
|
package/core/index.d.ts
CHANGED
|
@@ -58,6 +58,7 @@ export * from './useIntersect';
|
|
|
58
58
|
export * from './useBoxProjectedEnv';
|
|
59
59
|
export * from './BBAnchor';
|
|
60
60
|
export * from './useTrailTexture';
|
|
61
|
+
export * from './useCubeCamera';
|
|
61
62
|
export * from './CurveModifier';
|
|
62
63
|
export * from './MeshDistortMaterial';
|
|
63
64
|
export * from './MeshWobbleMaterial';
|
package/core/index.js
CHANGED
|
@@ -58,6 +58,7 @@ export { useIntersect } from './useIntersect.js';
|
|
|
58
58
|
export { useBoxProjectedEnv } from './useBoxProjectedEnv.js';
|
|
59
59
|
export { BBAnchor } from './BBAnchor.js';
|
|
60
60
|
export { useTrailTexture } from './useTrailTexture.js';
|
|
61
|
+
export { useCubeCamera } from './useCubeCamera.js';
|
|
61
62
|
export { CurveModifier } from './CurveModifier.js';
|
|
62
63
|
export { MeshDistortMaterial } from './MeshDistortMaterial.js';
|
|
63
64
|
export { MeshWobbleMaterial } from './MeshWobbleMaterial.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");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 u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=u(e),o=u(r);exports.useCubeCamera=function({resolution:u=256,near:a=.1,far:c=1e3,envMap:s,fog:f}={}){const i=t.useThree((({gl:e})=>e)),b=t.useThree((({scene:e})=>e)),d=r.useMemo((()=>{const r=new e.WebGLCubeRenderTarget(u);return r.texture.encoding=i.outputEncoding,r.texture.type=e.HalfFloatType,r}),[u,i.outputEncoding]);r.useEffect((()=>()=>{d.dispose()}),[d]);const g=r.useMemo((()=>new n.CubeCamera(a,c,d)),[a,c,d]);let l,p;const O=o.useCallback((()=>{l=b.fog,p=b.background,b.background=s||p,b.fog=f||l,g.update(i,b),b.fog=l,b.background=p}),[i,b,g]);return{fbo:d,camera:g,update:O}};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { Fog, FogExp2 } from 'three';
|
|
3
|
+
export declare type CubeCameraOptions = {
|
|
4
|
+
resolution?: number;
|
|
5
|
+
near?: number;
|
|
6
|
+
far?: number;
|
|
7
|
+
envMap?: THREE.Texture;
|
|
8
|
+
fog?: Fog | FogExp2;
|
|
9
|
+
};
|
|
10
|
+
export declare function useCubeCamera({ resolution, near, far, envMap, fog }?: CubeCameraOptions): {
|
|
11
|
+
fbo: THREE.WebGLCubeRenderTarget;
|
|
12
|
+
camera: THREE.CubeCamera;
|
|
13
|
+
update: () => void;
|
|
14
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { WebGLCubeRenderTarget, HalfFloatType } from 'three';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { useMemo, useEffect } from 'react';
|
|
5
|
+
import { useThree } from '@react-three/fiber';
|
|
6
|
+
|
|
7
|
+
function useCubeCamera({
|
|
8
|
+
resolution = 256,
|
|
9
|
+
near = 0.1,
|
|
10
|
+
far = 1000,
|
|
11
|
+
envMap,
|
|
12
|
+
fog
|
|
13
|
+
} = {}) {
|
|
14
|
+
const gl = useThree(({
|
|
15
|
+
gl
|
|
16
|
+
}) => gl);
|
|
17
|
+
const scene = useThree(({
|
|
18
|
+
scene
|
|
19
|
+
}) => scene);
|
|
20
|
+
const fbo = useMemo(() => {
|
|
21
|
+
const fbo = new WebGLCubeRenderTarget(resolution);
|
|
22
|
+
fbo.texture.encoding = gl.outputEncoding;
|
|
23
|
+
fbo.texture.type = HalfFloatType;
|
|
24
|
+
return fbo;
|
|
25
|
+
}, [resolution, gl.outputEncoding]);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
return () => {
|
|
28
|
+
fbo.dispose();
|
|
29
|
+
};
|
|
30
|
+
}, [fbo]);
|
|
31
|
+
const camera = useMemo(() => new THREE.CubeCamera(near, far, fbo), [near, far, fbo]);
|
|
32
|
+
let originalFog;
|
|
33
|
+
let originalBackground;
|
|
34
|
+
const update = React.useCallback(() => {
|
|
35
|
+
originalFog = scene.fog;
|
|
36
|
+
originalBackground = scene.background;
|
|
37
|
+
scene.background = envMap || originalBackground;
|
|
38
|
+
scene.fog = fog || originalFog;
|
|
39
|
+
camera.update(gl, scene);
|
|
40
|
+
scene.fog = originalFog;
|
|
41
|
+
scene.background = originalBackground;
|
|
42
|
+
}, [gl, scene, camera]);
|
|
43
|
+
return {
|
|
44
|
+
fbo,
|
|
45
|
+
camera,
|
|
46
|
+
update
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export { useCubeCamera };
|