@react-three/drei 9.53.3 → 9.54.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 -1
- package/core/CameraControls.cjs.js +1 -0
- package/core/CameraControls.d.ts +10 -0
- package/core/CameraControls.js +42 -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/native/index.cjs.js +1 -1
- package/native/index.js +2 -0
- package/package.json +3 -2
- package/web/index.cjs.js +1 -1
- package/web/index.js +2 -0
package/README.md
CHANGED
|
@@ -40,6 +40,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
40
40
|
</ul>
|
|
41
41
|
<li><a href="#controls">Controls</a></li>
|
|
42
42
|
<ul>
|
|
43
|
+
<li><a href="#cameracontrols">CameraControls</a></li>
|
|
43
44
|
<li><a href="#controls">FlyControls</a></li>
|
|
44
45
|
<li><a href="#controls">MapControls</a></li>
|
|
45
46
|
<li><a href="#controls">DeviceOrientationControls</a></li>
|
|
@@ -337,12 +338,29 @@ If available controls have damping enabled by default, they manage their own upd
|
|
|
337
338
|
|
|
338
339
|
Some controls allow you to set `makeDefault`, similar to, for instance, PerspectiveCamera. This will set @react-three/fiber's `controls` field in the root store. This can make it easier in situations where you want controls to be known and other parts of the app could respond to it. Some drei controls already take it into account, like CameraShake, Gizmo and TransformControls.
|
|
339
340
|
|
|
340
|
-
Drei currently exports OrbitControls [](https://drei.vercel.app/?path=/story/controls-orbitcontrols--orbit-controls-story), MapControls [](https://drei.vercel.app/?path=/story/controls-mapcontrols--map-controls-scene-st), TrackballControls, ArcballControls, FlyControls, DeviceOrientationControls, PointerLockControls [](https://drei.vercel.app/?path=/story/controls-pointerlockcontrols--pointer-lock-controls-scene-st), FirstPersonControls [](https://drei.vercel.app/?path=/story/controls-firstpersoncontrols--first-person-controls-story)
|
|
341
|
+
Drei currently exports OrbitControls [](https://drei.vercel.app/?path=/story/controls-orbitcontrols--orbit-controls-story), MapControls [](https://drei.vercel.app/?path=/story/controls-mapcontrols--map-controls-scene-st), TrackballControls, ArcballControls, FlyControls, DeviceOrientationControls, PointerLockControls [](https://drei.vercel.app/?path=/story/controls-pointerlockcontrols--pointer-lock-controls-scene-st), FirstPersonControls [](https://drei.vercel.app/?path=/story/controls-firstpersoncontrols--first-person-controls-story) and [CameraControls](https://github.com/yomotsu/camera-controls) [](https://drei.vercel.app/?path=/story/controls-cameracontrols--camera-controls-story)
|
|
341
342
|
|
|
342
343
|
All controls react to the default camera. If you have a `<PerspectiveCamera makeDefault />` in your scene, they will control it. If you need to inject an imperative camera or one that isn't the default, use the `camera` prop: `<OrbitControls camera={MyCamera} />`.
|
|
343
344
|
|
|
344
345
|
PointerLockControls additionally supports a `selector` prop, which enables the binding of `click` event handlers for control activation to other elements than `document` (e.g. a 'Click here to play' button). All elements matching the `selector` prop will activate the controls. It will also center raycast events by default, so regular onPointerOver/etc events on meshes will continue to work.
|
|
345
346
|
|
|
347
|
+
#### CameraControls
|
|
348
|
+
|
|
349
|
+
This is an implementation of the [camera-controls](https://github.com/yomotsu/camera-controls) library.
|
|
350
|
+
|
|
351
|
+
```tsx
|
|
352
|
+
<CameraControls />
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
```tsx
|
|
356
|
+
type CameraControlsProps = {
|
|
357
|
+
/** The camera to control, default to the state's `camera` */
|
|
358
|
+
camera?: PerspectiveCamera | OrthographicCamera
|
|
359
|
+
/** DOM element to connect to, default to the state's `gl` renderer */
|
|
360
|
+
domElement?: HTMLElement
|
|
361
|
+
}
|
|
362
|
+
```
|
|
363
|
+
|
|
346
364
|
#### ScrollControls
|
|
347
365
|
|
|
348
366
|

|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),u=require("camera-controls");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 o=a(e),l=c(r),s=c(t),f=a(u);const i=t.forwardRef(((e,r)=>{t.useMemo((()=>{f.default.install({THREE:l}),n.extend({CameraControlsImpl:f.default})}),[]);const{camera:u,domElement:a,...c}=e,i=n.useThree((e=>e.camera)),d=n.useThree((e=>e.gl)),m=n.useThree((e=>e.invalidate)),b=n.useThree((e=>e.events)),p=u||i,h=a||b.connected||d.domElement,j=t.useMemo((()=>new f.default(p)),[p]);return n.useFrame(((e,r)=>{j.enabled&&j.update(r)}),-1),t.useEffect((()=>(j.connect(h),()=>{j.disconnect()})),[h,j,m]),s.createElement("primitive",o.default({ref:r,object:j},c))}));exports.CameraControls=i;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { PerspectiveCamera, OrthographicCamera } from 'three';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ReactThreeFiber } from '@react-three/fiber';
|
|
4
|
+
import CameraControlsImpl from 'camera-controls';
|
|
5
|
+
export declare type CameraControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Node<CameraControlsImpl, typeof CameraControlsImpl>, {
|
|
6
|
+
camera?: PerspectiveCamera | OrthographicCamera;
|
|
7
|
+
domElement?: HTMLElement;
|
|
8
|
+
}>, 'ref'>;
|
|
9
|
+
export declare const CameraControls: React.ForwardRefExoticComponent<CameraControlsProps & React.RefAttributes<CameraControlsImpl>>;
|
|
10
|
+
export declare type CameraControls = CameraControlsImpl;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
|
+
import * as THREE from 'three';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { forwardRef, useMemo, useEffect } from 'react';
|
|
5
|
+
import { extend, useThree, useFrame } from '@react-three/fiber';
|
|
6
|
+
import CameraControlsImpl from 'camera-controls';
|
|
7
|
+
|
|
8
|
+
const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
|
|
9
|
+
useMemo(() => {
|
|
10
|
+
CameraControlsImpl.install({
|
|
11
|
+
THREE
|
|
12
|
+
});
|
|
13
|
+
extend({
|
|
14
|
+
CameraControlsImpl
|
|
15
|
+
});
|
|
16
|
+
}, []);
|
|
17
|
+
const {
|
|
18
|
+
camera,
|
|
19
|
+
domElement,
|
|
20
|
+
...restProps
|
|
21
|
+
} = props;
|
|
22
|
+
const defaultCamera = useThree(state => state.camera);
|
|
23
|
+
const gl = useThree(state => state.gl);
|
|
24
|
+
const invalidate = useThree(state => state.invalidate);
|
|
25
|
+
const events = useThree(state => state.events);
|
|
26
|
+
const explCamera = camera || defaultCamera;
|
|
27
|
+
const explDomElement = domElement || events.connected || gl.domElement;
|
|
28
|
+
const cameraControls = useMemo(() => new CameraControlsImpl(explCamera), [explCamera]);
|
|
29
|
+
useFrame((state, delta) => {
|
|
30
|
+
if (cameraControls.enabled) cameraControls.update(delta);
|
|
31
|
+
}, -1);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
cameraControls.connect(explDomElement);
|
|
34
|
+
return () => void cameraControls.disconnect();
|
|
35
|
+
}, [explDomElement, cameraControls, invalidate]);
|
|
36
|
+
return /*#__PURE__*/React.createElement("primitive", _extends({
|
|
37
|
+
ref: ref,
|
|
38
|
+
object: cameraControls
|
|
39
|
+
}, restProps));
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
export { CameraControls };
|
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"),
|
|
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"),d=require("./Sampler.cjs.js"),q=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"),f=require("./OrthographicCamera.cjs.js"),P=require("./PerspectiveCamera.cjs.js"),b=require("./CubeCamera.cjs.js"),B=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),v=require("./MapControls.cjs.js"),A=require("./OrbitControls.cjs.js"),L=require("./TrackballControls.cjs.js"),k=require("./ArcballControls.cjs.js"),G=require("./TransformControls.cjs.js"),D=require("./PointerLockControls.cjs.js"),R=require("./FirstPersonControls.cjs.js"),E=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"),Q=require("./useProgress.cjs.js"),X=require("./useTexture.cjs.js"),K=require("./useVideoTexture.cjs.js"),W=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("./CurveModifier.cjs.js"),ue=require("./MeshDistortMaterial.cjs.js"),ce=require("./MeshWobbleMaterial.cjs.js"),ne=require("./MeshReflectorMaterial.cjs.js"),je=require("./MeshRefractionMaterial.cjs.js"),pe=require("./MeshTransmissionMaterial.cjs.js"),xe=require("./PointMaterial.cjs.js"),le=require("./shaderMaterial.cjs.js"),de=require("./softShadows.cjs.js"),qe=require("./shapes.cjs.js"),me=require("./RoundedBox.cjs.js"),Ce=require("./ScreenQuad.cjs.js"),he=require("./Center.cjs.js"),Me=require("./Bounds.cjs.js"),Se=require("./CameraShake.cjs.js"),Te=require("./Float.cjs.js"),fe=require("./Stage.cjs.js"),Pe=require("./Backdrop.cjs.js"),be=require("./Shadow.cjs.js"),Be=require("./Caustics.cjs.js"),ge=require("./ContactShadows.cjs.js"),ve=require("./AccumulativeShadows.cjs.js"),Ae=require("./Reflector.cjs.js"),Le=require("./SpotLight.cjs.js"),ke=require("./Environment.cjs.js"),Ge=require("./Lightformer.cjs.js"),De=require("./Sky.cjs.js"),Re=require("./Stars.cjs.js"),Ee=require("./Cloud.cjs.js"),we=require("./Sparkles.cjs.js"),ze=require("./useMatcapTexture.cjs.js"),Fe=require("./useNormalTexture.cjs.js"),Oe=require("./Points.cjs.js"),Ie=require("./Instances.cjs.js"),He=require("./Segments.cjs.js"),Ve=require("./Detailed.cjs.js"),ye=require("./Preload.cjs.js"),Qe=require("./BakeShadows.cjs.js"),Xe=require("./meshBounds.cjs.js"),Ke=require("./AdaptiveDpr.cjs.js"),We=require("./AdaptiveEvents.cjs.js"),Ne=require("./PerformanceMonitor.cjs.js"),Ue=require("./RenderTexture.cjs.js"),_e=require("./Mask.cjs.js"),Je=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("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=d.Sampler,exports.useSurfaceSampler=d.useSurfaceSampler,exports.ComputedAttribute=q.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=f.OrthographicCamera,exports.PerspectiveCamera=P.PerspectiveCamera,exports.CubeCamera=b.CubeCamera,exports.DeviceOrientationControls=B.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=v.MapControls,exports.OrbitControls=A.OrbitControls,exports.TrackballControls=L.TrackballControls,exports.ArcballControls=k.ArcballControls,exports.TransformControls=G.TransformControls,exports.PointerLockControls=D.PointerLockControls,exports.FirstPersonControls=R.FirstPersonControls,exports.CameraControls=E.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=Q.useProgress,exports.IsObject=X.IsObject,exports.useTexture=X.useTexture,exports.useVideoTexture=K.useVideoTexture,exports.Stats=W.Stats,exports.useDepthBuffer=N.useDepthBuffer,exports.useAspect=U.useAspect,exports.useCamera=_.useCamera,exports.useDetectGPU=J.useDetectGPU,exports.useHelper=Y.useHelper,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.CurveModifier=ae.CurveModifier,exports.MeshDistortMaterial=ue.MeshDistortMaterial,exports.MeshWobbleMaterial=ce.MeshWobbleMaterial,exports.MeshReflectorMaterial=ne.MeshReflectorMaterial,exports.MeshRefractionMaterial=je.MeshRefractionMaterial,exports.MeshTransmissionMaterial=pe.MeshTransmissionMaterial,exports.PointMaterial=xe.PointMaterial,exports.PointMaterialImpl=xe.PointMaterialImpl,exports.shaderMaterial=le.shaderMaterial,exports.SoftShadows=de.SoftShadows,exports.softShadows=de.softShadows,exports.Box=qe.Box,exports.Capsule=qe.Capsule,exports.Circle=qe.Circle,exports.Cone=qe.Cone,exports.Cylinder=qe.Cylinder,exports.Dodecahedron=qe.Dodecahedron,exports.Extrude=qe.Extrude,exports.Icosahedron=qe.Icosahedron,exports.Lathe=qe.Lathe,exports.Octahedron=qe.Octahedron,exports.Plane=qe.Plane,exports.Polyhedron=qe.Polyhedron,exports.Ring=qe.Ring,exports.Sphere=qe.Sphere,exports.Tetrahedron=qe.Tetrahedron,exports.Torus=qe.Torus,exports.TorusKnot=qe.TorusKnot,exports.Tube=qe.Tube,exports.RoundedBox=me.RoundedBox,exports.ScreenQuad=Ce.ScreenQuad,exports.Center=he.Center,exports.Bounds=Me.Bounds,exports.useBounds=Me.useBounds,exports.CameraShake=Se.CameraShake,exports.Float=Te.Float,exports.Stage=fe.Stage,exports.Backdrop=Pe.Backdrop,exports.Shadow=be.Shadow,exports.Caustics=Be.Caustics,exports.ContactShadows=ge.ContactShadows,exports.AccumulativeShadows=ve.AccumulativeShadows,exports.RandomizedLight=ve.RandomizedLight,exports.accumulativeContext=ve.accumulativeContext,exports.Reflector=Ae.Reflector,exports.SpotLight=Le.SpotLight,exports.SpotLightShadow=Le.SpotLightShadow,exports.Environment=ke.Environment,exports.EnvironmentCube=ke.EnvironmentCube,exports.EnvironmentMap=ke.EnvironmentMap,exports.EnvironmentPortal=ke.EnvironmentPortal,exports.useEnvironment=ke.useEnvironment,exports.Lightformer=Ge.Lightformer,exports.Sky=De.Sky,exports.calcPosFromAngles=De.calcPosFromAngles,exports.Stars=Re.Stars,exports.Cloud=Ee.Cloud,exports.Sparkles=we.Sparkles,exports.useMatcapTexture=ze.useMatcapTexture,exports.useNormalTexture=Fe.useNormalTexture,exports.Point=Oe.Point,exports.Points=Oe.Points,exports.PointsBuffer=Oe.PointsBuffer,exports.PositionPoint=Oe.PositionPoint,exports.Instance=Ie.Instance,exports.Instances=Ie.Instances,exports.Merged=Ie.Merged,exports.Segment=He.Segment,exports.SegmentObject=He.SegmentObject,exports.Segments=He.Segments,exports.Detailed=Ve.Detailed,exports.Preload=ye.Preload,exports.BakeShadows=Qe.BakeShadows,exports.meshBounds=Xe.meshBounds,exports.AdaptiveDpr=Ke.AdaptiveDpr,exports.AdaptiveEvents=We.AdaptiveEvents,exports.PerformanceMonitor=Ne.PerformanceMonitor,exports.usePerformanceMonitor=Ne.usePerformanceMonitor,exports.RenderTexture=Ue.RenderTexture,exports.Mask=_e.Mask,exports.useMask=_e.useMask,exports.Hud=Je.Hud;
|
package/core/index.d.ts
CHANGED
|
@@ -32,6 +32,7 @@ export * from './ArcballControls';
|
|
|
32
32
|
export * from './TransformControls';
|
|
33
33
|
export * from './PointerLockControls';
|
|
34
34
|
export * from './FirstPersonControls';
|
|
35
|
+
export * from './CameraControls';
|
|
35
36
|
export * from './GizmoHelper';
|
|
36
37
|
export * from './GizmoViewcube';
|
|
37
38
|
export * from './GizmoViewport';
|
package/core/index.js
CHANGED
|
@@ -32,6 +32,7 @@ export { ArcballControls } from './ArcballControls.js';
|
|
|
32
32
|
export { TransformControls } from './TransformControls.js';
|
|
33
33
|
export { PointerLockControls } from './PointerLockControls.js';
|
|
34
34
|
export { FirstPersonControls } from './FirstPersonControls.js';
|
|
35
|
+
export { CameraControls } from './CameraControls.js';
|
|
35
36
|
export { GizmoHelper, useGizmoContext } from './GizmoHelper.js';
|
|
36
37
|
export { GizmoViewcube } from './GizmoViewcube.js';
|
|
37
38
|
export { GizmoViewport } from './GizmoViewport.js';
|
|
@@ -113,6 +114,7 @@ import 'suspend-react';
|
|
|
113
114
|
import 'meshline';
|
|
114
115
|
import 'lodash.pick';
|
|
115
116
|
import 'lodash.omit';
|
|
117
|
+
import 'camera-controls';
|
|
116
118
|
import 'zustand';
|
|
117
119
|
import 'stats.js';
|
|
118
120
|
import '../helpers/useEffectfulState.js';
|