@react-three/drei 9.74.11 → 9.74.13

package/src/core/RoundedBox.js

@@ -0,0 +1,52 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Shape } from 'three';
+import { toCreasedNormals } from 'three-stdlib';
+
+const eps = 0.00001;
+
+function createShape(width, height, radius0) {
+  const shape = new Shape();
+  const radius = radius0 - eps;
+  shape.absarc(eps, eps, eps, -Math.PI / 2, -Math.PI, true);
+  shape.absarc(eps, height - radius * 2, eps, Math.PI, Math.PI / 2, true);
+  shape.absarc(width - radius * 2, height - radius * 2, eps, Math.PI / 2, 0, true);
+  shape.absarc(width - radius * 2, eps, eps, 0, -Math.PI / 2, true);
+  return shape;
+}
+
+const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
+  args: [width = 1, height = 1, depth = 1] = [],
+  radius = 0.05,
+  steps = 1,
+  smoothness = 4,
+  creaseAngle = 0.4,
+  children,
+  ...rest
+}, ref) {
+  const shape = React.useMemo(() => createShape(width, height, radius), [width, height, radius]);
+  const params = React.useMemo(() => ({
+    depth: depth - radius * 2,
+    bevelEnabled: true,
+    bevelSegments: smoothness * 2,
+    steps,
+    bevelSize: radius - eps,
+    bevelThickness: radius,
+    curveSegments: smoothness
+  }), [depth, radius, smoothness]);
+  const geomRef = React.useRef();
+  React.useLayoutEffect(() => {
+    if (geomRef.current) {
+      geomRef.current.center();
+      toCreasedNormals(geomRef.current, creaseAngle);
+    }
+  }, [shape, params]);
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: ref
+  }, rest), /*#__PURE__*/React.createElement("extrudeGeometry", {
+    ref: geomRef,
+    args: [shape, params]
+  }), children);
+});
+
+export { RoundedBox };

package/src/core/Sampler.js

@@ -0,0 +1,85 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { MeshSurfaceSampler } from 'three-stdlib';
+import { InstancedBufferAttribute, Vector3, Color, Object3D } from 'three';
+
+function useSurfaceSampler(mesh, count = 16, transform, weight, instanceMesh) {
+  const [buffer, setBuffer] = React.useState(() => {
+    const arr = Array.from({
+      length: count
+    }, () => [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]).flat();
+    return new InstancedBufferAttribute(Float32Array.from(arr), 16);
+  });
+  React.useLayoutEffect(() => {
+    if (typeof mesh.current === 'undefined') return;
+    const sampler = new MeshSurfaceSampler(mesh.current);
+
+    if (weight) {
+      sampler.setWeightAttribute(weight);
+    }
+
+    sampler.build();
+    const position = new Vector3();
+    const normal = new Vector3();
+    const color = new Color();
+    const dummy = new Object3D();
+    mesh.current.updateMatrixWorld(true);
+
+    for (let i = 0; i < count; i++) {
+      sampler.sample(position, normal, color);
+
+      if (typeof transform === 'function') {
+        transform({
+          dummy,
+          sampledMesh: mesh.current,
+          position,
+          normal,
+          color
+        }, i);
+      } else {
+        dummy.position.copy(position);
+      }
+
+      dummy.updateMatrix();
+
+      if (instanceMesh != null && instanceMesh.current) {
+        instanceMesh.current.setMatrixAt(i, dummy.matrix);
+      }
+
+      dummy.matrix.toArray(buffer.array, i * 16);
+    }
+
+    if (instanceMesh != null && instanceMesh.current) {
+      instanceMesh.current.instanceMatrix.needsUpdate = true;
+    }
+
+    buffer.needsUpdate = true;
+    setBuffer(buffer.clone());
+  }, [mesh, instanceMesh, weight, count, transform]);
+  return buffer;
+}
+function Sampler({
+  children,
+  weight,
+  transform,
+  instances,
+  mesh,
+  count = 16,
+  ...props
+}) {
+  const group = React.useRef(null);
+  const instancedRef = React.useRef(null);
+  const meshToSampleRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    var _instances$current, _mesh$current;
+
+    instancedRef.current = (_instances$current = instances == null ? void 0 : instances.current) !== null && _instances$current !== void 0 ? _instances$current : group.current.children.find(c => c.hasOwnProperty('instanceMatrix'));
+    meshToSampleRef.current = (_mesh$current = mesh == null ? void 0 : mesh.current) !== null && _mesh$current !== void 0 ? _mesh$current : group.current.children.find(c => c.type === 'Mesh');
+  }, [children, mesh == null ? void 0 : mesh.current, instances == null ? void 0 : instances.current]);
+  useSurfaceSampler(meshToSampleRef, count, transform, weight, instancedRef);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: group
+  }, props), children);
+}
+
+export { Sampler, useSurfaceSampler };

