@react-three/drei 9.74.11 → 9.74.13

package/src/core/Stars.js

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

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

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

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

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

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

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

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