@react-three/drei 8.4.0 → 9.0.0-beta.1

package/README.md

@@ -4,13 +4,13 @@
 [![Downloads](https://img.shields.io/npm/dt/@react-three/drei.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
 [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/poimandres)
 
-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!
+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!
 
 ```bash
 npm install @react-three/drei
 ```
 
-: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/dev/examples/jsm). :point_left:
+: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:
 
 ### Basic usage:
 
@@ -64,6 +64,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#gizmohelper">GizmoHelper</a></li>
           <li><a href="#effects">Effects</a></li>
           <li><a href="#gradienttexture">GradientTexture</a></li>
+          <li><a href="#edges">Edges</a></li>
           <li><a href="#useanimations">useAnimations</a></li>
         </ul>
         <li><a href="#shaders">Shaders</a></li>
@@ -87,6 +88,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
         <ul>
           <li><a href="#html">Html</a></li>
           <li><a href="#cycleraycast">CycleRaycast</a></li>
+          <li><a href="#select">Select</a></li>
           <li><a href="#stats">Stats</a></li>
           <li><a href="#usedepthbuffer">useDepthBuffer</a></li>
           <li><a href="#usecontextbridge">useContextBridge</a></li>
@@ -177,7 +179,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-perspectivecamera--perspective-camera-scene-st)
 
-A responsive [THREE.PerspectiveCamera](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) that can set itself as the default.
+A responsive [THREE.PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) that can set itself as the default.
 
 ```jsx
 <PerspectiveCamera makeDefault {...props} />
@@ -202,7 +204,7 @@ You can also drive it manually, it won't be responsive and you have to calculate
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-orthographiccamera--orthographic-camera-scene-st)
 
-A responsive [THREE.OrthographicCamera](https://threejs.org/docs/index.html#api/en/cameras/OrthographicCamera) that can set itself as the default.
+A responsive [THREE.OrthographicCamera](https://threejs.org/docs/#api/en/cameras/OrthographicCamera) that can set itself as the default.
 
 ```jsx
 <OrthographicCamera makeDefault {...props}>
@@ -214,7 +216,7 @@ A responsive [THREE.OrthographicCamera](https://threejs.org/docs/index.html#api/
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/camera-cubecamera--default-story)
 
-A [THREE.CubeCamera](https://threejs.org/docs/index.html#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.
+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.
 
 Using the `frames` prop you can control if this camera renders indefinitively or statically (a given number of times).
 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.
@@ -233,9 +235,9 @@ If you have moving objects, unset the prop and use a smaller `resolution` instea
 
 # Controls
 
-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/dev/examples/jsm/controls).
+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).
 
-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.
+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.
 
 Drei currently exports OrbitControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-orbitcontrols--orbit-controls-story), MapControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-mapcontrols--map-controls-scene-st), TrackballControls, ArcballControls, FlyControls, DeviceOrientationControls, PointerLockControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-pointerlockcontrols--pointer-lock-controls-scene-st), FirstPersonControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-firstpersoncontrols--first-person-controls-story)
 
@@ -247,7 +249,7 @@ PointerLockControls additionally supports a `selector` prop, which enables the b
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-transformcontrols--transform-controls-story)
 
