@react-three/drei 9.74.11 → 9.74.12

package/src/core/BakeShadows.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useThree } from '@react-three/fiber';
+
+function BakeShadows() {
+  const gl = useThree(state => state.gl);
+  useEffect(() => {
+    gl.shadowMap.autoUpdate = false;
+    gl.shadowMap.needsUpdate = true;
+    return () => {
+      gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
+    };
+  }, [gl.shadowMap]);
+  return null;
+}
+
+export { BakeShadows };

package/src/core/Billboard.js

@@ -0,0 +1,41 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+
+/**
+ * Wraps children in a billboarded group. Sample usage:
+ *
+ * ```js
+ * <Billboard>
+ *   <Text>hi</Text>
+ * </Billboard>
+ * ```
+ */
+const Billboard = /*#__PURE__*/React.forwardRef(function Billboard({
+  follow = true,
+  lockX = false,
+  lockY = false,
+  lockZ = false,
+  ...props
+}, ref) {
+  const localRef = React.useRef();
+  useFrame(({
+    camera
+  }) => {
+    if (!follow || !localRef.current) return; // save previous rotation in case we're locking an axis
+
+    const prevRotation = localRef.current.rotation.clone(); // 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;
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: mergeRefs([localRef, ref])
+  }, props));
+});
+
+export { Billboard };

package/src/core/Bounds.js

