@react-three/drei 9.74.13 → 9.74.15

package/src/core/FirstPersonControls.js

@@ -1,38 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,152 +0,0 @@
-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

@@ -1,152 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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 };