package/src/core/ScreenQuad.js

@@ -0,0 +1,24 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+
+function createScreenQuadGeometry() {
+  const geometry = new THREE.BufferGeometry();
+  const vertices = new Float32Array([-1, -1, 3, -1, -1, 3]);
+  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 2));
+  return geometry;
+}
+
+const ScreenQuad = /*#__PURE__*/React.forwardRef(function ScreenQuad({
+  children,
+  ...restProps
+}, ref) {
+  const geometry = React.useMemo(createScreenQuadGeometry, []);
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: ref,
+    geometry: geometry,
+    frustumCulled: false
+  }, restProps), children);
+});
+
+export { ScreenQuad };

package/src/core/ScreenSpace.js

@@ -0,0 +1,25 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import mergeRefs from 'react-merge-refs';
+import { useFrame } from '@react-three/fiber';
+
+const ScreenSpace = /*#__PURE__*/React.forwardRef(({
+  children,
+  depth = -1,
+  ...rest
+}, ref) => {
+  const localRef = React.useRef(null);
+  useFrame(({
+    camera
+  }) => {
+    localRef.current.quaternion.copy(camera.quaternion);
+    localRef.current.position.copy(camera.position);
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: mergeRefs([ref, localRef])
+  }, rest), /*#__PURE__*/React.createElement("group", {
+    "position-z": -depth
+  }, children));
+});
+
+export { ScreenSpace };

package/src/core/Segments.js

@@ -0,0 +1,102 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import mergeRefs from 'react-merge-refs';
+import { extend, useFrame } from '@react-three/fiber';
+import { Line2, LineMaterial, LineSegmentsGeometry } from 'three-stdlib';
+
+const context = /*#__PURE__*/React.createContext(null);
+const Segments = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  React.useMemo(() => extend({
+    SegmentObject
+  }), []);
+  const {
+    limit = 1000,
+    lineWidth = 1.0,
+    children,
+    ...rest
+  } = props;
+  const [segments, setSegments] = React.useState([]);
+  const [line] = React.useState(() => new Line2());
+  const [material] = React.useState(() => new LineMaterial());
+  const [geometry] = React.useState(() => new LineSegmentsGeometry());
+  const [resolution] = React.useState(() => new THREE.Vector2(512, 512));
+  const [positions] = React.useState(() => Array(limit * 6).fill(0));
+  const [colors] = React.useState(() => Array(limit * 6).fill(0));
+  const api = React.useMemo(() => ({
+    subscribe: ref => {
+      setSegments(segments => [...segments, ref]);
+      return () => setSegments(segments => segments.filter(item => item.current !== ref.current));
+    }
+  }), []);
+  useFrame(() => {
+    for (let i = 0; i < limit; i++) {
+      var _segments$i;
+
+      const segment = (_segments$i = segments[i]) == null ? void 0 : _segments$i.current;
+
+      if (segment) {
+        positions[i * 6 + 0] = segment.start.x;
+        positions[i * 6 + 1] = segment.start.y;
+        positions[i * 6 + 2] = segment.start.z;
+        positions[i * 6 + 3] = segment.end.x;
+        positions[i * 6 + 4] = segment.end.y;
+        positions[i * 6 + 5] = segment.end.z;
+        colors[i * 6 + 0] = segment.color.r;
+        colors[i * 6 + 1] = segment.color.g;
+        colors[i * 6 + 2] = segment.color.b;
+        colors[i * 6 + 3] = segment.color.r;
+        colors[i * 6 + 4] = segment.color.g;
+        colors[i * 6 + 5] = segment.color.b;
+      }
+    }
+
+    geometry.setColors(colors);
+    geometry.setPositions(positions);
+    line.computeLineDistances();
+  });
+  return /*#__PURE__*/React.createElement("primitive", {
+    object: line,
+    ref: forwardedRef
+  }, /*#__PURE__*/React.createElement("primitive", {
+    object: geometry,
+    attach: "geometry"
+  }), /*#__PURE__*/React.createElement("primitive", _extends({
+    object: material,
+    attach: "material",
+    vertexColors: true,
+    resolution: resolution,
+    linewidth: lineWidth
+  }, rest)), /*#__PURE__*/React.createElement(context.Provider, {
+    value: api
+  }, children));
+});
+class SegmentObject {
+  constructor() {
+    this.color = new THREE.Color('white');
+    this.start = new THREE.Vector3(0, 0, 0);
+    this.end = new THREE.Vector3(0, 0, 0);
+  }
+
+}
+
+const normPos = pos => pos instanceof THREE.Vector3 ? pos : new THREE.Vector3(...(typeof pos === 'number' ? [pos, pos, pos] : pos));
+
+const Segment = /*#__PURE__*/React.forwardRef(({
+  color,
+  start,
+  end
+}, forwardedRef) => {
+  const api = React.useContext(context);
+  if (!api) throw 'Segment must used inside Segments component.';
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => api.subscribe(ref), []);
+  return /*#__PURE__*/React.createElement("segmentObject", {
+    ref: mergeRefs([ref, forwardedRef]),
+    color: color,
+    start: normPos(start),
+    end: normPos(end)
+  });
+});
+
+export { Segment, SegmentObject, Segments };