@@ -0,0 +1,245 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+
+const isOrthographic = def => def && def.isOrthographicCamera;
+
+const isBox3 = def => def && def.isBox3;
+
+const context = /*#__PURE__*/React.createContext(null);
+function Bounds({
+  children,
+  damping = 6,
+  fit,
+  clip,
+  observe,
+  margin = 1.2,
+  eps = 0.01,
+  onFit
+}) {
+  const ref = React.useRef(null);
+  const {
+    camera,
+    invalidate,
+    size,
+    controls: controlsImpl
+  } = useThree();
+  const controls = controlsImpl;
+  const onFitRef = React.useRef(onFit);
+  onFitRef.current = onFit;
+
+  function equals(a, b) {
+    return Math.abs(a.x - b.x) < eps && Math.abs(a.y - b.y) < eps && Math.abs(a.z - b.z) < eps;
+  }
+
+  function damp(v, t, lambda, delta) {
+    v.x = THREE.MathUtils.damp(v.x, t.x, lambda, delta);
+    v.y = THREE.MathUtils.damp(v.y, t.y, lambda, delta);
+    v.z = THREE.MathUtils.damp(v.z, t.z, lambda, delta);
+  }
+
+  const [current] = React.useState(() => ({
+    animating: false,
+    focus: new THREE.Vector3(),
+    camera: new THREE.Vector3(),
+    zoom: 1
+  }));
+  const [goal] = React.useState(() => ({
+    focus: new THREE.Vector3(),
+    camera: new THREE.Vector3(),
+    zoom: 1
+  }));
+  const [box] = React.useState(() => new THREE.Box3());
+  const api = React.useMemo(() => {
+    function getSize() {
+      const size = box.getSize(new THREE.Vector3());
+      const center = box.getCenter(new THREE.Vector3());
+      const maxSize = Math.max(size.x, size.y, size.z);
+      const fitHeightDistance = isOrthographic(camera) ? maxSize * 4 : maxSize / (2 * Math.atan(Math.PI * camera.fov / 360));
+      const fitWidthDistance = isOrthographic(camera) ? maxSize * 4 : fitHeightDistance / camera.aspect;
+      const distance = margin * Math.max(fitHeightDistance, fitWidthDistance);
+      return {
+        box,
+        size,
+        center,
+        distance
+      };
+    }
+
+    return {
+      getSize,
+
+      refresh(object) {
+        if (isBox3(object)) box.copy(object);else {
+          const target = object || ref.current;
+          target.updateWorldMatrix(true, true);
+          box.setFromObject(target);
+        }
+
+        if (box.isEmpty()) {
+          const max = camera.position.length() || 10;
+          box.setFromCenterAndSize(new THREE.Vector3(), new THREE.Vector3(max, max, max));
+        }
+
+        if ((controls == null ? void 0 : controls.constructor.name) === 'OrthographicTrackballControls') {
+          // Put camera on a sphere along which it should move
+          const {
+            distance
+          } = getSize();
+          const direction = camera.position.clone().sub(controls.target).normalize().multiplyScalar(distance);
+          const newPos = controls.target.clone().add(direction);
+          camera.position.copy(newPos);
+        }
+
+        return this;
+      },
+
+      clip() {
+        const {
+          distance
+        } = getSize();
+        if (controls) controls.maxDistance = distance * 10;
+        camera.near = distance / 100;
+        camera.far = distance * 100;
+        camera.updateProjectionMatrix();
+        if (controls) controls.update();
+        invalidate();
+        return this;
+      },
+
+      to({
+        position,
+        target
+      }) {
+        current.camera.copy(camera.position);
+        const {
+          center
+        } = getSize();
+        goal.camera.set(...position);
+
+        if (target) {
+          goal.focus.set(...target);
+        } else {
+          goal.focus.copy(center);
+        }
+
+        if (damping) {
+          current.animating = true;
+        } else {
+          camera.position.set(...position);
+        }
+
+        return this;
+      },
+
+      fit() {
+        current.camera.copy(camera.position);
+        if (controls) current.focus.copy(controls.target);
+        const {
+          center,
+          distance
+        } = getSize();
+        const direction = center.clone().sub(camera.position).normalize().multiplyScalar(distance);
+        goal.camera.copy(center).sub(direction);
+        goal.focus.copy(center);
+
+        if (isOrthographic(camera)) {
+          current.zoom = camera.zoom;
+          let maxHeight = 0,
+              maxWidth = 0;
+          const vertices = [new THREE.Vector3(box.min.x, box.min.y, box.min.z), new THREE.Vector3(box.min.x, box.max.y, box.min.z), new THREE.Vector3(box.min.x, box.min.y, box.max.z), new THREE.Vector3(box.min.x, box.max.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.min.z), new THREE.Vector3(box.max.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.min.y, box.min.z)]; // Transform the center and each corner to camera space
+
+          center.applyMatrix4(camera.matrixWorldInverse);
+
+          for (const v of vertices) {
+            v.applyMatrix4(camera.matrixWorldInverse);
+            maxHeight = Math.max(maxHeight, Math.abs(v.y - center.y));
+            maxWidth = Math.max(maxWidth, Math.abs(v.x - center.x));
+          }
+
+          maxHeight *= 2;
+          maxWidth *= 2;
+          const zoomForHeight = (camera.top - camera.bottom) / maxHeight;
+          const zoomForWidth = (camera.right - camera.left) / maxWidth;
+          goal.zoom = Math.min(zoomForHeight, zoomForWidth) / margin;
+
+          if (!damping) {
+            camera.zoom = goal.zoom;
+            camera.updateProjectionMatrix();
+          }
+        }
+
+        if (damping) {
+          current.animating = true;
+        } else {
+          camera.position.copy(goal.camera);
+          camera.lookAt(goal.focus);
+
+          if (controls) {
+            controls.target.copy(goal.focus);
+            controls.update();
+          }
+        }
+
+        if (onFitRef.current) onFitRef.current(this.getSize());
+        invalidate();
+        return this;
+      }
+
+    };
+  }, [box, camera, controls, margin, damping, invalidate]);
+  React.useLayoutEffect(() => {
+    if (controls) {
+      // Try to prevent drag hijacking
+      const callback = () => current.animating = false;
+
+      controls.addEventListener('start', callback);
+      return () => controls.removeEventListener('start', callback);
+    }
+  }, [controls]); // Scale pointer on window resize
+
+  const count = React.useRef(0);
+  React.useLayoutEffect(() => {
+    if (observe || count.current++ === 0) {
+      api.refresh();
+      if (fit) api.fit();
+      if (clip) api.clip();
+    }
+  }, [size, clip, fit, observe, camera, controls]);
+  useFrame((state, delta) => {
+    if (current.animating) {
+      damp(current.focus, goal.focus, damping, delta);
+      damp(current.camera, goal.camera, damping, delta);
+      current.zoom = THREE.MathUtils.damp(current.zoom, goal.zoom, damping, delta);
+      camera.position.copy(current.camera);
+
+      if (isOrthographic(camera)) {
+        camera.zoom = current.zoom;
+        camera.updateProjectionMatrix();
+      }
+
+      if (!controls) {
+        camera.lookAt(current.focus);
+      } else {
+        controls.target.copy(current.focus);
+        controls.update();
+      }
+
+      invalidate();
+      if (isOrthographic(camera) && !(Math.abs(current.zoom - goal.zoom) < eps)) return;
+      if (!isOrthographic(camera) && !equals(current.camera, goal.camera)) return;
+      if (controls && !equals(current.focus, goal.focus)) return;
+      current.animating = false;
+    }
+  });
+  return /*#__PURE__*/React.createElement("group", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(context.Provider, {
+    value: api
+  }, children));
+}
+function useBounds() {
+  return React.useContext(context);
+}
+
+export { Bounds, useBounds };

