@react-three/drei 9.74.13 → 9.74.15

package/src/core/Stars.js

@@ -1,108 +0,0 @@
-import * as React from 'react';
-import { useFrame } from '@react-three/fiber';
-import { Color, AdditiveBlending, ShaderMaterial, Vector3, Spherical } from 'three';
-
-class StarfieldMaterial extends ShaderMaterial {
-  constructor() {
-    super({
-      uniforms: {
-        time: {
-          value: 0.0
-        },
-        fade: {
-          value: 1.0
-        }
-      },
-      vertexShader:
-      /* glsl */
-      `
-      uniform float time;
-      attribute float size;
-      varying vec3 vColor;
-      void main() {
-        vColor = color;
-        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);
-        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));
-        gl_Position = projectionMatrix * mvPosition;
-      }`,
-      fragmentShader:
-      /* glsl */
-      `
-      uniform sampler2D pointTexture;
-      uniform float fade;
-      varying vec3 vColor;
-      void main() {
-        float opacity = 1.0;
-        if (fade == 1.0) {
-          float d = distance(gl_PointCoord, vec2(0.5, 0.5));
-          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
-        }
-        gl_FragColor = vec4(vColor, opacity);
-
-        #include <tonemapping_fragment>
-	      #include <encodings_fragment>
-      }`
-    });
-  }
-
-}
-
-const genStar = r => {
-  return new Vector3().setFromSpherical(new Spherical(r, Math.acos(1 - Math.random() * 2), Math.random() * 2 * Math.PI));
-};
-
-const Stars = /*#__PURE__*/React.forwardRef(({
-  radius = 100,
-  depth = 50,
-  count = 5000,
-  saturation = 0,
-  factor = 4,
-  fade = false,
-  speed = 1
-}, ref) => {
-  const material = React.useRef();
-  const [position, color, size] = React.useMemo(() => {
-    const positions = [];
-    const colors = [];
-    const sizes = Array.from({
-      length: count
-    }, () => (0.5 + 0.5 * Math.random()) * factor);
-    const color = new Color();
-    let r = radius + depth;
-    const increment = depth / count;
-
-    for (let i = 0; i < count; i++) {
-      r -= increment * Math.random();
-      positions.push(...genStar(r).toArray());
-      color.setHSL(i / count, saturation, 0.9);
-      colors.push(color.r, color.g, color.b);
-    }
-
-    return [new Float32Array(positions), new Float32Array(colors), new Float32Array(sizes)];
-  }, [count, depth, factor, radius, saturation]);
-  useFrame(state => material.current && (material.current.uniforms.time.value = state.clock.getElapsedTime() * speed));
-  const [starfieldMaterial] = React.useState(() => new StarfieldMaterial());
-  return /*#__PURE__*/React.createElement("points", {
-    ref: ref
-  }, /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
-    attach: "attributes-position",
-    args: [position, 3]
-  }), /*#__PURE__*/React.createElement("bufferAttribute", {
-    attach: "attributes-color",
-    args: [color, 3]
-  }), /*#__PURE__*/React.createElement("bufferAttribute", {
-    attach: "attributes-size",
-    args: [size, 1]
-  })), /*#__PURE__*/React.createElement("primitive", {
-    ref: material,
-    object: starfieldMaterial,
-    attach: "material",
-    blending: AdditiveBlending,
-    "uniforms-fade-value": fade,
-    depthWrite: false,
-    transparent: true,
-    vertexColors: true
-  }));
-});
-
-export { Stars };

package/src/core/Stats.js

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { addEffect, addAfterEffect } from '@react-three/fiber';
-import StatsImpl from 'stats.js';
-import { useEffectfulState } from '../helpers/useEffectfulState.js';
-
-function Stats({
-  showPanel = 0,
-  className,
-  parent
-}) {
-  const stats = useEffectfulState(() => new StatsImpl(), []);
-  React.useEffect(() => {
-    if (stats) {
-      const node = parent && parent.current || document.body;
-      stats.showPanel(showPanel);
-      node == null ? void 0 : node.appendChild(stats.dom);
-      if (className) stats.dom.classList.add(...className.split(' ').filter(cls => cls));
-      const begin = addEffect(() => stats.begin());
-      const end = addAfterEffect(() => stats.end());
-      return () => {
-        node == null ? void 0 : node.removeChild(stats.dom);
-        begin();
-        end();
-      };
-    }
-  }, [parent, stats, className, showPanel]);
-  return null;
-}
-
-export { Stats };

package/src/core/Svg.js

