@react-three/drei 9.43.3 → 9.44.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 +40 -1
- package/core/Hud.cjs.js +1 -0
- package/core/Hud.d.ts +7 -0
- package/core/Hud.js +50 -0
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.js +1 -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
|
@@ -142,6 +142,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
142
142
|
</ul>
|
|
143
143
|
<li><a href="#portals">Portals</a></li>
|
|
144
144
|
<ul>
|
|
145
|
+
<li><a href="#hud">Hud</a></li>
|
|
145
146
|
<li><a href="#view">View</a></li>
|
|
146
147
|
<li><a href="#rendertexture">RenderTexture</a></li>
|
|
147
148
|
<li><a href="#mask">Mask</a></li>
|
|
@@ -874,7 +875,7 @@ You can align the text using the `<Center>` component.
|
|
|
874
875
|
</Center>
|
|
875
876
|
```
|
|
876
877
|
|
|
877
|
-
It adds two properties that do not exist in the
|
|
878
|
+
It adds two properties that do not exist in the original `TextGeometry`, `lineHeight` and `letterSpacing`. The former a factor that is `1` by default, the latter is in threejs units and `0` by default.
|
|
878
879
|
|
|
879
880
|
```jsx
|
|
880
881
|
<Text3D lineHeight={0.5} letterSpacing={-0.025}>{`hello\nworld`}</Text3D>
|
|
@@ -2341,6 +2342,44 @@ function Effects() {
|
|
|
2341
2342
|
|
|
2342
2343
|
# Portals
|
|
2343
2344
|
|
|
2345
|
+
#### Hud
|
|
2346
|
+
|
|
2347
|
+
<p>
|
|
2348
|
+
<a href="https://codesandbox.io/s/py4db"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/py4db/screenshot.png" alt="Demo"/></a>
|
|
2349
|
+
</p>
|
|
2350
|
+
|
|
2351
|
+
Renders a heads-up-display (HUD). Each HUD is a scene on top of the previous. That scene is inside a React `createPortal` and is completely isolated, you can have your own cameras in there, environments, etc. The first HUD (`renderpriotity === 1`) will clear the scene and render the default scene, it needs to be the first to execute! Make sure to be explicit about the `renderpriority` of your HUDs.
|
|
2352
|
+
|
|
2353
|
+
```tsx
|
|
2354
|
+
type HudProps = {
|
|
2355
|
+
/** Any React node */
|
|
2356
|
+
children: React.ReactNode
|
|
2357
|
+
/** Render priority, default: 1 */
|
|
2358
|
+
renderPriority?: number
|
|
2359
|
+
}
|
|
2360
|
+
```
|
|
2361
|
+
|
|
2362
|
+
```jsx
|
|
2363
|
+
{
|
|
2364
|
+
/* Renders on top of the default scene with a perspective camera */
|
|
2365
|
+
}
|
|
2366
|
+
;<Hud>
|
|
2367
|
+
<PerspectiveCamera makeDefault position={[0, 0, 10]} />
|
|
2368
|
+
<mesh>
|
|
2369
|
+
<ringGeometry />
|
|
2370
|
+
</mesh>
|
|
2371
|
+
</Hud>
|
|
2372
|
+
{
|
|
2373
|
+
/* Renders on top of the previous HUD with an orthographic camera */
|
|
2374
|
+
}
|
|
2375
|
+
;<Hud renderPriority={2}>
|
|
2376
|
+
<OrthographicCamera makeDefault position={[0, 0, 10]} />
|
|
2377
|
+
<mesh>
|
|
2378
|
+
<boxGeometry />
|
|
2379
|
+
</mesh>
|
|
2380
|
+
</Hud>
|
|
2381
|
+
```
|
|
2382
|
+
|
|
2344
2383
|
#### View
|
|
2345
2384
|
|
|
2346
2385
|
<p>
|
package/core/Hud.cjs.js
ADDED
|
@@ -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 n(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 a=n(e),u=n(r);function c({defaultScene:e,defaultCamera:r,renderPriority:n=1}){const{gl:a,scene:c,camera:l}=t.useThree();return t.useFrame((()=>{1===n&&(a.autoClear=!0,a.render(e,r)),a.autoClear=!1,a.clearDepth(),a.render(c,l)}),n),u.createElement(u.Fragment,null)}exports.Hud=function({children:e,renderPriority:r=1}){const{scene:n,camera:l}=t.useThree(),[i]=u.useState((()=>new a.Scene));return u.createElement(u.Fragment,null,t.createPortal(u.createElement(u.Fragment,null,e,u.createElement(c,{defaultScene:n,defaultCamera:l,renderPriority:r})),i,{events:{priority:r+1}}))};
|
package/core/Hud.d.ts
ADDED
package/core/Hud.js
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useThree, createPortal, useFrame } from '@react-three/fiber';
|
|
4
|
+
|
|
5
|
+
function RenderHud({
|
|
6
|
+
defaultScene,
|
|
7
|
+
defaultCamera,
|
|
8
|
+
renderPriority = 1
|
|
9
|
+
}) {
|
|
10
|
+
const {
|
|
11
|
+
gl,
|
|
12
|
+
scene,
|
|
13
|
+
camera
|
|
14
|
+
} = useThree();
|
|
15
|
+
useFrame(() => {
|
|
16
|
+
if (renderPriority === 1) {
|
|
17
|
+
// Clear scene and render the default scene
|
|
18
|
+
gl.autoClear = true;
|
|
19
|
+
gl.render(defaultScene, defaultCamera);
|
|
20
|
+
} // Disable cleaning and render the portal with its own camera
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
gl.autoClear = false;
|
|
24
|
+
gl.clearDepth();
|
|
25
|
+
gl.render(scene, camera);
|
|
26
|
+
}, renderPriority);
|
|
27
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function Hud({
|
|
31
|
+
children,
|
|
32
|
+
renderPriority = 1
|
|
33
|
+
}) {
|
|
34
|
+
const {
|
|
35
|
+
scene: defaultScene,
|
|
36
|
+
camera: defaultCamera
|
|
37
|
+
} = useThree();
|
|
38
|
+
const [hudScene] = React.useState(() => new THREE.Scene());
|
|
39
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(RenderHud, {
|
|
40
|
+
defaultScene: defaultScene,
|
|
41
|
+
defaultCamera: defaultCamera,
|
|
42
|
+
renderPriority: renderPriority
|
|
43
|
+
})), hudScene, {
|
|
44
|
+
events: {
|
|
45
|
+
priority: renderPriority + 1
|
|
46
|
+
}
|
|
47
|
+
}));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export { Hud };
|
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"),n=require("./Effects.cjs.js"),c=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),x=require("./Trail.cjs.js"),l=require("./Sampler.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"),n=require("./Effects.cjs.js"),c=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),x=require("./Trail.cjs.js"),l=require("./Sampler.cjs.js"),d=require("./ComputedAttribute.cjs.js"),q=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),h=require("./Decal.cjs.js"),C=require("./Svg.cjs.js"),M=require("./OrthographicCamera.cjs.js"),S=require("./PerspectiveCamera.cjs.js"),T=require("./CubeCamera.cjs.js"),P=require("./DeviceOrientationControls.cjs.js"),b=require("./FlyControls.cjs.js"),B=require("./MapControls.cjs.js"),g=require("./OrbitControls.cjs.js"),f=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),L=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),k=require("./FirstPersonControls.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),G=require("./useFBX.cjs.js"),z=require("./useGLTF.cjs.js"),F=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),H=require("./useVideoTexture.cjs.js"),V=require("./Stats.cjs.js"),y=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("./useTrailTexture.cjs.js"),re=require("./CurveModifier.cjs.js"),se=require("./MeshDistortMaterial.cjs.js"),te=require("./MeshWobbleMaterial.cjs.js"),oe=require("./MeshReflectorMaterial.cjs.js"),ie=require("./MeshRefractionMaterial.cjs.js"),ue=require("./PointMaterial.cjs.js"),ae=require("./shaderMaterial.cjs.js"),ne=require("./softShadows.cjs.js"),ce=require("./shapes.cjs.js"),je=require("./RoundedBox.cjs.js"),pe=require("./ScreenQuad.cjs.js"),xe=require("./Center.cjs.js"),le=require("./Bounds.cjs.js"),de=require("./CameraShake.cjs.js"),qe=require("./Float.cjs.js"),me=require("./Stage.cjs.js"),he=require("./Backdrop.cjs.js"),Ce=require("./Shadow.cjs.js"),Me=require("./ContactShadows.cjs.js"),Se=require("./AccumulativeShadows.cjs.js"),Te=require("./Reflector.cjs.js"),Pe=require("./SpotLight.cjs.js"),be=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),ge=require("./Sky.cjs.js"),fe=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),Le=require("./Sparkles.cjs.js"),Ae=require("./useMatcapTexture.cjs.js"),ke=require("./useNormalTexture.cjs.js"),De=require("./Points.cjs.js"),Ee=require("./Instances.cjs.js"),Re=require("./Segments.cjs.js"),we=require("./Detailed.cjs.js"),Ge=require("./Preload.cjs.js"),ze=require("./BakeShadows.cjs.js"),Fe=require("./meshBounds.cjs.js"),Oe=require("./AdaptiveDpr.cjs.js"),Ie=require("./AdaptiveEvents.cjs.js"),He=require("./PerformanceMonitor.cjs.js"),Ve=require("./RenderTexture.cjs.js"),ye=require("./Mask.cjs.js"),Qe=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("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("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=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=c.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=x.Trail,exports.useTrail=x.useTrail,exports.Sampler=l.Sampler,exports.useSurfaceSampler=l.useSurfaceSampler,exports.ComputedAttribute=d.ComputedAttribute,exports.Clone=q.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=h.Decal,exports.Svg=C.Svg,exports.OrthographicCamera=M.OrthographicCamera,exports.PerspectiveCamera=S.PerspectiveCamera,exports.CubeCamera=T.CubeCamera,exports.DeviceOrientationControls=P.DeviceOrientationControls,exports.FlyControls=b.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=g.OrbitControls,exports.TrackballControls=f.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=L.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=k.FirstPersonControls,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=G.useFBX,exports.useGLTF=z.useGLTF,exports.useKTX2=F.useKTX2,exports.useProgress=O.useProgress,exports.IsObject=I.IsObject,exports.useTexture=I.useTexture,exports.useVideoTexture=H.useVideoTexture,exports.Stats=V.Stats,exports.useDepthBuffer=y.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.useTrailTexture=ee.useTrailTexture,exports.CurveModifier=re.CurveModifier,exports.MeshDistortMaterial=se.MeshDistortMaterial,exports.MeshWobbleMaterial=te.MeshWobbleMaterial,exports.MeshReflectorMaterial=oe.MeshReflectorMaterial,exports.MeshRefractionMaterial=ie.MeshRefractionMaterial,exports.PointMaterial=ue.PointMaterial,exports.PointMaterialImpl=ue.PointMaterialImpl,exports.shaderMaterial=ae.shaderMaterial,exports.softShadows=ne.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=je.RoundedBox,exports.ScreenQuad=pe.ScreenQuad,exports.Center=xe.Center,exports.Bounds=le.Bounds,exports.useBounds=le.useBounds,exports.CameraShake=de.CameraShake,exports.Float=qe.Float,exports.Stage=me.Stage,exports.Backdrop=he.Backdrop,exports.Shadow=Ce.Shadow,exports.ContactShadows=Me.ContactShadows,exports.AccumulativeShadows=Se.AccumulativeShadows,exports.RandomizedLight=Se.RandomizedLight,exports.accumulativeContext=Se.accumulativeContext,exports.Reflector=Te.Reflector,exports.SpotLight=Pe.SpotLight,exports.SpotLightShadow=Pe.SpotLightShadow,exports.Environment=be.Environment,exports.EnvironmentCube=be.EnvironmentCube,exports.EnvironmentMap=be.EnvironmentMap,exports.EnvironmentPortal=be.EnvironmentPortal,exports.useEnvironment=be.useEnvironment,exports.Lightformer=Be.Lightformer,exports.Sky=ge.Sky,exports.calcPosFromAngles=ge.calcPosFromAngles,exports.Stars=fe.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=Le.Sparkles,exports.useMatcapTexture=Ae.useMatcapTexture,exports.useNormalTexture=ke.useNormalTexture,exports.Point=De.Point,exports.Points=De.Points,exports.PointsBuffer=De.PointsBuffer,exports.PositionPoint=De.PositionPoint,exports.Instance=Ee.Instance,exports.Instances=Ee.Instances,exports.Merged=Ee.Merged,exports.Segment=Re.Segment,exports.SegmentObject=Re.SegmentObject,exports.Segments=Re.Segments,exports.Detailed=we.Detailed,exports.Preload=Ge.Preload,exports.BakeShadows=ze.BakeShadows,exports.meshBounds=Fe.meshBounds,exports.AdaptiveDpr=Oe.AdaptiveDpr,exports.AdaptiveEvents=Ie.AdaptiveEvents,exports.PerformanceMonitor=He.PerformanceMonitor,exports.usePerformanceMonitor=He.usePerformanceMonitor,exports.RenderTexture=Ve.RenderTexture,exports.Mask=ye.Mask,exports.useMask=ye.useMask,exports.Hud=Qe.Hud;
|
package/core/index.d.ts
CHANGED
package/core/index.js
CHANGED
|
@@ -95,6 +95,7 @@ export { AdaptiveEvents } from './AdaptiveEvents.js';
|
|
|
95
95
|
export { PerformanceMonitor, usePerformanceMonitor } from './PerformanceMonitor.js';
|
|
96
96
|
export { RenderTexture } from './RenderTexture.js';
|
|
97
97
|
export { Mask, useMask } from './Mask.js';
|
|
98
|
+
export { Hud } from './Hud.js';
|
|
98
99
|
import '@babel/runtime/helpers/esm/extends';
|
|
99
100
|
import 'react';
|
|
100
101
|
import '@react-three/fiber';
|