@react-three/drei 9.74.11 → 9.74.13

package/src/core/FirstPersonControls.js

@@ -0,0 +1,38 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { FirstPersonControls as FirstPersonControls$1 } from 'three-stdlib';
+
+const FirstPersonControls = /*#__PURE__*/React.forwardRef(({
+  domElement,
+  makeDefault,
+  ...props
+}, ref) => {
+  const camera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const get = useThree(state => state.get);
+  const set = useThree(state => state.set);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const [controls] = React.useState(() => new FirstPersonControls$1(camera, explDomElement));
+  React.useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      set({
+        controls
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, controls]);
+  useFrame((_, delta) => {
+    controls.update(delta);
+  }, -1);
+  return controls ? /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: ref,
+    object: controls
+  }, props)) : null;
+});
+
+export { FirstPersonControls };

package/src/core/Float.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import * as THREE from 'three';
+
+const Float = /*#__PURE__*/React.forwardRef(({
+  children,
+  enabled = true,
+  speed = 1,
+  rotationIntensity = 1,
+  floatIntensity = 1,
+  floatingRange = [-0.1, 0.1],
+  ...props
+}, forwardRef) => {
+  const ref = React.useRef(null);
+  const offset = React.useRef(Math.random() * 10000);
+  useFrame(state => {
+    var _floatingRange$, _floatingRange$2;
+
+    if (!enabled || speed === 0) return;
+    const t = offset.current + state.clock.getElapsedTime();
+    ref.current.rotation.x = Math.cos(t / 4 * speed) / 8 * rotationIntensity;
+    ref.current.rotation.y = Math.sin(t / 4 * speed) / 8 * rotationIntensity;
+    ref.current.rotation.z = Math.sin(t / 4 * speed) / 20 * rotationIntensity;
+    let yPosition = Math.sin(t / 4 * speed) / 10;
+    yPosition = THREE.MathUtils.mapLinear(yPosition, -0.1, 0.1, (_floatingRange$ = floatingRange == null ? void 0 : floatingRange[0]) !== null && _floatingRange$ !== void 0 ? _floatingRange$ : -0.1, (_floatingRange$2 = floatingRange == null ? void 0 : floatingRange[1]) !== null && _floatingRange$2 !== void 0 ? _floatingRange$2 : 0.1);
+    ref.current.position.y = yPosition * floatIntensity;
+    ref.current.updateMatrix();
+  });
+  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
+    ref: mergeRefs([ref, forwardRef]),
+    matrixAutoUpdate: false
+  }, children));
+});
+
+export { Float };

package/src/core/FlyControls.js

@@ -0,0 +1,55 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as React from 'react';
+import { FlyControls as FlyControls$1 } from 'three-stdlib';
+
+const FlyControls = /*#__PURE__*/React.forwardRef(({
+  domElement,
+  ...props
+}, fref) => {
+  const {
+    onChange,
+    makeDefault,
+    ...rest
+  } = props;
+  const invalidate = useThree(state => state.invalidate);
+  const camera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const get = useThree(state => state.get);
+  const set = useThree(state => state.set);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new FlyControls$1(camera), [camera]);
+  React.useEffect(() => {
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, controls, invalidate]);
+  React.useEffect(() => {
+    const callback = e => {
+      invalidate();
+      if (onChange) onChange(e);
+    };
+
+    controls.addEventListener == null ? void 0 : controls.addEventListener('change', callback);
+    return () => controls.removeEventListener == null ? void 0 : controls.removeEventListener('change', callback);
+  }, [onChange, invalidate]);
+  React.useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      set({
+        controls
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, controls]);
+  useFrame((_, delta) => controls.update(delta));
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: fref,
+    object: controls,
+    args: [camera, explDomElement]
+  }, rest));
+});
+
+export { FlyControls };