@@ -1,59 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import { useLoader } from '@react-three/fiber';
-import * as React from 'react';
-import { forwardRef, useMemo, useEffect, Fragment } from 'react';
-import { DoubleSide } from 'three';
-import { SVGLoader } from 'three-stdlib';
-
-const Svg = /*#__PURE__*/forwardRef(function R3FSvg({
-  src,
-  skipFill,
-  skipStrokes,
-  fillMaterial,
-  strokeMaterial,
-  fillMeshProps,
-  strokeMeshProps,
-  ...props
-}, ref) {
-  const svg = useLoader(SVGLoader, !src.startsWith('<svg') ? src : `data:image/svg+xml;utf8,${src}`);
-  const strokeGeometries = useMemo(() => skipStrokes ? [] : svg.paths.map(path => {
-    var _path$userData;
-
-    return ((_path$userData = path.userData) == null ? void 0 : _path$userData.style.stroke) === undefined || path.userData.style.stroke === 'none' ? null : path.subPaths.map(subPath => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style));
-  }), [svg, skipStrokes]);
-  useEffect(() => {
-    return () => strokeGeometries.forEach(group => group && group.map(g => g.dispose()));
-  }, [strokeGeometries]);
-  return /*#__PURE__*/React.createElement("object3D", _extends({
-    ref: ref
-  }, props), /*#__PURE__*/React.createElement("object3D", {
-    scale: [1, -1, 1]
-  }, svg.paths.map((path, p) => {
-    var _path$userData2, _path$userData3;
-
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: p
-    }, !skipFill && ((_path$userData2 = path.userData) == null ? void 0 : _path$userData2.style.fill) !== undefined && path.userData.style.fill !== 'none' && SVGLoader.createShapes(path).map((shape, s) => /*#__PURE__*/React.createElement("mesh", _extends({
-      key: s
-    }, fillMeshProps), /*#__PURE__*/React.createElement("shapeGeometry", {
-      args: [shape]
-    }), /*#__PURE__*/React.createElement("meshBasicMaterial", _extends({
-      color: path.userData.style.fill,
-      opacity: path.userData.style.fillOpacity,
-      transparent: true,
-      side: DoubleSide,
-      depthWrite: false
-    }, fillMaterial)))), !skipStrokes && ((_path$userData3 = path.userData) == null ? void 0 : _path$userData3.style.stroke) !== undefined && path.userData.style.stroke !== 'none' && path.subPaths.map((_subPath, s) => /*#__PURE__*/React.createElement("mesh", _extends({
-      key: s,
-      geometry: strokeGeometries[p][s]
-    }, strokeMeshProps), /*#__PURE__*/React.createElement("meshBasicMaterial", _extends({
-      color: path.userData.style.stroke,
-      opacity: path.userData.style.strokeOpacity,
-      transparent: true,
-      side: DoubleSide,
-      depthWrite: false
-    }, strokeMaterial)))));
-  })));
-});
-
-export { Svg };

package/src/core/Text.js

@@ -1,58 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import { Text as Text$1, preloadFont } from 'troika-three-text';
-import { useThree } from '@react-three/fiber';
-import { suspend } from 'suspend-react';
-
-// eslint-disable-next-line prettier/prettier
-const Text = /*#__PURE__*/React.forwardRef(({
-  sdfGlyphSize = 64,
-  anchorX = 'center',
-  anchorY = 'middle',
-  font,
-  fontSize = 1,
-  children,
-  characters,
-  onSync,
-  ...props
-}, ref) => {
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
-  const [troikaMesh] = React.useState(() => new Text$1());
-  const [nodes, text] = React.useMemo(() => {
-    const n = [];
-    let t = '';
-    React.Children.forEach(children, child => {
-      if (typeof child === 'string' || typeof child === 'number') {
-        t += child;
-      } else {
-        n.push(child);
-      }
-    });
-    return [n, t];
-  }, [children]);
-  suspend(() => new Promise(res => preloadFont({
-    font,
-    characters
-  }, res)), ['troika-text', font, characters]);
-  React.useLayoutEffect(() => void troikaMesh.sync(() => {
-    invalidate();
-    if (onSync) onSync(troikaMesh);
-  }));
-  React.useEffect(() => {
-    return () => troikaMesh.dispose();
-  }, [troikaMesh]);
-  return /*#__PURE__*/React.createElement("primitive", _extends({
-    object: troikaMesh,
-    ref: ref,
-    font: font,
-    text: text,
-    anchorX: anchorX,
-    anchorY: anchorY,
-    fontSize: fontSize,
-    sdfGlyphSize: sdfGlyphSize
-  }, props), nodes);
-});
-
-export { Text };