package/src/core/CameraControls.js

@@ -0,0 +1,92 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { forwardRef, useMemo, useEffect } from 'react';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import CameraControlsImpl from 'camera-controls';
+
+const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
+  useMemo(() => {
+    CameraControlsImpl.install({
+      THREE
+    });
+    extend({
+      CameraControlsImpl
+    });
+  }, []);
+  const {
+    camera,
+    domElement,
+    makeDefault,
+    onStart,
+    onEnd,
+    onChange,
+    regress,
+    ...restProps
+  } = props;
+  const defaultCamera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const invalidate = useThree(state => state.invalidate);
+  const events = useThree(state => state.events);
+  const setEvents = useThree(state => state.setEvents);
+  const set = useThree(state => state.set);
+  const get = useThree(state => state.get);
+  const performance = useThree(state => state.performance);
+  const explCamera = camera || defaultCamera;
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = useMemo(() => new CameraControlsImpl(explCamera), [explCamera]);
+  useFrame((state, delta) => {
+    if (controls.enabled) controls.update(delta);
+  }, -1);
+  useEffect(() => {
+    controls.connect(explDomElement);
+    return () => void controls.disconnect();
+  }, [explDomElement, controls]);
+  React.useEffect(() => {
+    const callback = e => {
+      invalidate();
+      if (regress) performance.regress();
+      if (onChange) onChange(e);
+    };
+
+    const onStartCb = e => {
+      if (onStart) onStart(e);
+    };
+
+    const onEndCb = e => {
+      if (onEnd) onEnd(e);
+    };
+
+    controls.addEventListener('update', callback);
+    controls.addEventListener('controlstart', onStartCb);
+    controls.addEventListener('controlend', onEndCb);
+    controls.addEventListener('control', callback);
+    controls.addEventListener('transitionstart', callback);
+    controls.addEventListener('wake', callback);
+    return () => {
+      controls.removeEventListener('update', callback);
+      controls.removeEventListener('controlstart', onStartCb);
+      controls.removeEventListener('controlend', onEndCb);
+      controls.removeEventListener('control', callback);
+      controls.removeEventListener('transitionstart', callback);
+      controls.removeEventListener('wake', callback);
+    };
+  }, [controls, onStart, onEnd, invalidate, setEvents, regress, onChange]);
+  useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      set({
+        controls: controls
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, controls]);
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: ref,
+    object: controls
+  }, restProps));
+});
+
+export { CameraControls };