package/src/core/GizmoHelper.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { Object3D, Matrix4, Quaternion, Vector3 } from 'three';
+import { OrthographicCamera } from './OrthographicCamera.js';
+import { Hud } from './Hud.js';
+
+const Context = /*#__PURE__*/React.createContext({});
+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],
+  renderPriority = 1,
+  onUpdate,
+  onTarget,
+  children
+}) => {
+  const size = useThree(state => state.size);
+  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 virtualCam = React.useRef(null);
+  const animating = React.useRef(false);
+  const radius = React.useRef(0);
+  const focusPoint = React.useRef(new Vector3(0, 0, 0));
+  const defaultUp = React.useRef(new Vector3(0, 0, 0));
+  React.useEffect(() => {
+    defaultUp.current.copy(mainCamera.up);
+  }, [mainCamera]);
+  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
+
+    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);
+    q2.copy(dummy.quaternion);
+    invalidate();
+  }, [defaultControls, mainCamera, onTarget, invalidate]);
+  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,
+          // 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
+
+          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
+
+
+      matrix.copy(mainCamera.matrix).invert();
+      (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix);
+    }
+  });
+  const gizmoHelperContext = React.useMemo(() => ({
+    tweenCamera
+  }), [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;
+  return /*#__PURE__*/React.createElement(Hud, {
+    renderPriority: renderPriority
+  }, /*#__PURE__*/React.createElement(Context.Provider, {
+    value: gizmoHelperContext
+  }, /*#__PURE__*/React.createElement(OrthographicCamera, {
+    makeDefault: true,
+    ref: virtualCam,
+    position: [0, 0, 200]
+  }), /*#__PURE__*/React.createElement("group", {
+    ref: gizmoRef,
+    position: [x, y, 0]
+  }, children)));
+};
+
+export { GizmoHelper, useGizmoContext };

package/src/core/GizmoViewcube.js

@@ -0,0 +1,152 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree } from '@react-three/fiber';
+import { useGizmoContext } from './GizmoHelper.js';
+import { Vector3, CanvasTexture } from 'three';
+
+const colors = {
+  bg: '#f0f0f0',
+  hover: '#999',
+  text: 'black',
+  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,
+  font = '20px Inter var, Arial, sans-serif',
+  faces = defaultFaces,
+  color = colors.bg,
+  hoverColor = colors.hover,
+  textColor = colors.text,
+  strokeColor = colors.stroke,
+  opacity = 1
+}) => {
+  const gl = useThree(state => state.gl);
+  const texture = React.useMemo(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 128;
+    canvas.height = 128;
+    const context = canvas.getContext('2d');
+    context.fillStyle = color;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.strokeStyle = strokeColor;
+    context.strokeRect(0, 0, canvas.width, canvas.height);
+    context.font = font;
+    context.textAlign = 'center';
+    context.fillStyle = textColor;
+    context.fillText(faces[index].toUpperCase(), 64, 76);
+    return new CanvasTexture(canvas);
+  }, [index, faces, font, color, textColor, strokeColor]);
+  return /*#__PURE__*/React.createElement("meshLambertMaterial", {
+    map: texture,
+    "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
+    attach: `material-${index}`,
+    color: hover ? hoverColor : 'white',
+    transparent: true,
+    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,
+    onClick: props.onClick || handleClick
+  }, [...Array(6)].map((_, index) => /*#__PURE__*/React.createElement(FaceMaterial, _extends({
+    key: index,
+    index: index,
+    hover: hover === index
+  }, props))), /*#__PURE__*/React.createElement("boxGeometry", null));
+};
+
+const EdgeCube = ({
+  onClick,
+  dimensions,
+  position,
+  hoverColor = colors.hover
+}) => {
+  const {
+    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,
+    onPointerOver: handlePointerOver,
+    onPointerOut: handlePointerOut,
+    onClick: onClick || handleClick
+  }, /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    color: hover ? hoverColor : 'white',
+    transparent: true,
+    opacity: 0.6,
+    visible: hover
+  }), /*#__PURE__*/React.createElement("boxGeometry", {
+    args: dimensions
+  }));
+};
+
+const GizmoViewcube = props => {
+  return /*#__PURE__*/React.createElement("group", {
+    scale: [60, 60, 60]
+  }, /*#__PURE__*/React.createElement(FaceCube, props), edges.map((edge, index) => /*#__PURE__*/React.createElement(EdgeCube, _extends({
+    key: index,
+    position: edge,
+    dimensions: edgeDimensions[index]
+  }, props))), corners.map((corner, index) => /*#__PURE__*/React.createElement(EdgeCube, _extends({
+    key: index,
+    position: corner,
+    dimensions: cornerDimensions
+  }, props))), /*#__PURE__*/React.createElement("ambientLight", {
+    intensity: 0.5
+  }), /*#__PURE__*/React.createElement("pointLight", {
+    position: [10, 10, 10],
+    intensity: 0.5
+  }));
+};
+
+export { GizmoViewcube };

package/src/core/GizmoViewport.js