package/src/core/Text3D.js

@@ -1,76 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import { useMemo } from 'react';
-import { extend } from '@react-three/fiber';
-import { TextGeometry, mergeVertices } from 'three-stdlib';
-import { useFont } from './useFont.js';
-
-const types = ['string', 'number'];
-
-const getTextFromChildren = children => {
-  let label = '';
-  const rest = [];
-  React.Children.forEach(children, child => {
-    if (types.includes(typeof child)) label += child + '';else rest.push(child);
-  });
-  return [label, ...rest];
-};
-
-const Text3D = /*#__PURE__*/React.forwardRef(({
-  font: _font,
-  letterSpacing = 0,
-  lineHeight = 1,
-  size = 1,
-  height = 0.2,
-  bevelThickness = 0.1,
-  bevelSize = 0.01,
-  bevelEnabled = false,
-  bevelOffset = 0,
-  bevelSegments = 4,
-  curveSegments = 8,
-  smooth,
-  children,
-  ...props
-}, fref) => {
-  React.useMemo(() => extend({
-    RenamedTextGeometry: TextGeometry
-  }), []);
-  const ref = React.useRef(null);
-  const font = useFont(_font);
-  const opts = useMemo(() => {
-    return {
-      font,
-      size,
-      height,
-      bevelThickness,
-      bevelSize,
-      bevelEnabled,
-      bevelSegments,
-      bevelOffset,
-      curveSegments,
-      letterSpacing,
-      lineHeight
-    };
-  }, [font, size, height, bevelThickness, bevelSize, bevelEnabled, bevelSegments, bevelOffset, curveSegments, letterSpacing, lineHeight]);
-  /**
-   * We need the `children` in the deps because we
-   * need to be able to do `<Text3d>{state}</Text3d>`.
-   */
-
-  const [label, ...rest] = useMemo(() => getTextFromChildren(children), [children]);
-  const args = React.useMemo(() => [label, opts], [label, opts]);
-  React.useLayoutEffect(() => {
-    if (smooth) {
-      ref.current.geometry = mergeVertices(ref.current.geometry, smooth);
-      ref.current.geometry.computeVertexNormals();
-    }
-  }, [args, smooth]);
-  React.useImperativeHandle(fref, () => ref.current, []);
-  return /*#__PURE__*/React.createElement("mesh", _extends({}, props, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement("renamedTextGeometry", {
-    args: args
-  }), rest);
-});
-
-export { Text3D };

package/src/core/TrackballControls.js

@@ -1,72 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import { useThree, useFrame } from '@react-three/fiber';
-import * as React from 'react';
-import { TrackballControls as TrackballControls$1 } from 'three-stdlib';
-
-const TrackballControls = /*#__PURE__*/React.forwardRef(({
-  makeDefault,
-  camera,
-  domElement,
-  regress,
-  onChange,
-  onStart,
-  onEnd,
-  ...restProps
-}, ref) => {
-  const {
-    invalidate,
-    camera: defaultCamera,
-    gl,
-    events,
-    set,
-    get,
-    performance,
-    viewport
-  } = useThree();
-  const explCamera = camera || defaultCamera;
-  const explDomElement = domElement || events.connected || gl.domElement;
-  const controls = React.useMemo(() => new TrackballControls$1(explCamera), [explCamera]);
-  useFrame(() => {
-    if (controls.enabled) controls.update();
-  }, -1);
-  React.useEffect(() => {
-    controls.connect(explDomElement);
-    return () => void controls.dispose();
-  }, [explDomElement, regress, controls, invalidate]);
-  React.useEffect(() => {
-    const callback = e => {
-      invalidate();
-      if (regress) performance.regress();
-      if (onChange) onChange(e);
-    };
-
-    controls.addEventListener('change', callback);
-    if (onStart) controls.addEventListener('start', onStart);
-    if (onEnd) controls.addEventListener('end', onEnd);
-    return () => {
-      if (onStart) controls.removeEventListener('start', onStart);
-      if (onEnd) controls.removeEventListener('end', onEnd);
-      controls.removeEventListener('change', callback);
-    };
-  }, [onChange, onStart, onEnd, controls, invalidate]);
-  React.useEffect(() => {
-    controls.handleResize();
-  }, [viewport]);
-  React.useEffect(() => {
-    if (makeDefault) {
-      const old = get().controls;
-      set({
-        controls
-      });
-      return () => set({
-        controls: old
-      });
-    }
-  }, [makeDefault, controls]);
-  return /*#__PURE__*/React.createElement("primitive", _extends({
-    ref: ref,
-    object: controls
-  }, restProps));
-});
-
-export { TrackballControls };

package/src/core/Trail.js

@@ -1,161 +0,0 @@
-import { useFrame, useThree, createPortal } from '@react-three/fiber';
-import * as React from 'react';
-import { Vector3, Object3D, Vector2 } from 'three';
-import { MeshLineGeometry, MeshLineMaterial } from 'meshline';
-
-const defaults = {
-  width: 0.2,
-  length: 1,
-  decay: 1,
-  local: false,
-  stride: 0,
-  interval: 1
-};
-
-const shiftLeft = (collection, steps = 1) => {
-  collection.set(collection.subarray(steps));
-  collection.fill(-Infinity, -steps);
-  return collection;
-};
-
-function useTrail(target, settings) {
-  const {
-    length,
-    local,
-    decay,
-    interval,
-    stride
-  } = { ...defaults,
-    ...settings
-  };
-  const points = React.useRef();
-  const [worldPosition] = React.useState(() => new Vector3());
-  React.useLayoutEffect(() => {
-    if (target) {
-      points.current = Float32Array.from({
-        length: length * 10 * 3
-      }, (_, i) => target.position.getComponent(i % 3));
-    }
-  }, [length, target]);
-  const prevPosition = React.useRef(new Vector3());
-  const frameCount = React.useRef(0);
-  useFrame(() => {
-    if (!target) return;
-    if (!points.current) return;
-
-    if (frameCount.current === 0) {
-      let newPosition;
-
-      if (local) {
-        newPosition = target.position;
-      } else {
-        target.getWorldPosition(worldPosition);
-        newPosition = worldPosition;
-      }
-
-      const steps = 1 * decay;
-
-      for (let i = 0; i < steps; i++) {
-        if (newPosition.distanceTo(prevPosition.current) < stride) continue;
-        shiftLeft(points.current, 3);
-        points.current.set(newPosition.toArray(), points.current.length - 3);
-      }
-
-      prevPosition.current.copy(newPosition);
-    }
-
-    frameCount.current++;
-    frameCount.current = frameCount.current % interval;
-  });
-  return points;
-}
-const Trail = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
-  const {
-    children
-  } = props;
-  const {
-    width,
-    length,
-    decay,
-    local,
-    stride,
-    interval
-  } = { ...defaults,
-    ...props
-  };
-  const {
-    color = 'hotpink',
-    attenuation,
-    target
-  } = props;
-  const size = useThree(s => s.size);
-  const scene = useThree(s => s.scene);
-  const ref = React.useRef(null);
-  const [anchor, setAnchor] = React.useState(null);
-  const points = useTrail(anchor, {
-    length,
-    decay,
-    local,
-    stride,
-    interval
-  });
-  React.useEffect(() => {
-    const t = (target == null ? void 0 : target.current) || ref.current.children.find(o => {
-      return o instanceof Object3D;
-    });
-
-    if (t) {
-      setAnchor(t);
-    }
-  }, [points, target]);
-  const geo = React.useMemo(() => new MeshLineGeometry(), []);
-  const mat = React.useMemo(() => {
-    var _matOverride;
-
-    const m = new MeshLineMaterial({
-      lineWidth: 0.1 * width,
-      color: color,
-      sizeAttenuation: 1,
-      resolution: new Vector2(size.width, size.height)
-    }); // Get and apply first <meshLineMaterial /> from children
-
-    let matOverride;
-
-    if (children) {
-      if (Array.isArray(children)) {
-        matOverride = children.find(child => {
-          const c = child;
-          return typeof c.type === 'string' && c.type === 'meshLineMaterial';
-        });
-      } else {
-        const c = children;
-
-        if (typeof c.type === 'string' && c.type === 'meshLineMaterial') {
-          matOverride = c;
-        }
-      }
-    }
-
-    if (typeof ((_matOverride = matOverride) == null ? void 0 : _matOverride.props) === 'object') {
-      m.setValues(matOverride.props);
-    }
-
-    return m;
-  }, [width, color, size, children]);
-  React.useEffect(() => {
-    mat.uniforms.resolution.value.set(size.width, size.height);
-  }, [size]);
-  useFrame(() => {
-    if (!points.current) return;
-    geo.setPoints(points.current, attenuation);
-  });
-  return /*#__PURE__*/React.createElement("group", null, createPortal( /*#__PURE__*/React.createElement("mesh", {
-    ref: forwardRef,
-    geometry: geo,
-    material: mat
-  }), scene), /*#__PURE__*/React.createElement("group", {
-    ref: ref
-  }, children));
-});
-
-export { Trail, useTrail };