-An abstraction around [THREE.TransformControls](https://threejs.org/docs/index.html?q=transfor#examples/en/controls/TransformControls).
+An abstraction around [THREE.TransformControls](https://threejs.org/docs/#examples/en/controls/TransformControls).
 
 You can wrap objects which then receive a transform gizmo.
 
@@ -361,12 +363,12 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
 
 # Shapes
 
-[Buffer-geometry](https://threejs.org/docs/index.html#api/en/core/BufferGeometry) short-cuts for Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe.
+[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.
 
 ```jsx
 <Plane args={[2, 2]} />
 <Sphere>
-  <meshBasicMaterial attach="material" color="hotpink" />
+  <meshBasicMaterial color="hotpink" />
 </Sphere>
 ```
 
@@ -376,7 +378,7 @@ A box buffer geometry with rounded corners, done with extrusion.
 
 ```jsx
 <RoundedBox args={[1, 1, 1]} radius={0.05} smoothness={4} {...meshProps}>
-  <meshPhongMaterial attach="material" color="#f3f3f3" wireframe />
+  <meshPhongMaterial color="#f3f3f3" wireframe />
 </RoundedBox>
 ```
 
@@ -499,7 +501,7 @@ Renders a THREE.Line2 using THREE.CubicBezierCurve3 for interpolation.
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-positionalaudio--positional-audio-scene-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
 
-A wrapper around [THREE.PositionalAudio](https://threejs.org/docs/index.html#api/en/audio/PositionalAudio). Add this to groups or meshes to tie them to a sound that plays when the camera comes near.
+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.
 
 ```jsx
 <PositionalAudio
@@ -552,11 +554,11 @@ Make sure to set the `makeDefault` prop on your controls, in that case you do no
 
 #### Effects
 
-Abstraction around threes own [EffectComposer](https://threejs.org/docs/index.html#examples/en/postprocessing/EffectComposer).
+Abstraction around threes own [EffectComposer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer).
 
 ```jsx
 <Effects multisamping={8} renderIndex={1} disableGamma={false} disableRenderPass={false}>
-  <lUTPass attachArray="passes" lut={texture3D} />
+  <lUTPass attach="passes" lut={texture3D} />
 </Effects>
 ```
 
@@ -577,11 +579,27 @@ A declarative THREE.Texture which attaches to "map" by default. You can use this
 </mesh>
 ```
 
+#### Edges
+
+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.
+
+```jsx
+<mesh>
+  <boxGeometry />
+  <meshBasicMaterial />
+  <Edges
+    scale={1.1}
+    threshold={15} // Display edges only when the angle between two faces exceeds this value (default=15 degrees)
+    color="white"
+  />
+</mesh>
+```
+
 #### useAnimations
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-useanimations--use-animations-st)
 
-A hook that abstracts [AnimationMixer](https://threejs.org/docs/index.html#api/en/animation/AnimationMixer).
+A hook that abstracts [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer).
 
 ```jsx
 const { nodes, materials, animations } = useGLTF(url)
@@ -607,7 +625,7 @@ return <primitive object={scene} />
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-meshreflectormaterial--reflector-st)
 
-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/index.html?q=meshsta#api/en/materials/MeshStandardMaterial) and accepts all its props.
+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.
 
 ```jsx
 <mesh>
@@ -644,8 +662,8 @@ This material makes your geometry wobble and wave around. It was taken from the
 
 ```jsx
 <mesh>
-  <boxBufferGeometry attach="geometry" />
-  <MeshWobbleMaterial attach="material" factor={1} speed={10} />
+  <boxGeometry />
+  <MeshWobbleMaterial factor={1} speed={10} />
 </mesh>
 ```
 
@@ -657,8 +675,8 @@ This material makes your geometry distort following simplex noise.
 
 ```jsx
 <mesh>
-  <boxBufferGeometry attach="geometry" />
-  <MeshDistortMaterial attach="material" distort={1} speed={10} />
+  <boxGeometry />
+  <MeshDistortMaterial distort={1} speed={10} />
 </mesh>
 ```
 
@@ -676,7 +694,7 @@ An antialiased round dot that always keeps the same size.
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-softshadows--soft-shadows-st)
 
-Injects [percent closer soft shadows (pcss)](https://threejs.org/examples/?q=pcss#webgl_shadowmap_pcss) into threes shader chunk.
+Injects [percent closer soft shadows (pcss)](https://threejs.org/examples/#webgl_shadowmap_pcss) into threes shader chunk.
 
 ```jsx
 softShadows({
@@ -695,7 +713,7 @@ softShadows({
 Creates a THREE.ShaderMaterial for you with easier handling of uniforms, which are also automatically declared as setter/getters on the object.
 
 ```jsx
-import { extend } from 'react-three-fiber'
+import { extend } from '@react-three/fiber'
 import glsl from 'babel-plugin-glsl/macro'
 
 const ColorShiftMaterial = shaderMaterial(
@@ -723,7 +741,7 @@ extend({ ColorShiftMaterial })
 
 // in your component
 <mesh>
-  <colorShiftMaterial attach="material" color="hotpink" time={1} />
+  <colorShiftMaterial color="hotpink" time={1} />
 </mesh>
 ```
 
@@ -733,7 +751,7 @@ extend({ ColorShiftMaterial })
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/modifiers-curvemodifier)
 
-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/?q=curve#webgl_modifier_curve)
+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)
 
 ```jsx
 const curveRef = useRef()
@@ -743,7 +761,7 @@ const curve = React.useMemo(() => new THREE.CatmullRomCurve3([...handlePos], tru
 return (
   <CurveModifier ref={curveRef} curve={curve}>
     <mesh>
-      <boxBufferGeometry args={[10, 10]} />
+      <boxGeometry args={[10, 10]} />
     </mesh>
   </CurveModifier>
 )
@@ -852,6 +870,22 @@ For this to work properly your event handler have to call `event.stopPropagation
 />
 ```
 
+#### Select
+
+![](https://img.shields.io/badge/-Dom only-red)
+
+This component allows you to select/unselect objects by clicking on them. It keeps track of the currently selected objects and can select multiple objects (with the shift key). Nested components can request the current selection (which is always an array) with the `useSelect` hook. With the `box` prop it will let you shift-box-select objects by holding and draging the cursor over multiple objects.
+
+```jsx
+<Select box multiple onChange={console.log}>
+  <Foo />
+  <Bar />
+</Select>
+
+function Foo() {
+  const selected = useSelect()
+```
+
 #### Stats
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-stats--default-story)
@@ -935,7 +969,7 @@ useHelper(mesh, BoxHelper, 'cyan')
 
 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.
 
-👉 This hook CAN be used outside the react-three-fiber `Canvas`.
+👉 This hook CAN be used outside the @react-three/fiber `Canvas`.
 
 ```jsx
 function App() {
@@ -962,7 +996,7 @@ const scale = useAspect(
 )
 return (
   <mesh scale={scale}>
-    <planeBufferGeometry />
+    <planeGeometry />
     <meshBasicMaterial map={imageTexture} />
 ```
 
@@ -981,7 +1015,7 @@ return (
 
 #### useIntersect
 
-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/index.html?q=obj#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.
+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.
 
 ```jsx
 const ref = useIntersect((visible) => console.log('object is visible', visible))
@@ -1122,7 +1156,7 @@ const envMap = useCubeTexture(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png',
 
 #### Instances
 
-A wrapper around [THREE.InstancedMesh](https://threejs.org/docs/index.html?q=instan#api/en/objects/InstancedMesh). This allows you to define hundreds of thousands of objects in a single draw call, but declaratively!
+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!
 
 ```jsx
 <Instances
@@ -1201,7 +1235,7 @@ function Model({ url }) {
 
 #### Points
 
-A wrapper around [THREE.Points](https://threejs.org/docs/index.html?q=points#api/en/objects/Points). It has the same api and properties as Instances.
+A wrapper around [THREE.Points](https://threejs.org/docs/#api/en/objects/Points). It has the same api and properties as Instances.
 
 ```jsx
 <Points
@@ -1276,7 +1310,7 @@ useFrame(() => {
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-detailed--detailed-st)
 
-A wrapper around [THREE.LOD](https://threejs.org/docs/index.html#api/en/objects/LOD) (Level of detail).
+A wrapper around [THREE.LOD](https://threejs.org/docs/#api/en/objects/LOD) (Level of detail).
 
 ```jsx
 <Detailed distances={[0, 10, 20]} {...props}>
@@ -1288,7 +1322,7 @@ A wrapper around [THREE.LOD](https://threejs.org/docs/index.html#api/en/objects/
 
 #### Preload
 
-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/index.html#api/en/renderers/WebGLRenderer.compile) which makes sure that your app is responsive from the get go.
+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.
 
 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.
 
@@ -1481,7 +1515,7 @@ A cheap canvas-texture-based circular gradient.
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-contactshadows--contact-shadow-st)
 
-A [contact shadow](https://threejs.org/examples/?q=con#webgl_shadow_contact) implementation, facing upwards (positive Y) by default. `scale` can be a positive number or a 2D array `[x: number, y: number]`.
+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]`.
 
 ```jsx
 <ContactShadows opacity={1} scale={10} blur={1} far={10} resolution={256} />
@@ -1540,7 +1574,7 @@ If you provide a single string it will use THREE.RGBELoader.
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-sky--sky-st)
 
-Adds a [sky](https://threejs.org/examples/webgl_shaders_sky.html) to your scene.
+Adds a [sky](https://threejs.org/examples/#webgl_shaders_sky) to your scene.
 
 ```jsx
 <Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} {...props} />

package/core/ArcballControls.js

@@ -60,13 +60,10 @@ const ArcballControls = /*#__PURE__*/React.forwardRef(({
   }, [explDomElement, onChange, onStart, onEnd, regress, controls, invalidate]);
   React.useEffect(() => {
     if (makeDefault) {
-      // @ts-expect-error new in @react-three/fiber@7.0.5
-      const old = get().controls; // @ts-expect-error new in @react-three/fiber@7.0.5
-
+      const old = get().controls;
       set({
         controls
-      }); // @ts-expect-error new in @react-three/fiber@7.0.5
-
+      });
       return () => set({
         controls: old
       });

package/core/Billboard.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Mesh } from 'three';
+import { Group } from 'three';
 export declare type BillboardProps = {
     follow?: boolean;
     lockX?: boolean;
     lockY?: boolean;
     lockZ?: boolean;
 } & JSX.IntrinsicElements['group'];
-export declare const Billboard: React.ForwardRefExoticComponent<Pick<BillboardProps, "visible" | "attach" | "attachArray" | "attachObject" | "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<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
+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

@@ -3,5 +3,5 @@ import * as React from 'react';
 declare type Props = JSX.IntrinsicElements['group'] & {
     alignTop?: boolean;
 };
-export declare const Center: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "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>>;
+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>>;
 export {};

package/core/ContactShadows.d.ts

@@ -8,4 +8,4 @@ export declare const ContactShadows: React.ForwardRefExoticComponent<Pick<Omit<i
     resolution?: number | undefined;
     frames?: number | undefined;
     scale?: number | [x: number, y: number] | undefined;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "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>>;
+}, "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

@@ -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)))};
+"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

@@ -12,7 +12,7 @@ function CubeCamera({
   ...props
 }) {
   const ref = React.useRef();
-  const [camera, setCamera] = React.useState();
+  const [camera, setCamera] = React.useState(null);
   const scene = useThree(({
     scene
   }) => scene);

package/core/Detailed.d.ts

@@ -21,4 +21,4 @@ export declare const Detailed: React.ForwardRefExoticComponent<Pick<Omit<import(
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     children: React.ReactElement<Object3D>[];
     distances: number[];
-}, "visible" | "attach" | "attachArray" | "attachObject" | "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>>;
+}, "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>>;

package/core/DeviceOrientationControls.d.ts

@@ -6,4 +6,4 @@ export declare type DeviceOrientationControlsProps = ReactThreeFiber.Object3DNod
     camera?: THREE.Camera;
     onChange?: (e?: THREE.Event) => void;
 };
-export declare const DeviceOrientationControls: React.ForwardRefExoticComponent<Pick<DeviceOrientationControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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>>;
+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/Edges.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=n(e),a=u(r),o=u(t);exports.Edges=function({userData:e,children:r,geometry:t,threshold:n=15,color:u="black",...l}){const s=a.useRef(null);return a.useLayoutEffect((()=>{const e=s.current.parent;if(e){const r=t||e.geometry;r===s.current.userData.currentGeom&&n===s.current.userData.currentThreshold||(s.current.userData.currentGeom=r,s.current.userData.currentThreshold=n,s.current.geometry=new o.EdgesGeometry(r,n))}})),a.createElement("lineSegments",c.default({ref:s,raycast:()=>null},l),r||a.createElement("lineBasicMaterial",{color:u}))};

package/core/Edges.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ReactThreeFiber } from '@react-three/fiber';
+declare type Props = JSX.IntrinsicElements['lineSegments'] & {
+    threshold?: number;
+    color?: ReactThreeFiber.Color;
+};
+export declare function Edges({ userData, children, geometry, threshold, color, ...props }: Props): JSX.Element;
+export {};

package/core/Edges.js

@@ -0,0 +1,35 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+
+function Edges({
+  userData,
+  children,
+  geometry,
+  threshold = 15,
+  color = 'black',
+  ...props
+}) {
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const parent = ref.current.parent;
+
+    if (parent) {
+      const geom = geometry || parent.geometry;
+
+      if (geom !== ref.current.userData.currentGeom || threshold !== ref.current.userData.currentThreshold) {
+        ref.current.userData.currentGeom = geom;
+        ref.current.userData.currentThreshold = threshold;
+        ref.current.geometry = new THREE.EdgesGeometry(geom, threshold);
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement("lineSegments", _extends({
+    ref: ref,
+    raycast: () => null
+  }, props), children ? children : /*#__PURE__*/React.createElement("lineBasicMaterial", {
+    color: color
+  }));
+}
+
+export { Edges };

package/core/Effects.cjs.js

@@ -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",{attachArray:"passes",args:[b,g]}),!u&&o.createElement("shaderPass",{attachArray:"passes",args:[s.GammaCorrectionShader]}),e)}));exports.Effects=f,exports.isWebGL2Available=d;
+"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

@@ -16,4 +16,4 @@ export declare const Effects: React.ForwardRefExoticComponent<Pick<Omit<Partial<
     renderIndex?: number | undefined;
     disableGamma?: boolean | undefined;
     disableRenderPass?: boolean | undefined;
-}, "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | keyof EffectComposer<import("three").WebGLRenderTarget> | "multisamping" | "renderIndex" | "disableGamma" | "disableRenderPass"> & React.RefAttributes<unknown>>;
+}, "attach" | "args" | "children" | "key" | "onUpdate" | keyof EffectComposer<import("three").WebGLRenderTarget> | "multisamping" | "renderIndex" | "disableGamma" | "disableRenderPass"> & React.RefAttributes<unknown>>;

package/core/Effects.js

@@ -64,10 +64,10 @@ const Effects = /*#__PURE__*/React.forwardRef(({
     ref: mergeRefs([ref, composer]),
     args: [gl, target]
   }, props), !disableRenderPass && /*#__PURE__*/React.createElement("renderPass", {
-    attachArray: "passes",
+    attach: "passes",
     args: [scene, camera]
   }), !disableGamma && /*#__PURE__*/React.createElement("shaderPass", {
-    attachArray: "passes",
+    attach: "passes",
     args: [GammaCorrectionShader]
   }), children);
 });

package/core/FirstPersonControls.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import { Object3DNode } from '@react-three/fiber';
 import { FirstPersonControls as FirstPersonControlImpl } from 'three-stdlib';
 export declare type FirstPersonControlsProps = Object3DNode<FirstPersonControlImpl, typeof FirstPersonControlImpl>;
-export declare const FirstPersonControls: React.ForwardRefExoticComponent<Pick<FirstPersonControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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>>;
+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

@@ -5,4 +5,4 @@ import { FlyControls as FlyControlsImpl } from 'three-stdlib';
 export declare type FlyControlsProps = ReactThreeFiber.Object3DNode<FlyControlsImpl, typeof FlyControlsImpl> & {
     onChange?: (e?: THREE.Event) => void;
 };
-export declare const FlyControls: React.ForwardRefExoticComponent<Pick<FlyControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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>>;
+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>>;

package/core/GizmoViewcube.cjs.js

@@ -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,attachArray:"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}));
+"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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Event } from 'three';
+import { ThreeEvent } from '@react-three/fiber';
 declare type GenericProps = {
     font?: string;
     opacity?: number;
@@ -7,7 +7,7 @@ declare type GenericProps = {
     hoverColor?: string;
     textColor?: string;
     strokeColor?: string;
-    onClick?: (e: Event) => null;
+    onClick?: (e: ThreeEvent<MouseEvent>) => null;
     faces?: string[];
 };
 export declare const GizmoViewcube: (props: GenericProps) => JSX.Element;

package/core/GizmoViewcube.js

@@ -49,7 +49,7 @@ const FaceMaterial = ({
   return /*#__PURE__*/React.createElement("meshLambertMaterial", {
     map: texture,
     "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
-    attachArray: "material",
+    attach: "material",
     color: hover ? hoverColor : 'white',
     transparent: true,
     opacity: opacity

package/core/GizmoViewport.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Event } from 'three';
+import { ThreeEvent } from '@react-three/fiber';
 declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     axisColors?: [string, string, string];
     axisScale?: [number, number, number];
@@ -10,7 +10,7 @@ declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     hideAxisHeads?: boolean;
     disabled?: boolean;
     font?: string;
-    onClick?: (e: Event) => null;
+    onClick?: (e: ThreeEvent<MouseEvent>) => null;
 };
 export declare const GizmoViewport: ({ hideNegativeAxes, hideAxisHeads, disabled, font, axisColors, axisHeadScale, axisScale, labels, labelColor, onClick, ...props }: GizmoViewportProps) => JSX.Element;
 export {};