@react-three/drei 9.83.9 → 9.84.1

package/core/GizmoHelper.d.ts

@@ -1,9 +1,9 @@
 import { Vector3 } from 'three';
-declare type GizmoHelperContext = {
+type GizmoHelperContext = {
     tweenCamera: (direction: Vector3) => void;
 };
 export declare const useGizmoContext: () => GizmoHelperContext;
-export declare type GizmoHelperProps = JSX.IntrinsicElements['group'] & {
+export type GizmoHelperProps = JSX.IntrinsicElements['group'] & {
     alignment?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center' | 'top-center';
     margin?: [number, number];
     renderPriority?: number;

package/core/GizmoHelper.js

@@ -9,17 +9,14 @@ const useGizmoContext = () => {
   return React.useContext(Context);
 };
 const turnRate = 2 * Math.PI; // turn rate in angles per second
-
 const dummy = new Object3D();
 const matrix = new Matrix4();
 const [q1, q2] = [new Quaternion(), new Quaternion()];
 const target = new Vector3();
 const targetPosition = new Vector3();
-
 const isOrbitControls = controls => {
   return 'minPolarAngle' in controls;
 };
-
 const GizmoHelper = ({
   alignment = 'bottom-right',
   margin = [80, 80],
@@ -29,11 +26,11 @@ const GizmoHelper = ({
   children
 }) => {
   const size = useThree(state => state.size);
-  const mainCamera = useThree(state => state.camera); // @ts-ignore
-
+  const mainCamera = useThree(state => state.camera);
+  // @ts-ignore
   const defaultControls = useThree(state => state.controls);
   const invalidate = useThree(state => state.invalidate);
-  const gizmoRef = React.useRef();
+  const gizmoRef = React.useRef(null);
   const virtualCam = React.useRef(null);
   const animating = React.useRef(false);
   const radius = React.useRef(0);
@@ -45,10 +42,12 @@ const GizmoHelper = ({
   const tweenCamera = React.useCallback(direction => {
     animating.current = true;
     if (defaultControls || onTarget) focusPoint.current = (defaultControls == null ? void 0 : defaultControls.target) || (onTarget == null ? void 0 : onTarget());
-    radius.current = mainCamera.position.distanceTo(target); // Rotate from current camera orientation
+    radius.current = mainCamera.position.distanceTo(target);
 
-    q1.copy(mainCamera.quaternion); // To new current camera orientation
+    // Rotate from current camera orientation
+    q1.copy(mainCamera.quaternion);
 
+    // To new current camera orientation
     targetPosition.copy(direction).multiplyScalar(radius.current).add(target);
     dummy.lookAt(targetPosition);
     dummy.up.copy(mainCamera.up);
@@ -58,39 +57,39 @@ const GizmoHelper = ({
   useFrame((_, delta) => {
     if (virtualCam.current && gizmoRef.current) {
       var _gizmoRef$current;
-
       // Animate step
       if (animating.current) {
         if (q1.angleTo(q2) < 0.01) {
-          animating.current = false; // Orbit controls uses UP vector as the orbit axes,
+          animating.current = false;
+          // Orbit controls uses UP vector as the orbit axes,
           // so we need to reset it after the animation is done
           // moving it around for the controls to work correctly
-
           if (isOrbitControls(defaultControls)) {
             mainCamera.up.copy(defaultUp.current);
           }
         } else {
-          const step = delta * turnRate; // animate position by doing a slerp and then scaling the position on the unit sphere
-
-          q1.rotateTowards(q2, step); // animate orientation
-
+          const step = delta * turnRate;
+          // animate position by doing a slerp and then scaling the position on the unit sphere
+          q1.rotateTowards(q2, step);
+          // animate orientation
           mainCamera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius.current).add(focusPoint.current);
           mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize();
           mainCamera.quaternion.copy(q1);
           if (onUpdate) onUpdate();else if (defaultControls) defaultControls.update();
           invalidate();
         }
-      } // Sync Gizmo with main camera orientation
-
+      }
 
+      // Sync Gizmo with main camera orientation
       matrix.copy(mainCamera.matrix).invert();
-      (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix);
+      (_gizmoRef$current = gizmoRef.current) == null || _gizmoRef$current.quaternion.setFromRotationMatrix(matrix);
     }
   });
   const gizmoHelperContext = React.useMemo(() => ({
     tweenCamera
-  }), [tweenCamera]); // Position gizmo component within scene
+  }), [tweenCamera]);
 
+  // Position gizmo component within scene
   const [marginX, marginY] = margin;
   const x = alignment.endsWith('-center') ? 0 : alignment.endsWith('-left') ? -size.width / 2 + marginX : size.width / 2 - marginX;
   const y = alignment.startsWith('center-') ? 0 : alignment.startsWith('top-') ? size.height / 2 - marginY : -size.height / 2 + marginY;

package/core/GizmoViewcube.d.ts

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

package/core/GizmoViewcube.js

@@ -11,14 +11,11 @@ const colors = {
   stroke: 'black'
 };
 const defaultFaces = ['Right', 'Left', 'Top', 'Bottom', 'Front', 'Back'];
-
 const makePositionVector = xyz => new Vector3(...xyz).multiplyScalar(0.38);
-
 const corners = [[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(makePositionVector);
 const cornerDimensions = [0.25, 0.25, 0.25];
 const edges = [[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(makePositionVector);
 const edgeDimensions = edges.map(edge => edge.toArray().map(axis => axis == 0 ? 0.5 : 0.25));
-
 const FaceMaterial = ({
   hover,
   index,
@@ -55,28 +52,23 @@ const FaceMaterial = ({
     opacity: opacity
   });
 };
-
 const FaceCube = props => {
   const {
     tweenCamera
   } = useGizmoContext();
   const [hover, setHover] = React.useState(null);
-
   const handlePointerOut = e => {
     e.stopPropagation();
     setHover(null);
   };
-
   const handleClick = e => {
     e.stopPropagation();
     tweenCamera(e.face.normal);
   };
-
   const handlePointerMove = e => {
     e.stopPropagation();
     setHover(Math.floor(e.faceIndex / 2));
   };
-
   return /*#__PURE__*/React.createElement("mesh", {
     onPointerOut: handlePointerOut,
     onPointerMove: handlePointerMove,
@@ -87,7 +79,6 @@ const FaceCube = props => {
     hover: hover === index
   }, props))), /*#__PURE__*/React.createElement("boxGeometry", null));
 };
-
 const EdgeCube = ({
   onClick,
   dimensions,
@@ -98,22 +89,18 @@ const EdgeCube = ({
     tweenCamera
   } = useGizmoContext();
   const [hover, setHover] = React.useState(false);
-
   const handlePointerOut = e => {
     e.stopPropagation();
     setHover(false);
   };
-
   const handlePointerOver = e => {
     e.stopPropagation();
     setHover(true);
   };
-
   const handleClick = e => {
     e.stopPropagation();
     tweenCamera(position);
   };
-
   return /*#__PURE__*/React.createElement("mesh", {
     scale: 1.01,
     position: position,
@@ -129,7 +116,6 @@ const EdgeCube = ({
     args: dimensions
   }));
 };
-
 const GizmoViewcube = props => {
   return /*#__PURE__*/React.createElement("group", {
     scale: [60, 60, 60]

package/core/GizmoViewport.d.ts

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

package/core/GizmoViewport.js

@@ -20,7 +20,6 @@ function Axis({
     toneMapped: false
   })));
 }
-
 function AxisHead({
   onClick,
   font,
@@ -42,29 +41,24 @@ function AxisHead({
     context.closePath();
     context.fillStyle = arcStyle;
     context.fill();
-
     if (label) {
       context.font = font;
       context.textAlign = 'center';
       context.fillStyle = labelColor;
       context.fillText(label, 32, 41);
     }
-
     return new CanvasTexture(canvas);
   }, [arcStyle, label, labelColor, font]);
   const [active, setActive] = React.useState(false);
   const scale = (label ? 1 : 0.75) * (active ? 1.2 : 1) * axisHeadScale;
-
   const handlePointerOver = e => {
     e.stopPropagation();
     setActive(true);
   };
-
   const handlePointerOut = e => {
     e.stopPropagation();
     setActive(false);
   };
-
   return /*#__PURE__*/React.createElement("sprite", _extends({
     scale: scale,
     onPointerOver: !disabled ? handlePointerOver : undefined,
@@ -77,7 +71,6 @@ function AxisHead({
     toneMapped: false
   }));
 }
-
 const GizmoViewport = ({
   hideNegativeAxes,
   hideAxisHeads,

package/core/Gltf.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { CloneProps } from './Clone';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type GltfProps = Omit<JSX.IntrinsicElements['group'], 'children'> & Omit<CloneProps, 'object'> & {
+type GltfProps = Omit<JSX.IntrinsicElements['group'], 'children'> & Omit<CloneProps, 'object'> & {
     src: string;
 };
 export declare const Gltf: ForwardRefComponent<GltfProps, THREE.Object3D>;

package/core/GradientTexture.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare enum GradientType {
     Linear = "linear",
     Radial = "radial"
 }
-declare type Props = {
+type Props = {
     stops: Array<number>;
     colors: Array<string>;
     attach?: string;
@@ -13,5 +13,5 @@ declare type Props = {
     innerCircleRadius?: number;
     outerCircleRadius?: string | number;
 } & JSX.IntrinsicElements['texture'];
-export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: Props): JSX.Element;
+export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: Props): React.JSX.Element;
 export {};

package/core/GradientTexture.js

@@ -25,7 +25,6 @@ function GradientTexture({
     canvas.width = width;
     canvas.height = size;
     let gradient;
-
     if (type === GradientType.Linear) {
       gradient = context.createLinearGradient(0, 0, 0, size);
     } else {
@@ -34,20 +33,18 @@ function GradientTexture({
       const radius = outerCircleRadius !== 'auto' ? Math.abs(Number(outerCircleRadius)) : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
       gradient = context.createRadialGradient(canvasCenterX, canvasCenterY, Math.abs(innerCircleRadius), canvasCenterX, canvasCenterY, radius);
     }
-
     let i = stops.length;
-
     while (i--) {
       gradient.addColorStop(stops[i], colors[i]);
     }
-
     context.save();
     context.fillStyle = gradient;
     context.fillRect(0, 0, width, size);
     context.restore();
     return canvas;
-  }, [stops]); // @ts-ignore ????
+  }, [stops]);
 
+  // @ts-ignore ????
   return /*#__PURE__*/React.createElement("canvasTexture", _extends({
     colorSpace: gl.outputColorSpace,
     args: [canvas],

package/core/Grid.d.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type GridMaterialType = {
+export type GridMaterialType = {
     cellSize?: number;
     cellThickness?: number;
     cellColor?: THREE.ColorRepresentation;
@@ -13,7 +13,7 @@ export declare type GridMaterialType = {
     fadeStrength?: number;
     side?: THREE.Side;
 };
-export declare type GridProps = GridMaterialType & {
+export type GridProps = GridMaterialType & {
     args?: ConstructorParameters<typeof THREE.PlaneGeometry>;
 };
 declare global {

package/core/Grid.js

@@ -18,9 +18,7 @@ const GridMaterial = shaderMaterial({
   followCamera: false,
   worldCamProjPosition: new THREE.Vector3(),
   worldPlanePosition: new THREE.Vector3()
-},
-/* glsl */
-`
+}, /* glsl */`
     varying vec3 localPosition;
     varying vec4 worldPosition;
 
@@ -42,9 +40,7 @@ const GridMaterial = shaderMaterial({
 
       gl_Position = projectionMatrix * viewMatrix * worldPosition;
     }
-  `,
-/* glsl */
-`
+  `, /* glsl */`
     varying vec3 localPosition;
     varying vec4 worldPosition;
 

package/core/Hud.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-declare type HudProps = {
+type HudProps = {
     children: React.ReactNode;
     renderPriority?: number;
 };
-export declare function Hud({ children, renderPriority }: HudProps): JSX.Element;
+export declare function Hud({ children, renderPriority }: HudProps): React.JSX.Element;
 export {};

package/core/Hud.js

@@ -15,26 +15,23 @@ function RenderHud({
   let oldCLear;
   useFrame(() => {
     oldCLear = gl.autoClear;
-
     if (renderPriority === 1) {
       // Clear scene and render the default scene
       gl.autoClear = true;
       gl.render(defaultScene, defaultCamera);
-    } // Disable cleaning and render the portal with its own camera
-
-
+    }
+    // Disable cleaning and render the portal with its own camera
     gl.autoClear = false;
     gl.clearDepth();
-    gl.render(scene, camera); // Restore default
-
+    gl.render(scene, camera);
+    // Restore default
     gl.autoClear = oldCLear;
-  }, renderPriority); // Without an element that receives pointer events state.pointer will always be 0/0
-
+  }, renderPriority);
+  // Without an element that receives pointer events state.pointer will always be 0/0
   return /*#__PURE__*/React.createElement("group", {
     onPointerOver: () => null
   });
 }
-
 function Hud({
   children,
   renderPriority = 1

package/core/Image.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { Color } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
+export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
     segments?: number;
     scale?: number | [number, number];
     color?: Color;
@@ -17,7 +17,7 @@ export declare type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> &
     texture?: never;
     url: string;
 });
-declare type ImageMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
+type ImageMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
     scale?: number[];
     imageBounds?: number[];
     color?: Color;

package/core/Image.js

@@ -5,6 +5,8 @@ import { extend } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
 import { useTexture } from './useTexture.js';
 
+// {texture: THREE.Texture} XOR {url: string}
+
 const ImageMaterialImpl = shaderMaterial({
   color: new THREE.Color('white'),
   scale: [1, 1],
@@ -13,17 +15,13 @@ const ImageMaterialImpl = shaderMaterial({
   zoom: 1,
   grayscale: 0,
   opacity: 1
-},
-/* glsl */
-`
+}, /* glsl */`
   varying vec2 vUv;
   void main() {
     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
     vUv = uv;
   }
-`,
-/* glsl */
-`
+`, /* glsl */`
   // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44
   varying vec2 vUv;
   uniform vec2 scale;

package/core/Instances.d.ts

@@ -9,19 +9,19 @@ declare global {
         }
     }
 }
-declare type Api = {
+type Api = {
     getParent: () => React.MutableRefObject<InstancedMesh>;
     subscribe: <T>(ref: React.MutableRefObject<T>) => void;
 };
-export declare type InstancesProps = JSX.IntrinsicElements['instancedMesh'] & {
+export type InstancesProps = JSX.IntrinsicElements['instancedMesh'] & {
     range?: number;
     limit?: number;
     frames?: number;
 };
-export declare type InstanceProps = JSX.IntrinsicElements['positionMesh'] & {
+export type InstanceProps = JSX.IntrinsicElements['positionMesh'] & {
     context?: React.Context<Api>;
 };
-declare type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor'> & {
+type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor'> & {
     instanceMatrix: THREE.InstancedBufferAttribute;
     instanceColor: THREE.InstancedBufferAttribute;
 };
@@ -33,7 +33,7 @@ declare class PositionMesh extends THREE.Group {
     get geometry(): THREE.BufferGeometry | undefined;
     raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
 }
-export declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<PositionMesh>, ReactThreeFiber.NodeProps<PositionMesh, typeof PositionMesh>>>, ReactThreeFiber.NonFunctionKeys<{
+export declare const Instance: React.ForwardRefExoticComponent<Omit<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<PositionMesh>, ReactThreeFiber.NodeProps<PositionMesh, typeof PositionMesh>>>, ReactThreeFiber.NonFunctionKeys<{
     position?: ReactThreeFiber.Vector3 | undefined;
     up?: ReactThreeFiber.Vector3 | undefined;
     scale?: ReactThreeFiber.Vector3 | undefined;
@@ -53,7 +53,7 @@ export declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<ReactTh
     dispose?: (() => void) | null | undefined;
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     context?: React.Context<Api> | undefined;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldAutoUpdate" | "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" | "getObjectsByProperty" | "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>>;
+}, "ref"> & React.RefAttributes<unknown>>;
 export declare const Instances: ForwardRefComponent<InstancesProps, InstancedMesh>;
 export interface MergedProps extends InstancesProps {
     meshes: THREE.Mesh[];

package/core/Instances.js

@@ -6,13 +6,9 @@ import mergeRefs from 'react-merge-refs';
 import Composer from 'react-composer';
 
 const _instanceLocalMatrix = /*@__PURE__*/new THREE.Matrix4();
-
 const _instanceWorldMatrix = /*@__PURE__*/new THREE.Matrix4();
-
 const _instanceIntersects = [];
-
 const _mesh = /*@__PURE__*/new THREE.Mesh();
-
 class PositionMesh extends THREE.Group {
   constructor() {
     super();
@@ -23,50 +19,42 @@ class PositionMesh extends THREE.Group {
     this.instanceKey = {
       current: undefined
     };
-  } // This will allow the virtual instance have bounds
-
+  }
 
+  // This will allow the virtual instance have bounds
   get geometry() {
     var _this$instance$curren;
-
     return (_this$instance$curren = this.instance.current) == null ? void 0 : _this$instance$curren.geometry;
-  } // And this will allow the virtual instance to receive events
-
+  }
 
+  // And this will allow the virtual instance to receive events
   raycast(raycaster, intersects) {
     const parent = this.instance.current;
     if (!parent) return;
     if (!parent.geometry || !parent.material) return;
     _mesh.geometry = parent.geometry;
     const matrixWorld = parent.matrixWorld;
-    const instanceId = parent.userData.instances.indexOf(this.instanceKey); // If the instance wasn't found or exceeds the parents draw range, bail out
-
-    if (instanceId === -1 || instanceId > parent.count) return; // calculate the world matrix for each instance
-
+    const instanceId = parent.userData.instances.indexOf(this.instanceKey);
+    // If the instance wasn't found or exceeds the parents draw range, bail out
+    if (instanceId === -1 || instanceId > parent.count) return;
+    // calculate the world matrix for each instance
     parent.getMatrixAt(instanceId, _instanceLocalMatrix);
-
-    _instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix); // the mesh represents this single instance
-
-
-    _mesh.matrixWorld = _instanceWorldMatrix; // raycast side according to instance material
-
+    _instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix);
+    // the mesh represents this single instance
+    _mesh.matrixWorld = _instanceWorldMatrix;
+    // raycast side according to instance material
     if (parent.material instanceof THREE.Material) _mesh.material.side = parent.material.side;else _mesh.material.side = parent.material[0].side;
-
-    _mesh.raycast(raycaster, _instanceIntersects); // process the result of raycast
-
-
+    _mesh.raycast(raycaster, _instanceIntersects);
+    // process the result of raycast
     for (let i = 0, l = _instanceIntersects.length; i < l; i++) {
       const intersect = _instanceIntersects[i];
       intersect.instanceId = instanceId;
       intersect.object = this;
       intersects.push(intersect);
     }
-
     _instanceIntersects.length = 0;
   }
-
 }
-
 const globalContext = /*@__PURE__*/React.createContext(null);
 const parentMatrix = /*@__PURE__*/new THREE.Matrix4();
 const instanceMatrix = /*@__PURE__*/new THREE.Matrix4();
@@ -119,9 +107,7 @@ const Instances = /*#__PURE__*/React.forwardRef(({
   const [instances, setInstances] = React.useState([]);
   const [[matrices, colors]] = React.useState(() => {
     const mArray = new Float32Array(limit * 16);
-
     for (let i = 0; i < limit; i++) tempMatrix.identity().toArray(mArray, i * 16);
-
     return [mArray, new Float32Array([...new Array(limit * 3)].map(() => 1))];
   });
   React.useEffect(() => {
@@ -139,11 +125,10 @@ const Instances = /*#__PURE__*/React.forwardRef(({
       parentRef.current.count = updateRange;
       parentRef.current.instanceMatrix.updateRange.count = updateRange * 16;
       parentRef.current.instanceColor.updateRange.count = updateRange * 3;
-
       for (let i = 0; i < instances.length; i++) {
-        const instance = instances[i].current; // Multiply the inverse of the InstancedMesh world matrix or else
+        const instance = instances[i].current;
+        // Multiply the inverse of the InstancedMesh world matrix or else
         // Instances will be double-transformed if <Instances> isn't at identity
-
         instance.matrixWorld.decompose(translation, rotation, scale);
         instanceMatrix.compose(translation, rotation, scale).premultiply(parentMatrix);
         instanceMatrix.toArray(matrices, i * 16);
@@ -151,7 +136,6 @@ const Instances = /*#__PURE__*/React.forwardRef(({
         instance.color.toArray(colors, i * 3);
         parentRef.current.instanceColor.needsUpdate = true;
       }
-
       count++;
     }
   });
@@ -193,8 +177,8 @@ const Merged = /*#__PURE__*/React.forwardRef(function Merged({
   children,
   ...props
 }, ref) {
-  const isArray = Array.isArray(meshes); // Filter out meshes from collections, which may contain non-meshes
-
+  const isArray = Array.isArray(meshes);
+  // Filter out meshes from collections, which may contain non-meshes
   if (!isArray) for (const key of Object.keys(meshes)) if (!meshes[key].isMesh) delete meshes[key];
   return /*#__PURE__*/React.createElement("group", {
     ref: ref
@@ -207,7 +191,8 @@ const Merged = /*#__PURE__*/React.forwardRef(function Merged({
       geometry: geometry,
       material: material
     }, props)))
-  }, args => isArray ? children(...args) : children(Object.keys(meshes).filter(key => meshes[key].isMesh).reduce((acc, key, i) => ({ ...acc,
+  }, args => isArray ? children(...args) : children(Object.keys(meshes).filter(key => meshes[key].isMesh).reduce((acc, key, i) => ({
+    ...acc,
     [key]: args[i]
   }), {}))));
 });

package/core/Lightformer.d.ts

@@ -1,7 +1,7 @@
 import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type LightProps = JSX.IntrinsicElements['mesh'] & {
+export type LightProps = JSX.IntrinsicElements['mesh'] & {
     args?: any[];
     map?: THREE.Texture;
     toneMapped?: boolean;