@react-three/drei 9.83.9 → 9.84.1

package/README.md

@@ -53,6 +53,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#presentationcontrols">PresentationControls</a></li>
           <li><a href="#keyboardcontrols">KeyboardControls</a></li>
           <li><a href="#FaceControls">FaceControls</a></li>
+          <li><a href="#motionpathcontrols">MotionPathControls</a></li>
         </ul>
         <li><a href="#gizmos">Gizmos</a></li>
         <ul>
@@ -750,6 +751,118 @@ useFrame((_, delta) => {
 })
 ```
 
+#### MotionPathControls
+
+<p>
+  <a href="https://codesandbox.io/s/2y73c6"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2y73c6/screenshot.png" alt="Demo"/></a>
+</p>
+
+Motion path controls, it takes a path of bezier curves or catmull-rom curves as input and animates the passed `object` along that path. It can be configured to look upon an external object for staging or presentation purposes by adding a `focusObject` property (ref).
+
+```tsx
+type MotionPathProps = JSX.IntrinsicElements['group'] & {
+  /** An optional array of THREE curves */
+  curves?: THREE.Curve<THREE.Vector3>[]
+  /** Show debug helpers */
+  debug?: boolean
+  /** The target object that is moved, default: null (the default camera) */
+  object?: React.MutableRefObject<THREE.Object3D>
+  /** An object where the target looks towards, can also be a vector, default: null */
+  focus?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D>
+  /** Position between 0 (start) and end (1), if this is not set useMotion().current must be used, default: null */
+  offset?: number
+  /** Optionally smooth the curve, default: false */
+  smooth?: boolean | number
+  /** Damping tolerance, default: 0.00001 */
+  eps?: number
+  /** Damping factor for movement along the curve, default: 0.1 */
+  damping?: number
+  /** Damping factor for lookAt, default: 0.1 */
+  focusDamping?: number
+  /** Damping maximum speed, default: Infinity */
+  maxSpeed?: number
+}
+```
+
+You can use MotionPathControls with declarative curves.
+
+```jsx
+function App() {
+  const poi = useRef()
+  return (
+    <group>
+      <MotionPathControls offset={0} focus={poi} damping={0.2}>
+        <cubicBezierCurve3 v0={[-5, -5, 0]} v1={[-10, 0, 0]} v2={[0, 3, 0]} v3={[6, 3, 0]} />
+        <cubicBezierCurve3 v0={[6, 3, 0]} v1={[10, 5, 5]} v2={[5, 5, 5]} v3={[5, 5, 5]} />
+      </MotionPathControls>
+      <Box args={[1, 1, 1]} ref={poi}/>
+```
+
+Or with imperative curves.
+
+```jsx
+<MotionPathControls
+  offset={0}
+  focus={poi}
+  damping={0.2}
+  curves={[
+    new THREE.CubicBezierCurve3(
+      new THREE.Vector3(-5, -5, 0),
+      new THREE.Vector3(-10, 0, 0),
+      new THREE.Vector3(0, 3, 0),
+      new THREE.Vector3(6, 3, 0)
+    ),
+    new THREE.CubicBezierCurve3(
+      new THREE.Vector3(6, 3, 0),
+      new THREE.Vector3(10, 5, 5),
+      new THREE.Vector3(5, 3, 5),
+      new THREE.Vector3(5, 5, 5)
+    ),
+  ]}
+/>
+```
+
+You can exert full control with the `useMotion` hook, it allows you to define the current position along the path for instance, or define your own lookAt. Keep in mind that MotionPathControls will still these values unless you set damping and focusDamping to 0. Then you can also employ your own easing.
+
+```tsx
+type MotionState = {
+  /** The user-defined, mutable, current goal position along the curve, it may be >1 or <0 */
+  current: number
+  /** The combined curve */
+  path: THREE.CurvePath<THREE.Vector3>
+  /** The focus object */
+  focus: React.MutableRefObject<THREE.Object3D<THREE.Event>> | [x: number, y: number, z: number] | undefined
+  /** The target object that is moved along the curve */
+  object: React.MutableRefObject<THREE.Object3D<THREE.Event>>
+  /** The automated, 0-1 normalised and damped current goal position along curve */
+  offset: number
+  /** The current point on the curve */
+  point: THREE.Vector3
+  /** The current tangent on the curve */
+  tangent: THREE.Vector3
+  /** The next point on the curve */
+  next: THREE.Vector3
+}
+
+const state: MotionState = useMotion()
+```
+
+```jsx
+function Loop() {
+  const motion = useMotion()
+  useFrame((state, delta) => {
+    // Set the current position along the curve, you can increment indiscriminately for a loop
+    motion.current += delta
+    // Look ahead on the curve
+    motion.object.lookAt(motion.next)
+  })
+}
+
+<MotionPathControls>
+  <cubicBezierCurve3 v0={[-5, -5, 0]} v1={[-10, 0, 0]} v2={[0, 3, 0]} v3={[6, 3, 0]} />
+  <Loop />
+```
+
 # Gizmos
 
 #### GizmoHelper
@@ -1135,13 +1248,13 @@ export type FacemeshProps = {
   /** a landmark index (to get the position from) or a vec3 to be the origin of the mesh. default: undefined (ie. the bbox center) */
   origin?: number | THREE.Vector3
   /** A facial transformation matrix, as returned by FaceLandmarkerResult.facialTransformationMatrixes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
-  facialTransformationMatrix?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes[0]
+  facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0]
   /** Apply position offset extracted from `facialTransformationMatrix` */
   offset?: boolean
   /** Offset sensitivity factor, less is more sensible */
   offsetScalar?: number
   /** Fface blendshapes, as returned by FaceLandmarkerResult.faceBlendshapes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
-  faceBlendshapes?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes[0]
+  faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0]
   /** whether to enable eyes (nb. `faceBlendshapes` is required for), default: true */
   eyes?: boolean
   /** Force `origin` to be the middle of the 2 eyes (nb. `eyes` is required for), default: false */
@@ -2802,8 +2915,6 @@ useGLTF.preload(url)
 
 If you want to use your own draco decoder globally, you can pass it through `useGLTF.setDecoderPath(path)`:
 
-````jsx
-
 > **Note** <br>If you are using the CDN loaded draco binaries, you can get a small speedup in loading time by prefetching them.
 >
 > You can accomplish this by adding two `<link>` tags to your `<head>` tag, as below. The version in those URLs must exactly match what [useGLTF](src/core/useGLTF.tsx#L18) uses for this to work. If you're using create-react-app, `public/index.html` file contains the `<head>` tag.
@@ -2836,7 +2947,7 @@ function SuzanneFBX() {
   let fbx = useFBX('suzanne/suzanne.fbx')
   return <primitive object={fbx} />
 }
-````
+```
 
 #### useTexture
 

package/core/AccumulativeShadows.d.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type AccumulativeShadowsProps = {
+export type AccumulativeShadowsProps = {
     frames?: number;
     blend?: number;
     limit?: number;
@@ -28,7 +28,7 @@ interface AccumulativeContext {
 interface AccumulativeLightContext {
     update: () => void;
 }
-declare type SoftShadowMaterialProps = {
+type SoftShadowMaterialProps = {
     map: THREE.Texture;
     color?: ReactThreeFiber.Color;
     alphaTest?: number;
@@ -43,7 +43,7 @@ declare global {
 }
 export declare const accumulativeContext: React.Context<AccumulativeContext>;
 export declare const AccumulativeShadows: ForwardRefComponent<JSX.IntrinsicElements['group'] & AccumulativeShadowsProps, AccumulativeContext>;
-export declare type RandomizedLightProps = {
+export type RandomizedLightProps = {
     frames?: number;
     position?: [x: number, y: number, z: number];
     radius?: number;

package/core/AccumulativeShadows.js

@@ -8,11 +8,9 @@ import { DiscardMaterial } from '../materials/DiscardMaterial.js';
 function isLight(object) {
   return object.isLight;
 }
-
 function isGeometry(object) {
   return !!object.geometry;
 }
-
 const accumulativeContext = /*#__PURE__*/React.createContext(null);
 const SoftShadowMaterial = shaderMaterial({
   color: new THREE.Color(),
@@ -82,38 +80,38 @@ const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
     update: (frames = 1) => {
       // Adapt the opacity-blend ratio to the number of frames
       const material = gPlane.current.material;
-
       if (!api.temporal) {
         material.opacity = opacity;
         material.alphaTest = alphaTest;
       } else {
         material.opacity = Math.min(opacity, material.opacity + opacity / api.blend);
         material.alphaTest = Math.min(alphaTest, material.alphaTest + alphaTest / api.blend);
-      } // Switch accumulative lights on
-
-
-      gLights.current.visible = true; // Collect scene lights and meshes
+      }
 
-      plm.prepare(); // Update the lightmap and the accumulative lights
+      // Switch accumulative lights on
+      gLights.current.visible = true;
+      // Collect scene lights and meshes
+      plm.prepare();
 
+      // Update the lightmap and the accumulative lights
       for (let i = 0; i < frames; i++) {
         api.lights.forEach(light => light.update());
         plm.update(camera, api.blend);
-      } // Switch lights off
-
-
-      gLights.current.visible = false; // Restore lights and meshes
-
+      }
+      // Switch lights off
+      gLights.current.visible = false;
+      // Restore lights and meshes
       plm.finish();
     }
   }), [plm, camera, scene, temporal, frames, blend, opacity, alphaTest]);
   React.useLayoutEffect(() => {
     // Reset internals, buffers, ...
-    api.reset(); // Update lightmap
-
+    api.reset();
+    // Update lightmap
     if (!api.temporal && api.frames !== Infinity) api.update(api.blend);
-  }); // Expose api, allow children to set itself as the main light source
+  });
 
+  // Expose api, allow children to set itself as the main light source
   React.useImperativeHandle(forwardRef, () => api, [api]);
   useFrame(() => {
     if ((api.temporal || api.frames === Infinity) && api.count < api.frames && api.count < limit) {
@@ -161,11 +159,9 @@ const RandomizedLight = /*#__PURE__*/React.forwardRef(({
   const parent = React.useContext(accumulativeContext);
   const update = React.useCallback(() => {
     let light;
-
     if (gLights.current) {
       for (let l = 0; l < gLights.current.children.length; l++) {
         light = gLights.current.children[l];
-
         if (Math.random() > ambient) {
           light.position.set(position[0] + THREE.MathUtils.randFloatSpread(radius), position[1] + THREE.MathUtils.randFloatSpread(radius), position[2] + THREE.MathUtils.randFloatSpread(radius));
         } else {
@@ -199,8 +195,9 @@ const RandomizedLight = /*#__PURE__*/React.forwardRef(({
     attach: "shadow-camera",
     args: [-size, size, size, -size, near, far]
   }))));
-}); // Based on "Progressive Light Map Accumulator", by [zalo](https://github.com/zalo/)
+});
 
+// Based on "Progressive Light Map Accumulator", by [zalo](https://github.com/zalo/)
 class ProgressiveLightMap {
   constructor(renderer, scene, res = 1024) {
     this.renderer = renderer;
@@ -211,16 +208,18 @@ class ProgressiveLightMap {
     this.meshes = [];
     this.object = null;
     this.clearColor = new THREE.Color();
-    this.clearAlpha = 0; // Create the Progressive LightMap Texture
+    this.clearAlpha = 0;
 
+    // Create the Progressive LightMap Texture
     const textureParams = {
       type: THREE.HalfFloatType,
       magFilter: THREE.NearestFilter,
       minFilter: THREE.NearestFilter
     };
     this.progressiveLightMap1 = new THREE.WebGLRenderTarget(this.res, this.res, textureParams);
-    this.progressiveLightMap2 = new THREE.WebGLRenderTarget(this.res, this.res, textureParams); // Inject some spicy new logic into a standard phong material
+    this.progressiveLightMap2 = new THREE.WebGLRenderTarget(this.res, this.res, textureParams);
 
+    // Inject some spicy new logic into a standard phong material
     this.discardMat = new DiscardMaterial();
     this.targetMat = new THREE.MeshLambertMaterial({
       fog: false
@@ -231,21 +230,21 @@ class ProgressiveLightMap {
     this.averagingWindow = {
       value: 100
     };
-
     this.targetMat.onBeforeCompile = shader => {
       // Vertex Shader: Set Vertex Positions to the Unwrapped UV Positions
-      shader.vertexShader = 'varying vec2 vUv;\n' + shader.vertexShader.slice(0, -1) + 'vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }'; // Fragment Shader: Set Pixels to average in the Previous frame's Shadows
+      shader.vertexShader = 'varying vec2 vUv;\n' + shader.vertexShader.slice(0, -1) + 'vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }';
 
+      // Fragment Shader: Set Pixels to average in the Previous frame's Shadows
       const bodyStart = shader.fragmentShader.indexOf('void main() {');
       shader.fragmentShader = 'varying vec2 vUv;\n' + shader.fragmentShader.slice(0, bodyStart) + 'uniform sampler2D previousShadowMap;\n	uniform float averagingWindow;\n' + shader.fragmentShader.slice(bodyStart - 1, -1) + `\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;
         gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);
-      }`; // Set the Previous Frame's Texture Buffer and Averaging Window
+      }`;
 
+      // Set the Previous Frame's Texture Buffer and Averaging Window
       shader.uniforms.previousShadowMap = this.previousShadowMap;
       shader.uniforms.averagingWindow = this.averagingWindow;
     };
   }
-
   clear() {
     this.renderer.getClearColor(this.clearColor);
     this.clearAlpha = this.renderer.getClearAlpha();
@@ -272,30 +271,26 @@ class ProgressiveLightMap {
       }
     });
   }
-
   prepare() {
     this.lights.forEach(light => light.object.intensity = 0);
     this.meshes.forEach(mesh => mesh.object.material = this.discardMat);
   }
-
   finish() {
     this.lights.forEach(light => light.object.intensity = light.intensity);
     this.meshes.forEach(mesh => mesh.object.material = mesh.material);
   }
-
   configure(object) {
     this.object = object;
   }
-
   update(camera, blendWindow = 100) {
-    if (!this.object) return; // Set each object's material to the UV Unwrapped Surface Mapping Version
-
+    if (!this.object) return;
+    // Set each object's material to the UV Unwrapped Surface Mapping Version
     this.averagingWindow.value = blendWindow;
-    this.object.material = this.targetMat; // Ping-pong two surface buffers for reading/writing
-
+    this.object.material = this.targetMat;
+    // Ping-pong two surface buffers for reading/writing
     const activeMap = this.buffer1Active ? this.progressiveLightMap1 : this.progressiveLightMap2;
-    const inactiveMap = this.buffer1Active ? this.progressiveLightMap2 : this.progressiveLightMap1; // Render the object's surface maps
-
+    const inactiveMap = this.buffer1Active ? this.progressiveLightMap2 : this.progressiveLightMap1;
+    // Render the object's surface maps
     const oldBg = this.scene.background;
     this.scene.background = null;
     this.renderer.setRenderTarget(activeMap);
@@ -305,7 +300,6 @@ class ProgressiveLightMap {
     this.renderer.setRenderTarget(null);
     this.scene.background = oldBg;
   }
-
 }
 
 export { AccumulativeShadows, RandomizedLight, accumulativeContext };

package/core/AdaptiveDpr.js

@@ -8,16 +8,16 @@ function AdaptiveDpr({
   const active = useThree(state => state.internal.active);
   const current = useThree(state => state.performance.current);
   const initialDpr = useThree(state => state.viewport.initialDpr);
-  const setDpr = useThree(state => state.setDpr); // Restore initial pixelratio on unmount
-
+  const setDpr = useThree(state => state.setDpr);
+  // Restore initial pixelratio on unmount
   React.useEffect(() => {
     const domElement = gl.domElement;
     return () => {
       if (active) setDpr(initialDpr);
       if (pixelated && domElement) domElement.style.imageRendering = 'auto';
     };
-  }, []); // Set adaptive pixelratio
-
+  }, []);
+  // Set adaptive pixelratio
   React.useEffect(() => {
     setDpr(current * initialDpr);
     if (pixelated && gl.domElement) gl.domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated';

package/core/ArcballControls.d.ts

@@ -2,7 +2,7 @@ import { ReactThreeFiber } from '@react-three/fiber';
 import { ArcballControls as ArcballControlsImpl } from 'three-stdlib';
 import type { Event, OrthographicCamera, PerspectiveCamera } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type ArcballControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<ArcballControlsImpl, typeof ArcballControlsImpl>, {
+export type ArcballControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<ArcballControlsImpl, typeof ArcballControlsImpl>, {
     target?: ReactThreeFiber.Vector3;
     camera?: OrthographicCamera | PerspectiveCamera;
     domElement?: HTMLElement;

package/core/ArcballControls.js

@@ -37,7 +37,6 @@ const ArcballControls = /*#__PURE__*/forwardRef(({
       if (regress) performance.regress();
       if (onChange) onChange(e);
     };
-
     controls.addEventListener('change', callback);
     if (onStart) controls.addEventListener('start', onStart);
     if (onEnd) controls.addEventListener('end', onEnd);

package/core/AsciiRenderer.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-declare type AsciiRendererProps = {
+import * as React from 'react';
+type AsciiRendererProps = {
     renderIndex?: number;
     bgColor?: string;
     fgColor?: string;
@@ -8,5 +8,5 @@ declare type AsciiRendererProps = {
     color?: boolean;
     resolution?: number;
 };
-export declare function AsciiRenderer({ renderIndex, bgColor, fgColor, characters, invert, color, resolution, }: AsciiRendererProps): JSX.Element;
+export declare function AsciiRenderer({ renderIndex, bgColor, fgColor, characters, invert, color, resolution, }: AsciiRendererProps): React.JSX.Element;
 export {};

package/core/AsciiRenderer.js

@@ -17,8 +17,9 @@ function AsciiRenderer({
     gl,
     scene,
     camera
-  } = useThree(); // Create effect
+  } = useThree();
 
+  // Create effect
   const effect = React.useMemo(() => {
     const effect = new AsciiEffect(gl, characters, {
       invert,
@@ -30,13 +31,15 @@ function AsciiRenderer({
     effect.domElement.style.left = '0px';
     effect.domElement.style.pointerEvents = 'none';
     return effect;
-  }, [characters, invert, color, resolution]); // Styling
+  }, [characters, invert, color, resolution]);
 
+  // Styling
   React.useLayoutEffect(() => {
     effect.domElement.style.color = fgColor;
     effect.domElement.style.backgroundColor = bgColor;
-  }, [fgColor, bgColor]); // Append on mount, remove on unmount
+  }, [fgColor, bgColor]);
 
+  // Append on mount, remove on unmount
   React.useEffect(() => {
     gl.domElement.style.opacity = '0';
     gl.domElement.parentNode.appendChild(effect.domElement);
@@ -44,16 +47,19 @@ function AsciiRenderer({
       gl.domElement.style.opacity = '1';
       gl.domElement.parentNode.removeChild(effect.domElement);
     };
-  }, [effect]); // Set size
+  }, [effect]);
 
+  // Set size
   React.useEffect(() => {
     effect.setSize(size.width, size.height);
-  }, [effect, size]); // Take over render-loop (that is what the index is for)
+  }, [effect, size]);
 
+  // Take over render-loop (that is what the index is for)
   useFrame(state => {
     effect.render(scene, camera);
-  }, renderIndex); // return something to not break type signatures
+  }, renderIndex);
 
+  // return something to not break type signatures
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }
 

package/core/BBAnchor.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"),n=require("@react-three/fiber");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 n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=u(e),o=c(r),i=c(t);const s=new i.Box3,f=new i.Vector3;exports.BBAnchor=({anchor:e,...r})=>{const t=o.useRef(null),u=o.useRef(null);return o.useEffect((()=>{var e,r;null!=(e=t.current)&&null!=(r=e.parent)&&r.parent&&(u.current=t.current.parent,t.current.parent.parent.add(t.current))}),[]),n.useFrame((()=>{u.current&&(s.setFromObject(u.current),s.getSize(f),t.current.position.set(u.current.position.x+f.x*(Array.isArray(e)?e[0]:e.x)/2,u.current.position.y+f.y*(Array.isArray(e)?e[1]:e.y)/2,u.current.position.z+f.z*(Array.isArray(e)?e[2]:e.z)/2))})),o.createElement("group",a.default({ref:t},r))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber");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 n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=u(e),o=c(r),i=c(t);const s=new i.Box3,f=new i.Vector3;exports.BBAnchor=({anchor:e,...r})=>{const t=o.useRef(null),u=o.useRef(null);return o.useEffect((()=>{var e;null!=(e=t.current)&&null!=(e=e.parent)&&e.parent&&(u.current=t.current.parent,t.current.parent.parent.add(t.current))}),[]),n.useFrame((()=>{u.current&&(s.setFromObject(u.current),s.getSize(f),t.current.position.set(u.current.position.x+f.x*(Array.isArray(e)?e[0]:e.x)/2,u.current.position.y+f.y*(Array.isArray(e)?e[1]:e.y)/2,u.current.position.z+f.z*(Array.isArray(e)?e[2]:e.z)/2))})),o.createElement("group",a.default({ref:t},r))};

package/core/BBAnchor.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import * as THREE from 'three';
 import { GroupProps } from '@react-three/fiber';
 export interface BBAnchorProps extends GroupProps {
     anchor: THREE.Vector3 | [number, number, number];
 }
-export declare const BBAnchor: ({ anchor, ...props }: BBAnchorProps) => JSX.Element;
+export declare const BBAnchor: ({ anchor, ...props }: BBAnchorProps) => React.JSX.Element;

package/core/BBAnchor.js

@@ -10,14 +10,14 @@ const BBAnchor = ({
   ...props
 }) => {
   const ref = React.useRef(null);
-  const parentRef = React.useRef(null); // Reattach group created by this component to the parent's parent,
+  const parentRef = React.useRef(null);
+
+  // Reattach group created by this component to the parent's parent,
   // so it becomes a sibling of its initial parent.
   // We do that so the children have no impact on a bounding box of a parent.
-
   React.useEffect(() => {
-    var _ref$current, _ref$current$parent;
-
-    if ((_ref$current = ref.current) != null && (_ref$current$parent = _ref$current.parent) != null && _ref$current$parent.parent) {
+    var _ref$current;
+    if ((_ref$current = ref.current) != null && (_ref$current = _ref$current.parent) != null && _ref$current.parent) {
       parentRef.current = ref.current.parent;
       ref.current.parent.parent.add(ref.current);
     }

package/core/Backdrop.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type BackdropProps = JSX.IntrinsicElements['group'] & {
+export type BackdropProps = JSX.IntrinsicElements['group'] & {
     floor?: number;
     segments?: number;
     receiveShadow?: boolean;
@@ -11,4 +11,4 @@ export declare function Backdrop({ children, floor, segments, receiveShadow, ...
     floor?: number | undefined;
     segments?: number | undefined;
     receiveShadow: any;
-}): JSX.Element;
+}): React.JSX.Element;

package/core/Backdrop.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 const easeInExpo = x => x === 0 ? 0 : Math.pow(2, 10 * x - 10);
-
 function Backdrop({
   children,
   floor = 0.25,
@@ -14,13 +13,11 @@ function Backdrop({
     let i = 0;
     const offset = segments / segments / 2;
     const position = ref.current.attributes.position;
-
     for (let x = 0; x < segments + 1; x++) {
       for (let y = 0; y < segments + 1; y++) {
         position.setXYZ(i++, x / segments - offset + (x === 0 ? -floor : 0), y / segments - offset, easeInExpo(x / segments));
       }
     }
-
     position.needsUpdate = true;
     ref.current.computeVertexNormals();
   }, [segments, floor]);

package/core/Billboard.d.ts

@@ -1,6 +1,6 @@
 import { Group } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type BillboardProps = {
+export type BillboardProps = {
     follow?: boolean;
     lockX?: boolean;
     lockY?: boolean;

package/core/Billboard.js

@@ -23,12 +23,15 @@ const Billboard = /*#__PURE__*/React.forwardRef(function Billboard({
   useFrame(({
     camera
   }) => {
-    if (!follow || !localRef.current) return; // save previous rotation in case we're locking an axis
+    if (!follow || !localRef.current) return;
 
-    const prevRotation = localRef.current.rotation.clone(); // always face the camera
+    // save previous rotation in case we're locking an axis
+    const prevRotation = localRef.current.rotation.clone();
 
-    camera.getWorldQuaternion(localRef.current.quaternion); // readjust any axis that is locked
+    // always face the camera
+    camera.getWorldQuaternion(localRef.current.quaternion);
 
+    // readjust any axis that is locked
     if (lockX) localRef.current.rotation.x = prevRotation.x;
     if (lockY) localRef.current.rotation.y = prevRotation.y;
     if (lockZ) localRef.current.rotation.z = prevRotation.z;

package/core/Bounds.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import * as React from 'react';
 import * as THREE from 'three';
-export declare type SizeProps = {
+export type SizeProps = {
     box: THREE.Box3;
     size: THREE.Vector3;
     center: THREE.Vector3;
     distance: number;
 };
-export declare type BoundsApi = {
+export type BoundsApi = {
     getSize: () => SizeProps;
     refresh(object?: THREE.Object3D | THREE.Box3): any;
     clip(): any;
@@ -16,7 +16,7 @@ export declare type BoundsApi = {
         target?: [number, number, number];
     }) => any;
 };
-export declare type BoundsProps = JSX.IntrinsicElements['group'] & {
+export type BoundsProps = JSX.IntrinsicElements['group'] & {
     damping?: number;
     fit?: boolean;
     clip?: boolean;
@@ -25,5 +25,5 @@ export declare type BoundsProps = JSX.IntrinsicElements['group'] & {
     eps?: number;
     onFit?: (data: SizeProps) => void;
 };
-export declare function Bounds({ children, damping, fit, clip, observe, margin, eps, onFit }: BoundsProps): JSX.Element;
+export declare function Bounds({ children, damping, fit, clip, observe, margin, eps, onFit }: BoundsProps): React.JSX.Element;
 export declare function useBounds(): BoundsApi;