package/src/core/Shadow.js

@@ -0,0 +1,42 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Color, DoubleSide } from 'three';
+
+const Shadow = /*#__PURE__*/React.forwardRef(({
+  fog = false,
+  renderOrder,
+  depthWrite = false,
+  colorStop = 0.0,
+  color = 'black',
+  opacity = 0.5,
+  ...props
+}, ref) => {
+  const canvas = React.useMemo(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 128;
+    canvas.height = 128;
+    const context = canvas.getContext('2d');
+    const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
+    gradient.addColorStop(colorStop, new Color(color).getStyle());
+    gradient.addColorStop(1, 'rgba(0,0,0,0)');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    return canvas;
+  }, [color, colorStop]);
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    renderOrder: renderOrder,
+    ref: ref,
+    "rotation-x": -Math.PI / 2
+  }, props), /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    opacity: opacity,
+    fog: fog,
+    depthWrite: depthWrite,
+    side: DoubleSide
+  }, /*#__PURE__*/React.createElement("canvasTexture", {
+    attach: "map",
+    args: [canvas]
+  })));
+});
+
+export { Shadow };

package/src/core/Sky.js

@@ -0,0 +1,39 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Sky as Sky$1 } from 'three-stdlib';
+import { Vector3 } from 'three';
+
+function calcPosFromAngles(inclination, azimuth, vector = new Vector3()) {
+  const theta = Math.PI * (inclination - 0.5);
+  const phi = 2 * Math.PI * (azimuth - 0.5);
+  vector.x = Math.cos(phi);
+  vector.y = Math.sin(theta);
+  vector.z = Math.sin(phi);
+  return vector;
+}
+const Sky = /*#__PURE__*/React.forwardRef(({
+  inclination = 0.6,
+  azimuth = 0.1,
+  distance = 1000,
+  mieCoefficient = 0.005,
+  mieDirectionalG = 0.8,
+  rayleigh = 0.5,
+  turbidity = 10,
+  sunPosition = calcPosFromAngles(inclination, azimuth),
+  ...props
+}, ref) => {
+  const scale = React.useMemo(() => new Vector3().setScalar(distance), [distance]);
+  const [sky] = React.useState(() => new Sky$1());
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    object: sky,
+    ref: ref,
+    "material-uniforms-mieCoefficient-value": mieCoefficient,
+    "material-uniforms-mieDirectionalG-value": mieDirectionalG,
+    "material-uniforms-rayleigh-value": rayleigh,
+    "material-uniforms-sunPosition-value": sunPosition,
+    "material-uniforms-turbidity-value": turbidity,
+    scale: scale
+  }, props));
+});
+
+export { Sky, calcPosFromAngles };

package/src/core/Sparkles.js

