@react-three/drei 8.6.1 → 9.0.0-beta.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 +35 -35
- package/core/ArcballControls.js +2 -5
- package/core/Billboard.d.ts +2 -2
- package/core/Center.d.ts +1 -1
- package/core/ContactShadows.d.ts +1 -1
- package/core/CubeCamera.cjs.js +1 -1
- package/core/CubeCamera.js +1 -1
- package/core/Detailed.d.ts +1 -1
- package/core/DeviceOrientationControls.d.ts +1 -1
- package/core/Effects.cjs.js +1 -1
- package/core/Effects.d.ts +1 -1
- package/core/Effects.js +2 -2
- package/core/FirstPersonControls.d.ts +1 -1
- package/core/FlyControls.d.ts +1 -1
- package/core/GizmoViewcube.cjs.js +1 -1
- package/core/GizmoViewcube.d.ts +2 -2
- package/core/GizmoViewcube.js +1 -1
- package/core/GizmoViewport.d.ts +2 -2
- package/core/Image.d.ts +1 -1
- package/core/Instances.d.ts +2 -2
- package/core/Line.d.ts +1 -1
- package/core/MapControls.d.ts +1 -1
- package/core/MeshDistortMaterial.d.ts +1 -1
- package/core/MeshReflectorMaterial.d.ts +1 -1
- package/core/MeshWobbleMaterial.d.ts +1 -1
- package/core/OrbitControls.d.ts +1 -1
- package/core/OrbitControls.js +2 -5
- package/core/OrthographicCamera.d.ts +1 -1
- package/core/PerspectiveCamera.d.ts +1 -1
- package/core/PointerLockControls.d.ts +1 -1
- package/core/Points.cjs.js +1 -1
- package/core/Points.d.ts +2 -2
- package/core/Points.js +6 -6
- package/core/PositionalAudio.d.ts +1 -1
- package/core/Reflector.d.ts +1 -1
- package/core/RoundedBox.d.ts +1 -1
- package/core/ScreenQuad.d.ts +1 -1
- package/core/Segments.d.ts +1 -1
- package/core/Shadow.d.ts +1 -1
- package/core/SpotLight.d.ts +1 -1
- package/core/Stars.cjs.js +1 -1
- package/core/Stars.js +3 -3
- package/core/Text.d.ts +1 -1
- package/core/TrackballControls.d.ts +1 -1
- package/core/TrackballControls.js +2 -5
- package/core/TransformControls.d.ts +1 -1
- package/core/shapes.d.ts +17 -17
- package/core/useFBX.d.ts +1 -1
- package/core/useFBX.js +1 -2
- package/core/useGLTF.d.ts +1 -1
- package/core/useGLTF.js +1 -2
- package/core/useKTX2.d.ts +1 -1
- package/core/useKTX2.js +1 -2
- package/core/useTexture.d.ts +1 -1
- package/core/useTexture.js +1 -2
- package/index.cjs.js +1 -1
- package/package.json +4 -4
- package/web/Html.cjs.js +1 -1
- package/web/Html.js +6 -4
- package/web/Select.js +0 -1
package/README.md
CHANGED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
[](https://www.npmjs.com/package/@react-three/drei)
|
|
5
5
|
[](https://discord.gg/poimandres)
|
|
6
6
|
|
|
7
|
-
A growing collection of useful helpers and fully functional, ready-made abstractions for [react-three
|
|
7
|
+
A growing collection of useful helpers and fully functional, ready-made abstractions for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber). If you make a component that is generic enough to be useful to others, think about making it available here through a PR!
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install @react-three/drei
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
:point_right: this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/
|
|
13
|
+
:point_right: this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/master/examples/jsm). :point_left:
|
|
14
14
|
|
|
15
15
|
### Basic usage:
|
|
16
16
|
|
|
@@ -179,7 +179,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
179
179
|
|
|
180
180
|
[](https://drei.vercel.app/?path=/story/camera-perspectivecamera--perspective-camera-scene-st)
|
|
181
181
|
|
|
182
|
-
A responsive [THREE.PerspectiveCamera](https://threejs.org/docs
|
|
182
|
+
A responsive [THREE.PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) that can set itself as the default.
|
|
183
183
|
|
|
184
184
|
```jsx
|
|
185
185
|
<PerspectiveCamera makeDefault {...props} />
|
|
@@ -204,7 +204,7 @@ You can also drive it manually, it won't be responsive and you have to calculate
|
|
|
204
204
|
|
|
205
205
|
[](https://drei.vercel.app/?path=/story/camera-orthographiccamera--orthographic-camera-scene-st)
|
|
206
206
|
|
|
207
|
-
A responsive [THREE.OrthographicCamera](https://threejs.org/docs
|
|
207
|
+
A responsive [THREE.OrthographicCamera](https://threejs.org/docs/#api/en/cameras/OrthographicCamera) that can set itself as the default.
|
|
208
208
|
|
|
209
209
|
```jsx
|
|
210
210
|
<OrthographicCamera makeDefault {...props}>
|
|
@@ -216,7 +216,7 @@ A responsive [THREE.OrthographicCamera](https://threejs.org/docs/index.html#api/
|
|
|
216
216
|
|
|
217
217
|
[](https://drei.pmnd.rs/?path=/story/camera-cubecamera--default-story)
|
|
218
218
|
|
|
219
|
-
A [THREE.CubeCamera](https://threejs.org/docs
|
|
219
|
+
A [THREE.CubeCamera](https://threejs.org/docs/#api/en/cameras/CubeCamera) that returns its texture as a render-prop. It makes children invisible while rendering to the internal buffer so that they are not included in the reflection.
|
|
220
220
|
|
|
221
221
|
Using the `frames` prop you can control if this camera renders indefinitively or statically (a given number of times).
|
|
222
222
|
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.
|
|
@@ -235,9 +235,9 @@ If you have moving objects, unset the prop and use a smaller `resolution` instea
|
|
|
235
235
|
|
|
236
236
|
# Controls
|
|
237
237
|
|
|
238
|
-
If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag. They inherit all props from their underlying [THREE controls](https://github.com/mrdoob/three.js/tree/
|
|
238
|
+
If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag. They inherit all props from their underlying [THREE controls](https://github.com/mrdoob/three.js/tree/master/examples/jsm/controls).
|
|
239
239
|
|
|
240
|
-
Some controls allow you to set `makeDefault`, similar to, for instance, PerspectiveCamera. This will set react-three
|
|
240
|
+
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.
|
|
241
241
|
|
|
242
242
|
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)
|
|
243
243
|
|
|
@@ -249,7 +249,7 @@ PointerLockControls additionally supports a `selector` prop, which enables the b
|
|
|
249
249
|
|
|
250
250
|
[](https://drei.vercel.app/?path=/story/controls-transformcontrols--transform-controls-story)
|
|
251
251
|
|
|
252
|
-
An abstraction around [THREE.TransformControls](https://threejs.org/docs
|
|
252
|
+
An abstraction around [THREE.TransformControls](https://threejs.org/docs/#examples/en/controls/TransformControls).
|
|
253
253
|
|
|
254
254
|
You can wrap objects which then receive a transform gizmo.
|
|
255
255
|
|
|
@@ -363,12 +363,12 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
|
|
|
363
363
|
|
|
364
364
|
# Shapes
|
|
365
365
|
|
|
366
|
-
[Buffer-geometry](https://threejs.org/docs
|
|
366
|
+
[Buffer-geometry](https://threejs.org/docs/#api/en/core/BufferGeometry) short-cuts for Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe.
|
|
367
367
|
|
|
368
368
|
```jsx
|
|
369
369
|
<Plane args={[2, 2]} />
|
|
370
370
|
<Sphere>
|
|
371
|
-
<meshBasicMaterial
|
|
371
|
+
<meshBasicMaterial color="hotpink" />
|
|
372
372
|
</Sphere>
|
|
373
373
|
```
|
|
374
374
|
|
|
@@ -378,7 +378,7 @@ A box buffer geometry with rounded corners, done with extrusion.
|
|
|
378
378
|
|
|
379
379
|
```jsx
|
|
380
380
|
<RoundedBox args={[1, 1, 1]} radius={0.05} smoothness={4} {...meshProps}>
|
|
381
|
-
<meshPhongMaterial
|
|
381
|
+
<meshPhongMaterial color="#f3f3f3" wireframe />
|
|
382
382
|
</RoundedBox>
|
|
383
383
|
```
|
|
384
384
|
|
|
@@ -501,7 +501,7 @@ Renders a THREE.Line2 using THREE.CubicBezierCurve3 for interpolation.
|
|
|
501
501
|
|
|
502
502
|
[](https://drei.vercel.app/?path=/story/abstractions-positionalaudio--positional-audio-scene-st) 
|
|
503
503
|
|
|
504
|
-
A wrapper around [THREE.PositionalAudio](https://threejs.org/docs
|
|
504
|
+
A wrapper around [THREE.PositionalAudio](https://threejs.org/docs/#api/en/audio/PositionalAudio). Add this to groups or meshes to tie them to a sound that plays when the camera comes near.
|
|
505
505
|
|
|
506
506
|
```jsx
|
|
507
507
|
<PositionalAudio
|
|
@@ -554,11 +554,11 @@ Make sure to set the `makeDefault` prop on your controls, in that case you do no
|
|
|
554
554
|
|
|
555
555
|
#### Effects
|
|
556
556
|
|
|
557
|
-
Abstraction around threes own [EffectComposer](https://threejs.org/docs
|
|
557
|
+
Abstraction around threes own [EffectComposer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer).
|
|
558
558
|
|
|
559
559
|
```jsx
|
|
560
560
|
<Effects multisamping={8} renderIndex={1} disableGamma={false} disableRenderPass={false}>
|
|
561
|
-
<lUTPass
|
|
561
|
+
<lUTPass attach="passes" lut={texture3D} />
|
|
562
562
|
</Effects>
|
|
563
563
|
```
|
|
564
564
|
|
|
@@ -581,7 +581,7 @@ A declarative THREE.Texture which attaches to "map" by default. You can use this
|
|
|
581
581
|
|
|
582
582
|
#### Edges
|
|
583
583
|
|
|
584
|
-
Abstracts [THREE.EdgesGeometry](https://threejs.org/docs
|
|
584
|
+
Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/EdgesGeometry). It pulls the geometry automatically from its parent, optionally you can ungroup it and give it a `geometry` prop. You can give it children, for instance a custom material.
|
|
585
585
|
|
|
586
586
|
```jsx
|
|
587
587
|
<mesh>
|
|
@@ -599,7 +599,7 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/index.html?q=EdgesGeome
|
|
|
599
599
|
|
|
600
600
|
[](https://drei.pmnd.rs/?path=/story/abstractions-useanimations--use-animations-st)
|
|
601
601
|
|
|
602
|
-
A hook that abstracts [AnimationMixer](https://threejs.org/docs
|
|
602
|
+
A hook that abstracts [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer).
|
|
603
603
|
|
|
604
604
|
```jsx
|
|
605
605
|
const { nodes, materials, animations } = useGLTF(url)
|
|
@@ -625,7 +625,7 @@ return <primitive object={scene} />
|
|
|
625
625
|
|
|
626
626
|
[](https://drei.vercel.app/?path=/story/shaders-meshreflectormaterial--reflector-st)
|
|
627
627
|
|
|
628
|
-
Easily add reflections and/or blur to any mesh. It takes surface roughness into account for a more realistic effect. This material extends from [THREE.MeshStandardMaterial](https://threejs.org/docs
|
|
628
|
+
Easily add reflections and/or blur to any mesh. It takes surface roughness into account for a more realistic effect. This material extends from [THREE.MeshStandardMaterial](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial) and accepts all its props.
|
|
629
629
|
|
|
630
630
|
```jsx
|
|
631
631
|
<mesh>
|
|
@@ -662,8 +662,8 @@ This material makes your geometry wobble and wave around. It was taken from the
|
|
|
662
662
|
|
|
663
663
|
```jsx
|
|
664
664
|
<mesh>
|
|
665
|
-
<
|
|
666
|
-
<MeshWobbleMaterial
|
|
665
|
+
<boxGeometry />
|
|
666
|
+
<MeshWobbleMaterial factor={1} speed={10} />
|
|
667
667
|
</mesh>
|
|
668
668
|
```
|
|
669
669
|
|
|
@@ -675,8 +675,8 @@ This material makes your geometry distort following simplex noise.
|
|
|
675
675
|
|
|
676
676
|
```jsx
|
|
677
677
|
<mesh>
|
|
678
|
-
<
|
|
679
|
-
<MeshDistortMaterial
|
|
678
|
+
<boxGeometry />
|
|
679
|
+
<MeshDistortMaterial distort={1} speed={10} />
|
|
680
680
|
</mesh>
|
|
681
681
|
```
|
|
682
682
|
|
|
@@ -694,7 +694,7 @@ An antialiased round dot that always keeps the same size.
|
|
|
694
694
|
|
|
695
695
|
[](https://drei.vercel.app/?path=/story/shaders-softshadows--soft-shadows-st)
|
|
696
696
|
|
|
697
|
-
Injects [percent closer soft shadows (pcss)](https://threejs.org/examples
|
|
697
|
+
Injects [percent closer soft shadows (pcss)](https://threejs.org/examples/#webgl_shadowmap_pcss) into threes shader chunk.
|
|
698
698
|
|
|
699
699
|
```jsx
|
|
700
700
|
softShadows({
|
|
@@ -713,7 +713,7 @@ softShadows({
|
|
|
713
713
|
Creates a THREE.ShaderMaterial for you with easier handling of uniforms, which are also automatically declared as setter/getters on the object.
|
|
714
714
|
|
|
715
715
|
```jsx
|
|
716
|
-
import { extend } from 'react-three
|
|
716
|
+
import { extend } from '@react-three/fiber'
|
|
717
717
|
import glsl from 'babel-plugin-glsl/macro'
|
|
718
718
|
|
|
719
719
|
const ColorShiftMaterial = shaderMaterial(
|
|
@@ -741,7 +741,7 @@ extend({ ColorShiftMaterial })
|
|
|
741
741
|
|
|
742
742
|
// in your component
|
|
743
743
|
<mesh>
|
|
744
|
-
<colorShiftMaterial
|
|
744
|
+
<colorShiftMaterial color="hotpink" time={1} />
|
|
745
745
|
</mesh>
|
|
746
746
|
```
|
|
747
747
|
|
|
@@ -751,7 +751,7 @@ extend({ ColorShiftMaterial })
|
|
|
751
751
|
|
|
752
752
|
[](https://drei.pmnd.rs/?path=/story/modifiers-curvemodifier)
|
|
753
753
|
|
|
754
|
-
Given a curve will replace the children of this component with a mesh that move along said curve calling the property `moveAlongCurve` on the passed ref. Uses [three's Curve Modifier](https://threejs.org/examples
|
|
754
|
+
Given a curve will replace the children of this component with a mesh that move along said curve calling the property `moveAlongCurve` on the passed ref. Uses [three's Curve Modifier](https://threejs.org/examples/#webgl_modifier_curve)
|
|
755
755
|
|
|
756
756
|
```jsx
|
|
757
757
|
const curveRef = useRef()
|
|
@@ -761,7 +761,7 @@ const curve = React.useMemo(() => new THREE.CatmullRomCurve3([...handlePos], tru
|
|
|
761
761
|
return (
|
|
762
762
|
<CurveModifier ref={curveRef} curve={curve}>
|
|
763
763
|
<mesh>
|
|
764
|
-
<
|
|
764
|
+
<boxGeometry args={[10, 10]} />
|
|
765
765
|
</mesh>
|
|
766
766
|
</CurveModifier>
|
|
767
767
|
)
|
|
@@ -969,7 +969,7 @@ useHelper(mesh, BoxHelper, 'cyan')
|
|
|
969
969
|
|
|
970
970
|
This hook uses [DetectGPU by @TimvanScherpenzeel](https://github.com/TimvanScherpenzeel/detect-gpu), wrapped into suspense, to determine what tier should be assigned to the user's GPU.
|
|
971
971
|
|
|
972
|
-
👉 This hook CAN be used outside the react-three
|
|
972
|
+
👉 This hook CAN be used outside the @react-three/fiber `Canvas`.
|
|
973
973
|
|
|
974
974
|
```jsx
|
|
975
975
|
function App() {
|
|
@@ -996,7 +996,7 @@ const scale = useAspect(
|
|
|
996
996
|
)
|
|
997
997
|
return (
|
|
998
998
|
<mesh scale={scale}>
|
|
999
|
-
<
|
|
999
|
+
<planeGeometry />
|
|
1000
1000
|
<meshBasicMaterial map={imageTexture} />
|
|
1001
1001
|
```
|
|
1002
1002
|
|
|
@@ -1015,7 +1015,7 @@ return (
|
|
|
1015
1015
|
|
|
1016
1016
|
#### useIntersect
|
|
1017
1017
|
|
|
1018
|
-
A very cheap frustum check that gives you a reference you can observe in order to know if the object has entered the view or is outside of it. This relies on [THREE.Object3D.onBeforeRender](https://threejs.org/docs
|
|
1018
|
+
A very cheap frustum check that gives you a reference you can observe in order to know if the object has entered the view or is outside of it. This relies on [THREE.Object3D.onBeforeRender](https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender) so it only works on objects that are effectively rendered, like meshes, lines, sprites. It won't work on groups, object3d's, bones, etc.
|
|
1019
1019
|
|
|
1020
1020
|
```jsx
|
|
1021
1021
|
const ref = useIntersect((visible) => console.log('object is visible', visible))
|
|
@@ -1156,7 +1156,7 @@ const envMap = useCubeTexture(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png',
|
|
|
1156
1156
|
|
|
1157
1157
|
#### Instances
|
|
1158
1158
|
|
|
1159
|
-
A wrapper around [THREE.InstancedMesh](https://threejs.org/docs
|
|
1159
|
+
A wrapper around [THREE.InstancedMesh](https://threejs.org/docs/#api/en/objects/InstancedMesh). This allows you to define hundreds of thousands of objects in a single draw call, but declaratively!
|
|
1160
1160
|
|
|
1161
1161
|
```jsx
|
|
1162
1162
|
<Instances
|
|
@@ -1235,7 +1235,7 @@ function Model({ url }) {
|
|
|
1235
1235
|
|
|
1236
1236
|
#### Points
|
|
1237
1237
|
|
|
1238
|
-
A wrapper around [THREE.Points](https://threejs.org/docs
|
|
1238
|
+
A wrapper around [THREE.Points](https://threejs.org/docs/#api/en/objects/Points). It has the same api and properties as Instances.
|
|
1239
1239
|
|
|
1240
1240
|
```jsx
|
|
1241
1241
|
<Points
|
|
@@ -1310,7 +1310,7 @@ useFrame(() => {
|
|
|
1310
1310
|
|
|
1311
1311
|
[](https://drei.vercel.app/?path=/story/abstractions-detailed--detailed-st)
|
|
1312
1312
|
|
|
1313
|
-
A wrapper around [THREE.LOD](https://threejs.org/docs
|
|
1313
|
+
A wrapper around [THREE.LOD](https://threejs.org/docs/#api/en/objects/LOD) (Level of detail).
|
|
1314
1314
|
|
|
1315
1315
|
```jsx
|
|
1316
1316
|
<Detailed distances={[0, 10, 20]} {...props}>
|
|
@@ -1322,7 +1322,7 @@ A wrapper around [THREE.LOD](https://threejs.org/docs/index.html#api/en/objects/
|
|
|
1322
1322
|
|
|
1323
1323
|
#### Preload
|
|
1324
1324
|
|
|
1325
|
-
The WebGLRenderer will compile materials only when they hit the frustrum, which can cause jank. This component precompiles the scene using [gl.compile](https://threejs.org/docs
|
|
1325
|
+
The WebGLRenderer will compile materials only when they hit the frustrum, which can cause jank. This component precompiles the scene using [gl.compile](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.compile) which makes sure that your app is responsive from the get go.
|
|
1326
1326
|
|
|
1327
1327
|
By default gl.compile will only preload visible objects, if you supply the `all` prop, it will circumvent that. With the `scene` and `camera` props you could also use it in portals.
|
|
1328
1328
|
|
|
@@ -1515,7 +1515,7 @@ A cheap canvas-texture-based circular gradient.
|
|
|
1515
1515
|
|
|
1516
1516
|
[](https://drei.vercel.app/?path=/story/shaders-contactshadows--contact-shadow-st)
|
|
1517
1517
|
|
|
1518
|
-
A [contact shadow](https://threejs.org/examples
|
|
1518
|
+
A [contact shadow](https://threejs.org/examples/#webgl_shadow_contact) implementation, facing upwards (positive Y) by default. `scale` can be a positive number or a 2D array `[x: number, y: number]`.
|
|
1519
1519
|
|
|
1520
1520
|
```jsx
|
|
1521
1521
|
<ContactShadows opacity={1} scale={10} blur={1} far={10} resolution={256} />
|
|
@@ -1574,7 +1574,7 @@ If you provide a single string it will use THREE.RGBELoader.
|
|
|
1574
1574
|
|
|
1575
1575
|
[](https://drei.vercel.app/?path=/story/shaders-sky--sky-st)
|
|
1576
1576
|
|
|
1577
|
-
Adds a [sky](https://threejs.org/examples
|
|
1577
|
+
Adds a [sky](https://threejs.org/examples/#webgl_shaders_sky) to your scene.
|
|
1578
1578
|
|
|
1579
1579
|
```jsx
|
|
1580
1580
|
<Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} {...props} />
|
package/core/ArcballControls.js
CHANGED
|
@@ -60,13 +60,10 @@ const ArcballControls = /*#__PURE__*/React.forwardRef(({
|
|
|
60
60
|
}, [explDomElement, onChange, onStart, onEnd, regress, controls, invalidate]);
|
|
61
61
|
React.useEffect(() => {
|
|
62
62
|
if (makeDefault) {
|
|
63
|
-
|
|
64
|
-
const old = get().controls; // @ts-expect-error new in @react-three/fiber@7.0.5
|
|
65
|
-
|
|
63
|
+
const old = get().controls;
|
|
66
64
|
set({
|
|
67
65
|
controls
|
|
68
|
-
});
|
|
69
|
-
|
|
66
|
+
});
|
|
70
67
|
return () => set({
|
|
71
68
|
controls: old
|
|
72
69
|
});
|
package/core/Billboard.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { Group } from 'three';
|
|
3
3
|
export declare type BillboardProps = {
|
|
4
4
|
follow?: boolean;
|
|
5
5
|
lockX?: boolean;
|
|
6
6
|
lockY?: boolean;
|
|
7
7
|
lockZ?: boolean;
|
|
8
8
|
} & JSX.IntrinsicElements['group'];
|
|
9
|
-
export declare const Billboard: React.ForwardRefExoticComponent<Pick<BillboardProps, "visible" | "attach" | "
|
|
9
|
+
export declare const Billboard: React.ForwardRefExoticComponent<Pick<BillboardProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "follow" | "lockX" | "lockY" | "lockZ"> & React.RefAttributes<Group>>;
|
package/core/Center.d.ts
CHANGED
|
@@ -3,5 +3,5 @@ import * as React from 'react';
|
|
|
3
3
|
declare type Props = JSX.IntrinsicElements['group'] & {
|
|
4
4
|
alignTop?: boolean;
|
|
5
5
|
};
|
|
6
|
-
export declare const Center: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "
|
|
6
|
+
export declare const Center: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "alignTop"> & React.RefAttributes<Group>>;
|
|
7
7
|
export {};
|
package/core/ContactShadows.d.ts
CHANGED
|
@@ -8,4 +8,4 @@ export declare const ContactShadows: React.ForwardRefExoticComponent<Pick<Omit<i
|
|
|
8
8
|
resolution?: number | undefined;
|
|
9
9
|
frames?: number | undefined;
|
|
10
10
|
scale?: number | [x: number, y: number] | undefined;
|
|
11
|
-
}, "visible" | "attach" | "
|
|
11
|
+
}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "blur" | "height" | "opacity" | "width" | "resolution" | "far" | "frames"> & React.RefAttributes<unknown>>;
|
package/core/CubeCamera.cjs.js
CHANGED
|
@@ -1 +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 u=n(r);exports.CubeCamera=function({children:r,fog:n,frames:a=1/0,resolution:i=256,near:c=1,far:o=1e3,...f}){const s=u.useRef(),[l,g]=u.useState(),b=t.useThree((({scene:e})=>e)),m=t.useThree((({gl:e})=>e)),d=u.useMemo((()=>new e.WebGLCubeRenderTarget(i,{minFilter:e.LinearFilter,magFilter:e.LinearFilter,format:e.RGBFormat,encoding:m.outputEncoding})),[i]);let p=0;return t.useFrame((()=>{if(l&&s.current&&(a===1/0||p<a)){s.current.traverse((e=>e.visible=!1));const e=b.fog;b.fog=n||e,l.update(m,b),b.fog=e,s.current.traverse((e=>e.visible=!0)),p++}})),u.createElement("group",f,u.createElement("cubeCamera",{ref:g,args:[c,o,d]}),u.createElement("group",{ref:s},r(d.texture)))};
|
|
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 u=n(r);exports.CubeCamera=function({children:r,fog:n,frames:a=1/0,resolution:i=256,near:c=1,far:o=1e3,...f}){const s=u.useRef(),[l,g]=u.useState(null),b=t.useThree((({scene:e})=>e)),m=t.useThree((({gl:e})=>e)),d=u.useMemo((()=>new e.WebGLCubeRenderTarget(i,{minFilter:e.LinearFilter,magFilter:e.LinearFilter,format:e.RGBFormat,encoding:m.outputEncoding})),[i]);let p=0;return t.useFrame((()=>{if(l&&s.current&&(a===1/0||p<a)){s.current.traverse((e=>e.visible=!1));const e=b.fog;b.fog=n||e,l.update(m,b),b.fog=e,s.current.traverse((e=>e.visible=!0)),p++}})),u.createElement("group",f,u.createElement("cubeCamera",{ref:g,args:[c,o,d]}),u.createElement("group",{ref:s},r(d.texture)))};
|
package/core/CubeCamera.js
CHANGED
package/core/Detailed.d.ts
CHANGED
|
@@ -21,4 +21,4 @@ export declare const Detailed: React.ForwardRefExoticComponent<Pick<Omit<import(
|
|
|
21
21
|
} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
|
|
22
22
|
children: React.ReactElement<Object3D>[];
|
|
23
23
|
distances: number[];
|
|
24
|
-
}, "visible" | "attach" | "
|
|
24
|
+
}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "objects" | "update" | "autoUpdate" | "levels" | "isLOD" | "addLevel" | "getCurrentLevel" | "getObjectForDistance" | "distances"> & React.RefAttributes<unknown>>;
|
|
@@ -6,4 +6,4 @@ export declare type DeviceOrientationControlsProps = ReactThreeFiber.Object3DNod
|
|
|
6
6
|
camera?: THREE.Camera;
|
|
7
7
|
onChange?: (e?: THREE.Event) => void;
|
|
8
8
|
};
|
|
9
|
-
export declare const DeviceOrientationControls: React.ForwardRefExoticComponent<Pick<DeviceOrientationControlsProps, "object" | "attach" | "
|
|
9
|
+
export declare const DeviceOrientationControls: React.ForwardRefExoticComponent<Pick<DeviceOrientationControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "enabled" | "update" | "connect" | "disconnect" | "deviceOrientation" | "screenOrientation" | "alphaOffset"> & React.RefAttributes<DeviceOrientationControlsImp>>;
|
package/core/Effects.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("three"),a=require("@react-three/fiber"),s=require("three-stdlib"),n=require("react-merge-refs");function u(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 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)}var i=u(e),o=c(r),l=u(n);a.extend({EffectComposer:s.EffectComposer,RenderPass:s.RenderPass,ShaderPass:s.ShaderPass});const d=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}},f=o.forwardRef((({children:e,multisamping:r=8,renderIndex:n=1,disableGamma:u=!1,disableRenderPass:c=!1,...f},h)=>{const m=o.useRef(),b=a.useThree((({scene:e})=>e)),g=a.useThree((({camera:e})=>e)),p=a.useThree((({gl:e})=>e)),P=a.useThree((({size:e})=>e)),[v]=o.useState((()=>{if(d()&&r>0){const e=new t.WebGLMultisampleRenderTarget(P.width,P.height,{format:t.RGBAFormat,encoding:t.sRGBEncoding});return e.samples=8,e}}));return o.useEffect((()=>{var e,r;null==(e=m.current)||e.setSize(P.width,P.height),null==(r=m.current)||r.setPixelRatio(p.getPixelRatio())}),[p,P]),a.useFrame((()=>{var e;return null==(e=m.current)?void 0:e.render()}),n),o.createElement("effectComposer",i.default({ref:l.default([h,m]),args:[p,v]},f),!c&&o.createElement("renderPass",{
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),s=require("three-stdlib"),n=require("react-merge-refs");function u(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 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)}var i=u(e),o=c(r),l=u(n);a.extend({EffectComposer:s.EffectComposer,RenderPass:s.RenderPass,ShaderPass:s.ShaderPass});const d=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}},f=o.forwardRef((({children:e,multisamping:r=8,renderIndex:n=1,disableGamma:u=!1,disableRenderPass:c=!1,...f},h)=>{const m=o.useRef(),b=a.useThree((({scene:e})=>e)),g=a.useThree((({camera:e})=>e)),p=a.useThree((({gl:e})=>e)),P=a.useThree((({size:e})=>e)),[v]=o.useState((()=>{if(d()&&r>0){const e=new t.WebGLMultisampleRenderTarget(P.width,P.height,{format:t.RGBAFormat,encoding:t.sRGBEncoding});return e.samples=8,e}}));return o.useEffect((()=>{var e,r;null==(e=m.current)||e.setSize(P.width,P.height),null==(r=m.current)||r.setPixelRatio(p.getPixelRatio())}),[p,P]),a.useFrame((()=>{var e;return null==(e=m.current)?void 0:e.render()}),n),o.createElement("effectComposer",i.default({ref:l.default([h,m]),args:[p,v]},f),!c&&o.createElement("renderPass",{attach:"passes",args:[b,g]}),!u&&o.createElement("shaderPass",{attach:"passes",args:[s.GammaCorrectionShader]}),e)}));exports.Effects=f,exports.isWebGL2Available=d;
|
package/core/Effects.d.ts
CHANGED
|
@@ -16,4 +16,4 @@ export declare const Effects: React.ForwardRefExoticComponent<Pick<Omit<Partial<
|
|
|
16
16
|
renderIndex?: number | undefined;
|
|
17
17
|
disableGamma?: boolean | undefined;
|
|
18
18
|
disableRenderPass?: boolean | undefined;
|
|
19
|
-
}, "attach" | "
|
|
19
|
+
}, "attach" | "args" | "children" | "key" | "onUpdate" | keyof EffectComposer<import("three").WebGLRenderTarget> | "multisamping" | "renderIndex" | "disableGamma" | "disableRenderPass"> & React.RefAttributes<unknown>>;
|
package/core/Effects.js
CHANGED
|
@@ -64,10 +64,10 @@ const Effects = /*#__PURE__*/React.forwardRef(({
|
|
|
64
64
|
ref: mergeRefs([ref, composer]),
|
|
65
65
|
args: [gl, target]
|
|
66
66
|
}, props), !disableRenderPass && /*#__PURE__*/React.createElement("renderPass", {
|
|
67
|
-
|
|
67
|
+
attach: "passes",
|
|
68
68
|
args: [scene, camera]
|
|
69
69
|
}), !disableGamma && /*#__PURE__*/React.createElement("shaderPass", {
|
|
70
|
-
|
|
70
|
+
attach: "passes",
|
|
71
71
|
args: [GammaCorrectionShader]
|
|
72
72
|
}), children);
|
|
73
73
|
});
|
|
@@ -2,4 +2,4 @@ import * as React from 'react';
|
|
|
2
2
|
import { Object3DNode } from '@react-three/fiber';
|
|
3
3
|
import { FirstPersonControls as FirstPersonControlImpl } from 'three-stdlib';
|
|
4
4
|
export declare type FirstPersonControlsProps = Object3DNode<FirstPersonControlImpl, typeof FirstPersonControlImpl>;
|
|
5
|
-
export declare const FirstPersonControls: React.ForwardRefExoticComponent<Pick<FirstPersonControlsProps, "object" | "attach" | "
|
|
5
|
+
export declare const FirstPersonControls: React.ForwardRefExoticComponent<Pick<FirstPersonControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "lookAt" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "enabled" | "update" | "domElement" | "movementSpeed" | "autoForward" | "handleResize" | "lookSpeed" | "lookVertical" | "activeLook" | "heightSpeed" | "heightCoef" | "heightMin" | "heightMax" | "constrainVertical" | "verticalMin" | "verticalMax" | "mouseDragOn"> & React.RefAttributes<FirstPersonControlImpl>>;
|
package/core/FlyControls.d.ts
CHANGED
|
@@ -5,4 +5,4 @@ import { FlyControls as FlyControlsImpl } from 'three-stdlib';
|
|
|
5
5
|
export declare type FlyControlsProps = ReactThreeFiber.Object3DNode<FlyControlsImpl, typeof FlyControlsImpl> & {
|
|
6
6
|
onChange?: (e?: THREE.Event) => void;
|
|
7
7
|
};
|
|
8
|
-
export declare const FlyControls: React.ForwardRefExoticComponent<Pick<FlyControlsProps, "object" | "attach" | "
|
|
8
|
+
export declare const FlyControls: React.ForwardRefExoticComponent<Pick<FlyControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "update" | "domElement" | "movementSpeed" | "rollSpeed" | "dragToLook" | "autoForward"> & React.RefAttributes<FlyControlsImpl>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),o=require("./GizmoHelper.cjs.js"),a=require("three");function n(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 o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var s=n(e),c=i(t);const l="#f0f0f0",m="#999",p="black",u="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new a.Vector3(...e).multiplyScalar(.38),y=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),d=[.25,.25,.25],g=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=g.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:n=f,color:i=l,hoverColor:s=m,textColor:h=p,strokeColor:y=u,opacity:d=1})=>{const g=r.useThree((e=>e.gl)),b=c.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=y,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(n[t].toUpperCase(),64,76),new a.CanvasTexture(e)}),[t,n,o,i,h,y]);return c.createElement("meshLambertMaterial",{map:b,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),o=require("./GizmoHelper.cjs.js"),a=require("three");function n(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 o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var s=n(e),c=i(t);const l="#f0f0f0",m="#999",p="black",u="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new a.Vector3(...e).multiplyScalar(.38),y=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),d=[.25,.25,.25],g=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=g.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:n=f,color:i=l,hoverColor:s=m,textColor:h=p,strokeColor:y=u,opacity:d=1})=>{const g=r.useThree((e=>e.gl)),b=c.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=y,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(n[t].toUpperCase(),64,76),new a.CanvasTexture(e)}),[t,n,o,i,h,y]);return c.createElement("meshLambertMaterial",{map:b,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,attach:"material",color:e?s:"white",transparent:!0,opacity:d})},C=e=>{const{tweenCamera:t,raycast:r}=o.useGizmoContext(),[a,n]=c.useState(null);return c.createElement("mesh",{raycast:r,onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,r)=>c.createElement(x,s.default({key:r,index:r,hover:a===r},e)))),c.createElement("boxGeometry",null))},v=({onClick:e,dimensions:t,position:r,hoverColor:a=m})=>{const{tweenCamera:n,raycast:i}=o.useGizmoContext(),[s,l]=c.useState(!1);return c.createElement("mesh",{scale:1.01,position:r,raycast:i,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),n(r)})},c.createElement("meshBasicMaterial",{color:s?a:"white",transparent:!0,opacity:.6,visible:s}),c.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>c.createElement("group",{scale:[60,60,60]},c.createElement(C,e),g.map(((t,r)=>c.createElement(v,s.default({key:r,position:t,dimensions:b[r]},e)))),y.map(((t,r)=>c.createElement(v,s.default({key:r,position:t,dimensions:d},e)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}));
|
package/core/GizmoViewcube.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { ThreeEvent } from '@react-three/fiber';
|
|
3
3
|
declare type GenericProps = {
|
|
4
4
|
font?: string;
|
|
5
5
|
opacity?: number;
|
|
@@ -7,7 +7,7 @@ declare type GenericProps = {
|
|
|
7
7
|
hoverColor?: string;
|
|
8
8
|
textColor?: string;
|
|
9
9
|
strokeColor?: string;
|
|
10
|
-
onClick?: (e:
|
|
10
|
+
onClick?: (e: ThreeEvent<MouseEvent>) => null;
|
|
11
11
|
faces?: string[];
|
|
12
12
|
};
|
|
13
13
|
export declare const GizmoViewcube: (props: GenericProps) => JSX.Element;
|
package/core/GizmoViewcube.js
CHANGED
|
@@ -49,7 +49,7 @@ const FaceMaterial = ({
|
|
|
49
49
|
return /*#__PURE__*/React.createElement("meshLambertMaterial", {
|
|
50
50
|
map: texture,
|
|
51
51
|
"map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
|
|
52
|
-
|
|
52
|
+
attach: "material",
|
|
53
53
|
color: hover ? hoverColor : 'white',
|
|
54
54
|
transparent: true,
|
|
55
55
|
opacity: opacity
|
package/core/GizmoViewport.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { ThreeEvent } from '@react-three/fiber';
|
|
3
3
|
declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
|
|
4
4
|
axisColors?: [string, string, string];
|
|
5
5
|
axisScale?: [number, number, number];
|
|
@@ -10,7 +10,7 @@ declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
|
|
|
10
10
|
hideAxisHeads?: boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
font?: string;
|
|
13
|
-
onClick?: (e:
|
|
13
|
+
onClick?: (e: ThreeEvent<MouseEvent>) => null;
|
|
14
14
|
};
|
|
15
15
|
export declare const GizmoViewport: ({ hideNegativeAxes, hideAxisHeads, disabled, font, axisColors, axisHeadScale, axisScale, labels, labelColor, onClick, ...props }: GizmoViewportProps) => JSX.Element;
|
|
16
16
|
export {};
|
package/core/Image.d.ts
CHANGED
|
@@ -49,5 +49,5 @@ export declare const Image: React.ForwardRefExoticComponent<Pick<Omit<import("@r
|
|
|
49
49
|
zoom?: number | undefined;
|
|
50
50
|
grayscale?: number | undefined;
|
|
51
51
|
url: string;
|
|
52
|
-
}, "visible" | "attach" | "
|
|
52
|
+
}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "zoom" | "material" | "url" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "segments" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
|
|
53
53
|
export {};
|
package/core/Instances.d.ts
CHANGED
|
@@ -34,8 +34,8 @@ declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react
|
|
|
34
34
|
dispose?: (() => void) | null | undefined;
|
|
35
35
|
} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
|
|
36
36
|
context?: React.Context<Api> | undefined;
|
|
37
|
-
}, "visible" | "attach" | "
|
|
38
|
-
declare const Instances: React.ForwardRefExoticComponent<Pick<InstancesProps, "visible" | "attach" | "
|
|
37
|
+
}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "geometry" | "context" | "instance" | "instanceKey"> & React.RefAttributes<unknown>>;
|
|
38
|
+
declare const Instances: React.ForwardRefExoticComponent<Pick<InstancesProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "range" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "instanceMatrix" | "frames" | "count" | "instanceColor" | "isInstancedMesh" | "getColorAt" | "getMatrixAt" | "setColorAt" | "setMatrixAt" | "limit"> & React.RefAttributes<InstancedMesh>>;
|
|
39
39
|
declare function Merged({ meshes, children, ...props }: {
|
|
40
40
|
[x: string]: any;
|
|
41
41
|
meshes: any;
|
package/core/Line.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export declare type LineProps = {
|
|
|
6
6
|
points: Array<Vector3 | [number, number, number]>;
|
|
7
7
|
vertexColors?: Array<Color | [number, number, number]>;
|
|
8
8
|
} & LineMaterialParameters & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'resolution' | 'args'>;
|
|
9
|
-
export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "attach" | "
|
|
9
|
+
export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "attach" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "dashed" | "points" | "material" | "isMaterial" | "needsUpdate" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "isLine2" | "computeLineDistances" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "lineWidth" | "dashScale" | "dashOffset" | "dashSize" | "resolution" | "derivatives" | "defaultAttributeValues" | "index0AttributeName" | "uniformsNeedUpdate" | "isShaderMaterial" | "gapSize" | keyof import("three").ShaderMaterialParameters> & React.RefAttributes<Line2>>;
|