package/src/core/TransformControls.js

@@ -1,106 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import { useThree } from '@react-three/fiber';
-import omit from 'lodash.omit';
-import pick from 'lodash.pick';
-import * as React from 'react';
-import * as THREE from 'three';
-import { TransformControls as TransformControls$1 } from 'three-stdlib';
-
-const TransformControls = /*#__PURE__*/React.forwardRef(({
-  children,
-  domElement,
-  onChange,
-  onMouseDown,
-  onMouseUp,
-  onObjectChange,
-  object,
-  makeDefault,
-  ...props
-}, ref) => {
-  const transformOnlyPropNames = ['enabled', 'axis', 'mode', 'translationSnap', 'rotationSnap', 'scaleSnap', 'space', 'size', 'showX', 'showY', 'showZ'];
-  const {
-    camera,
-    ...rest
-  } = props;
-  const transformProps = pick(rest, transformOnlyPropNames);
-  const objectProps = omit(rest, transformOnlyPropNames); // @ts-expect-error new in @react-three/fiber@7.0.5
-
-  const defaultControls = useThree(state => state.controls);
-  const gl = useThree(state => state.gl);
-  const events = useThree(state => state.events);
-  const defaultCamera = useThree(state => state.camera);
-  const invalidate = useThree(state => state.invalidate);
-  const get = useThree(state => state.get);
-  const set = useThree(state => state.set);
-  const explCamera = camera || defaultCamera;
-  const explDomElement = domElement || events.connected || gl.domElement;
-  const controls = React.useMemo(() => new TransformControls$1(explCamera, explDomElement), [explCamera, explDomElement]);
-  const group = React.useRef();
-  React.useLayoutEffect(() => {
-    if (object) {
-      controls.attach(object instanceof THREE.Object3D ? object : object.current);
-    } else if (group.current instanceof THREE.Object3D) {
-      controls.attach(group.current);
-    }
-
-    return () => void controls.detach();
-  }, [object, children, controls]);
-  React.useEffect(() => {
-    if (defaultControls) {
-      const callback = event => defaultControls.enabled = !event.value;
-
-      controls.addEventListener('dragging-changed', callback);
-      return () => controls.removeEventListener('dragging-changed', callback);
-    }
-  }, [controls, defaultControls]);
-  const onChangeRef = React.useRef();
-  const onMouseDownRef = React.useRef();
-  const onMouseUpRef = React.useRef();
-  const onObjectChangeRef = React.useRef();
-  React.useLayoutEffect(() => void (onChangeRef.current = onChange), [onChange]);
-  React.useLayoutEffect(() => void (onMouseDownRef.current = onMouseDown), [onMouseDown]);
-  React.useLayoutEffect(() => void (onMouseUpRef.current = onMouseUp), [onMouseUp]);
-  React.useLayoutEffect(() => void (onObjectChangeRef.current = onObjectChange), [onObjectChange]);
-  React.useEffect(() => {
-    const onChange = e => {
-      invalidate();
-      onChangeRef.current == null ? void 0 : onChangeRef.current(e);
-    };
-
-    const onMouseDown = e => onMouseDownRef.current == null ? void 0 : onMouseDownRef.current(e);
-
-    const onMouseUp = e => onMouseUpRef.current == null ? void 0 : onMouseUpRef.current(e);
-
-    const onObjectChange = e => onObjectChangeRef.current == null ? void 0 : onObjectChangeRef.current(e);
-
-    controls.addEventListener('change', onChange);
-    controls.addEventListener('mouseDown', onMouseDown);
-    controls.addEventListener('mouseUp', onMouseUp);
-    controls.addEventListener('objectChange', onObjectChange);
-    return () => {
-      controls.removeEventListener('change', onChange);
-      controls.removeEventListener('mouseDown', onMouseDown);
-      controls.removeEventListener('mouseUp', onMouseUp);
-      controls.removeEventListener('objectChange', onObjectChange);
-    };
-  }, [invalidate, controls]);
-  React.useEffect(() => {
-    if (makeDefault) {
-      const old = get().controls;
-      set({
-        controls
-      });
-      return () => set({
-        controls: old
-      });
-    }
-  }, [makeDefault, controls]);
-  return controls ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("primitive", _extends({
-    ref: ref,
-    object: controls
-  }, transformProps)), /*#__PURE__*/React.createElement("group", _extends({
-    ref: group
-  }, objectProps), children)) : null;
-});
-
-export { TransformControls };