@@ -0,0 +1,152 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree } from '@react-three/fiber';
+import { CanvasTexture } from 'three';
+import { useGizmoContext } from './GizmoHelper.js';
+
+function Axis({
+  scale = [0.8, 0.05, 0.05],
+  color,
+  rotation
+}) {
+  return /*#__PURE__*/React.createElement("group", {
+    rotation: rotation
+  }, /*#__PURE__*/React.createElement("mesh", {
+    position: [0.4, 0, 0]
+  }, /*#__PURE__*/React.createElement("boxGeometry", {
+    args: scale
+  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    color: color,
+    toneMapped: false
+  })));
+}
+
+function AxisHead({
+  onClick,
+  font,
+  disabled,
+  arcStyle,
+  label,
+  labelColor,
+  axisHeadScale = 1,
+  ...props
+}) {
+  const gl = useThree(state => state.gl);
+  const texture = React.useMemo(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 64;
+    canvas.height = 64;
+    const context = canvas.getContext('2d');
+    context.beginPath();
+    context.arc(32, 32, 16, 0, 2 * Math.PI);
+    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,
+    onPointerOut: !disabled ? onClick || handlePointerOut : undefined
+  }, props), /*#__PURE__*/React.createElement("spriteMaterial", {
+    map: texture,
+    "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
+    alphaTest: 0.3,
+    opacity: label ? 1 : 0.75,
+    toneMapped: false
+  }));
+}
+
+const GizmoViewport = ({
+  hideNegativeAxes,
+  hideAxisHeads,
+  disabled,
+  font = '18px Inter var, Arial, sans-serif',
+  axisColors = ['#ff2060', '#20df80', '#2080ff'],
+  axisHeadScale = 1,
+  axisScale,
+  labels = ['X', 'Y', 'Z'],
+  labelColor = '#000',
+  onClick,
+  ...props
+}) => {
+  const [colorX, colorY, colorZ] = axisColors;
+  const {
+    tweenCamera
+  } = useGizmoContext();
+  const axisHeadProps = {
+    font,
+    disabled,
+    labelColor,
+    onClick,
+    axisHeadScale,
+    onPointerDown: !disabled ? e => {
+      tweenCamera(e.object.position);
+      e.stopPropagation();
+    } : undefined
+  };
+  return /*#__PURE__*/React.createElement("group", _extends({
+    scale: 40
+  }, props), /*#__PURE__*/React.createElement(Axis, {
+    color: colorX,
+    rotation: [0, 0, 0],
+    scale: axisScale
+  }), /*#__PURE__*/React.createElement(Axis, {
+    color: colorY,
+    rotation: [0, 0, Math.PI / 2],
+    scale: axisScale
+  }), /*#__PURE__*/React.createElement(Axis, {
+    color: colorZ,
+    rotation: [0, -Math.PI / 2, 0],
+    scale: axisScale
+  }), !hideAxisHeads && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorX,
+    position: [1, 0, 0],
+    label: labels[0]
+  }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorY,
+    position: [0, 1, 0],
+    label: labels[1]
+  }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorZ,
+    position: [0, 0, 1],
+    label: labels[2]
+  }, axisHeadProps)), !hideNegativeAxes && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorX,
+    position: [-1, 0, 0]
+  }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorY,
+    position: [0, -1, 0]
+  }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorZ,
+    position: [0, 0, -1]
+  }, axisHeadProps)))), /*#__PURE__*/React.createElement("ambientLight", {
+    intensity: 0.5
+  }), /*#__PURE__*/React.createElement("pointLight", {
+    position: [10, 10, 10],
+    intensity: 0.5
+  }));
+};
+
+export { GizmoViewport };

package/src/core/Gltf.js

@@ -0,0 +1,20 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useGLTF } from './useGLTF.js';
+import { Clone } from './Clone.js';
+
+const Gltf = /*#__PURE__*/React.forwardRef(({
+  src,
+  ...props
+}, ref) => {
+  const {
+    scene
+  } = useGLTF(src);
+  return /*#__PURE__*/React.createElement(Clone, _extends({
+    ref: ref
+  }, props, {
+    object: scene
+  }));
+});
+
+export { Gltf };

package/src/core/GradientTexture.js

@@ -0,0 +1,33 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+
+function GradientTexture({
+  stops,
+  colors,
+  size = 1024,
+  ...props
+}) {
+  const canvas = React.useMemo(() => {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    canvas.width = 16;
+    canvas.height = size;
+    const gradient = context.createLinearGradient(0, 0, 0, size);
+    let i = stops.length;
+
+    while (i--) {
+      gradient.addColorStop(stops[i], colors[i]);
+    }
+
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, 16, size);
+    return canvas;
+  }, [stops]); // @ts-ignore ????
+
+  return /*#__PURE__*/React.createElement("canvasTexture", _extends({
+    args: [canvas],
+    attach: "map"
+  }, props));
+}
+
+export { GradientTexture };