@@ -0,0 +1,139 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import { shaderMaterial } from './shaderMaterial.js';
+
+const SparklesImplMaterial = shaderMaterial({
+  time: 0,
+  pixelRatio: 1
+}, ` uniform float pixelRatio;
+    uniform float time;
+    attribute float size;  
+    attribute float speed;  
+    attribute float opacity;
+    attribute vec3 noise;
+    attribute vec3 color;
+    varying vec3 vColor;
+    varying float vOpacity;
+    void main() {
+      vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+      modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
+      modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
+      modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
+      vec4 viewPosition = viewMatrix * modelPosition;
+      vec4 projectionPostion = projectionMatrix * viewPosition;
+      gl_Position = projectionPostion;
+      gl_PointSize = size * 25. * pixelRatio;
+      gl_PointSize *= (1.0 / - viewPosition.z);
+      vColor = color;
+      vOpacity = opacity;
+    }`, ` varying vec3 vColor;
+    varying float vOpacity;
+    void main() {
+      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+      float strength = 0.05 / distanceToCenter - 0.1;
+      gl_FragColor = vec4(vColor, strength * vOpacity);
+      #include <tonemapping_fragment>
+      #include <encodings_fragment>
+    }`);
+
+const isFloat32Array = def => def && def.constructor === Float32Array;
+
+const expandColor = v => [v.r, v.g, v.b];
+
+const isVector = v => v instanceof THREE.Vector2 || v instanceof THREE.Vector3 || v instanceof THREE.Vector4;
+
+const normalizeVector = v => {
+  if (Array.isArray(v)) return v;else if (isVector(v)) return v.toArray();
+  return [v, v, v];
+};
+
+function usePropAsIsOrAsAttribute(count, prop, setDefault) {
+  return React.useMemo(() => {
+    if (prop !== undefined) {
+      if (isFloat32Array(prop)) {
+        return prop;
+      } else {
+        if (prop instanceof THREE.Color) {
+          const a = Array.from({
+            length: count * 3
+          }, () => expandColor(prop)).flat();
+          return Float32Array.from(a);
+        } else if (isVector(prop) || Array.isArray(prop)) {
+          const a = Array.from({
+            length: count * 3
+          }, () => normalizeVector(prop)).flat();
+          return Float32Array.from(a);
+        }
+
+        return Float32Array.from({
+          length: count
+        }, () => prop);
+      }
+    }
+
+    return Float32Array.from({
+      length: count
+    }, setDefault);
+  }, [prop]);
+}
+
+const Sparkles = /*#__PURE__*/React.forwardRef(({
+  noise = 1,
+  count = 100,
+  speed = 1,
+  opacity = 1,
+  scale = 1,
+  size,
+  color,
+  children,
+  ...props
+}, forwardRef) => {
+  React.useMemo(() => extend({
+    SparklesImplMaterial
+  }), []);
+  const ref = React.useRef(null);
+  const dpr = useThree(state => state.viewport.dpr);
+  const positions = React.useMemo(() => Float32Array.from(Array.from({
+    length: count
+  }, () => normalizeVector(scale).map(THREE.MathUtils.randFloatSpread)).flat()), [count, scale]);
+  const sizes = usePropAsIsOrAsAttribute(count, size, Math.random);
+  const opacities = usePropAsIsOrAsAttribute(count, opacity);
+  const speeds = usePropAsIsOrAsAttribute(count, speed);
+  const noises = usePropAsIsOrAsAttribute(count * 3, noise);
+  const colors = usePropAsIsOrAsAttribute(color === undefined ? count * 3 : count, !isFloat32Array(color) ? new THREE.Color(color) : color, () => 1);
+  useFrame(state => {
+    if (ref.current && ref.current.material) ref.current.material.time = state.clock.elapsedTime;
+  });
+  React.useImperativeHandle(forwardRef, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("points", _extends({
+    key: `particle-${count}-${JSON.stringify(scale)}`
+  }, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-position",
+    args: [positions, 3]
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-size",
+    args: [sizes, 1]
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-opacity",
+    args: [opacities, 1]
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-speed",
+    args: [speeds, 1]
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-color",
+    args: [colors, 3]
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-noise",
+    args: [noises, 3]
+  })), children ? children : /*#__PURE__*/React.createElement("sparklesImplMaterial", {
+    transparent: true,
+    pixelRatio: dpr,
+    depthWrite: false
+  }));
+});
+
+export { Sparkles };