package/src/core/CameraShake.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { SimplexNoise } from 'three-stdlib';
+
+const CameraShake = /*#__PURE__*/React.forwardRef(({
+  intensity = 1,
+  decay,
+  decayRate = 0.65,
+  maxYaw = 0.1,
+  maxPitch = 0.1,
+  maxRoll = 0.1,
+  yawFrequency = 0.1,
+  pitchFrequency = 0.1,
+  rollFrequency = 0.1
+}, ref) => {
+  const camera = useThree(state => state.camera);
+  const defaultControls = useThree(state => state.controls);
+  const intensityRef = React.useRef(intensity);
+  const initialRotation = React.useRef(camera.rotation.clone());
+  const [yawNoise] = React.useState(() => new SimplexNoise());
+  const [pitchNoise] = React.useState(() => new SimplexNoise());
+  const [rollNoise] = React.useState(() => new SimplexNoise());
+
+  const constrainIntensity = () => {
+    if (intensityRef.current < 0 || intensityRef.current > 1) {
+      intensityRef.current = intensityRef.current < 0 ? 0 : 1;
+    }
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    getIntensity: () => intensityRef.current,
+    setIntensity: val => {
+      intensityRef.current = val;
+      constrainIntensity();
+    }
+  }), []);
+  React.useEffect(() => {
+    if (defaultControls) {
+      const callback = () => void (initialRotation.current = camera.rotation.clone());
+
+      defaultControls.addEventListener('change', callback);
+      callback();
+      return () => void defaultControls.removeEventListener('change', callback);
+    }
+  }, [camera, defaultControls]);
+  useFrame((state, delta) => {
+    const shake = Math.pow(intensityRef.current, 2);
+    const yaw = maxYaw * shake * yawNoise.noise(state.clock.elapsedTime * yawFrequency, 1);
+    const pitch = maxPitch * shake * pitchNoise.noise(state.clock.elapsedTime * pitchFrequency, 1);
+    const roll = maxRoll * shake * rollNoise.noise(state.clock.elapsedTime * rollFrequency, 1);
+    camera.rotation.set(initialRotation.current.x + pitch, initialRotation.current.y + yaw, initialRotation.current.z + roll);
+
+    if (decay && intensityRef.current > 0) {
+      intensityRef.current -= decayRate * delta;
+      constrainIntensity();
+    }
+  });
+  return null;
+});
+
+export { CameraShake };

package/src/core/CatmullRomLine.js

@@ -0,0 +1,44 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Vector3, CatmullRomCurve3, Color } from 'three';
+import { Line } from './Line.js';
+
+const CatmullRomLine = /*#__PURE__*/React.forwardRef(function CatmullRomLine({
+  points,
+  closed = false,
+  curveType = 'centripetal',
+  tension = 0.5,
+  segments = 20,
+  vertexColors,
+  ...rest
+}, ref) {
+  const curve = React.useMemo(() => {
+    const mappedPoints = points.map(pt => pt instanceof Vector3 ? pt : new Vector3(...pt));
+    return new CatmullRomCurve3(mappedPoints, closed, curveType, tension);
+  }, [points, closed, curveType, tension]);
+  const segmentedPoints = React.useMemo(() => curve.getPoints(segments), [curve, segments]);
+  const interpolatedVertexColors = React.useMemo(() => {
+    if (!vertexColors || vertexColors.length < 2) return undefined;
+    if (vertexColors.length === segments + 1) return vertexColors;
+    const mappedColors = vertexColors.map(color => color instanceof Color ? color : new Color(...color));
+    if (closed) mappedColors.push(mappedColors[0].clone());
+    const iColors = [mappedColors[0]];
+    const divisions = segments / (mappedColors.length - 1);
+
+    for (let i = 1; i < segments; i++) {
+      const alpha = i % divisions / divisions;
+      const colorIndex = Math.floor(i / divisions);
+      iColors.push(mappedColors[colorIndex].clone().lerp(mappedColors[colorIndex + 1], alpha));
+    }
+
+    iColors.push(mappedColors[mappedColors.length - 1]);
+    return iColors;
+  }, [vertexColors, segments]);
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    points: segmentedPoints,
+    vertexColors: interpolatedVertexColors
+  }, rest));
+});
+
+export { CatmullRomLine };