@react-three/drei 9.74.11 → 9.74.13

package/src/core/MeshWobbleMaterial.js

@@ -0,0 +1,65 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { MeshStandardMaterial } from 'three';
+import { useFrame } from '@react-three/fiber';
+
+class WobbleMaterialImpl extends MeshStandardMaterial {
+  constructor(parameters = {}) {
+    super(parameters);
+    this.setValues(parameters);
+    this._time = {
+      value: 0
+    };
+    this._factor = {
+      value: 1
+    };
+  }
+
+  onBeforeCompile(shader) {
+    shader.uniforms.time = this._time;
+    shader.uniforms.factor = this._factor;
+    shader.vertexShader = `
+      uniform float time;
+      uniform float factor;
+      ${shader.vertexShader}
+    `;
+    shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>', `float theta = sin( time + position.y ) / 2.0 * factor;
+        float c = cos( theta );
+        float s = sin( theta );
+        mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );
+        vec3 transformed = vec3( position ) * m;
+        vNormal = vNormal * m;`);
+  }
+
+  get time() {
+    return this._time.value;
+  }
+
+  set time(v) {
+    this._time.value = v;
+  }
+
+  get factor() {
+    return this._factor.value;
+  }
+
+  set factor(v) {
+    this._factor.value = v;
+  }
+
+}
+
+const MeshWobbleMaterial = /*#__PURE__*/React.forwardRef(({
+  speed = 1,
+  ...props
+}, ref) => {
+  const [material] = React.useState(() => new WobbleMaterialImpl());
+  useFrame(state => material && (material.time = state.clock.getElapsedTime() * speed));
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    object: material,
+    ref: ref,
+    attach: "material"
+  }, props));
+});
+
+export { MeshWobbleMaterial };

package/src/core/OrbitControls.js

@@ -0,0 +1,82 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as React from 'react';
+import { OrbitControls as OrbitControls$1 } from 'three-stdlib';
+
+const OrbitControls = /*#__PURE__*/React.forwardRef(({
+  makeDefault,
+  camera,
+  regress,
+  domElement,
+  enableDamping = true,
+  keyEvents = false,
+  onChange,
+  onStart,
+  onEnd,
+  ...restProps
+}, ref) => {
+  const invalidate = useThree(state => state.invalidate);
+  const defaultCamera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const setEvents = useThree(state => state.setEvents);
+  const set = useThree(state => state.set);
+  const get = useThree(state => state.get);
+  const performance = useThree(state => state.performance);
+  const explCamera = camera || defaultCamera;
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
+  useFrame(() => {
+    if (controls.enabled) controls.update();
+  }, -1);
+  React.useEffect(() => {
+    if (keyEvents) {
+      controls.connect(keyEvents === true ? explDomElement : keyEvents);
+    }
+
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [keyEvents, explDomElement, regress, controls, invalidate]);
+  React.useEffect(() => {
+    const callback = e => {
+      invalidate();
+      if (regress) performance.regress();
+      if (onChange) onChange(e);
+    };
+
+    const onStartCb = e => {
+      if (onStart) onStart(e);
+    };
+
+    const onEndCb = e => {
+      if (onEnd) onEnd(e);
+    };
+
+    controls.addEventListener('change', callback);
+    controls.addEventListener('start', onStartCb);
+    controls.addEventListener('end', onEndCb);
+    return () => {
+      controls.removeEventListener('start', onStartCb);
+      controls.removeEventListener('end', onEndCb);
+      controls.removeEventListener('change', callback);
+    };
+  }, [onChange, onStart, onEnd, controls, invalidate, setEvents]);
+  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,
+    enableDamping: enableDamping
+  }, restProps));
+});
+
+export { OrbitControls };

package/src/core/OrthographicCamera.js

@@ -0,0 +1,77 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import { useFBO } from './useFBO.js';
+
+const isFunction = node => typeof node === 'function';
+
+const OrthographicCamera = /*#__PURE__*/React.forwardRef(({
+  envMap,
+  resolution = 256,
+  frames = Infinity,
+  children,
+  makeDefault,
+  ...props
+}, ref) => {
+  const set = useThree(({
+    set
+  }) => set);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const size = useThree(({
+    size
+  }) => size);
+  const cameraRef = React.useRef(null);
+  const groupRef = React.useRef(null);
+  const fbo = useFBO(resolution);
+  React.useLayoutEffect(() => {
+    if (!props.manual) {
+      cameraRef.current.updateProjectionMatrix();
+    }
+  }, [size, props]);
+  React.useLayoutEffect(() => {
+    cameraRef.current.updateProjectionMatrix();
+  });
+  React.useLayoutEffect(() => {
+    if (makeDefault) {
+      const oldCam = camera;
+      set(() => ({
+        camera: cameraRef.current
+      }));
+      return () => set(() => ({
+        camera: oldCam
+      }));
+    } // The camera should not be part of the dependency list because this components camera is a stable reference
+    // that must exchange the default, and clean up after itself on unmount.
+
+  }, [cameraRef, makeDefault, set]);
+  let count = 0;
+  let oldEnvMap = null;
+  const functional = isFunction(children);
+  useFrame(state => {
+    if (functional && (frames === Infinity || count < frames)) {
+      groupRef.current.visible = false;
+      state.gl.setRenderTarget(fbo);
+      oldEnvMap = state.scene.background;
+      if (envMap) state.scene.background = envMap;
+      state.gl.render(state.scene, cameraRef.current);
+      state.scene.background = oldEnvMap;
+      state.gl.setRenderTarget(null);
+      groupRef.current.visible = true;
+      count++;
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("orthographicCamera", _extends({
+    left: size.width / -2,
+    right: size.width / 2,
+    top: size.height / 2,
+    bottom: size.height / -2,
+    ref: mergeRefs([cameraRef, ref])
+  }, props), !functional && children), /*#__PURE__*/React.createElement("group", {
+    ref: groupRef
+  }, functional && children(fbo.texture)));
+});
+
+export { OrthographicCamera };

package/src/core/PerformanceMonitor.js

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { useState, useContext, useRef, useLayoutEffect, createContext } from 'react';
+import { useFrame } from '@react-three/fiber';
+
+const context = /*#__PURE__*/createContext(null);
+function PerformanceMonitor({
+  iterations = 10,
+  ms = 250,
+  threshold = 0.75,
+  step = 0.1,
+  factor: _factor = 0.5,
+  flipflops = Infinity,
+  bounds = refreshrate => refreshrate > 100 ? [60, 100] : [40, 60],
+  onIncline,
+  onDecline,
+  onChange,
+  onFallback,
+  children
+}) {
+  const decimalPlacesRatio = Math.pow(10, 0);
+  const [api, _] = useState(() => ({
+    fps: 0,
+    index: 0,
+    factor: _factor,
+    flipped: 0,
+    refreshrate: 0,
+    fallback: false,
+    frames: [],
+    averages: [],
+    subscriptions: new Map(),
+    subscribe: ref => {
+      const key = Symbol();
+      api.subscriptions.set(key, ref.current);
+      return () => void api.subscriptions.delete(key);
+    }
+  }));
+  let lastFactor = 0;
+  useFrame(() => {
+    const {
+      frames,
+      averages
+    } = api; // If the fallback has been reached do not continue running samples
+
+    if (api.fallback) return;
+
+    if (averages.length < iterations) {
+      frames.push(performance.now());
+      const msPassed = frames[frames.length - 1] - frames[0];
+
+      if (msPassed >= ms) {
+        api.fps = Math.round(frames.length / msPassed * 1000 * decimalPlacesRatio) / decimalPlacesRatio;
+        api.refreshrate = Math.max(api.refreshrate, api.fps);
+        averages[api.index++ % iterations] = api.fps;
+
+        if (averages.length === iterations) {
+          const [lower, upper] = bounds(api.refreshrate);
+          const upperBounds = averages.filter(value => value >= upper);
+          const lowerBounds = averages.filter(value => value < lower); // Trigger incline when more than -threshold- avgs exceed the upper bound
+
+          if (upperBounds.length > iterations * threshold) {
+            api.factor = Math.min(1, api.factor + step);
+            api.flipped++;
+            if (onIncline) onIncline(api);
+            api.subscriptions.forEach(value => value.onIncline && value.onIncline(api));
+          } // Trigger decline when more than -threshold- avgs are below the lower bound
+
+
+          if (lowerBounds.length > iterations * threshold) {
+            api.factor = Math.max(0, api.factor - step);
+            api.flipped++;
+            if (onDecline) onDecline(api);
+            api.subscriptions.forEach(value => value.onDecline && value.onDecline(api));
+          }
+
+          if (lastFactor !== api.factor) {
+            lastFactor = api.factor;
+            if (onChange) onChange(api);
+            api.subscriptions.forEach(value => value.onChange && value.onChange(api));
+          }
+
+          if (api.flipped > flipflops && !api.fallback) {
+            api.fallback = true;
+            if (onFallback) onFallback(api);
+            api.subscriptions.forEach(value => value.onFallback && value.onFallback(api));
+          }
+
+          api.averages = []; // Resetting the refreshrate creates more problems than it solves atm
+          // api.refreshrate = 0
+        }
+
+        api.frames = [];
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(context.Provider, {
+    value: api
+  }, children);
+}
+function usePerformanceMonitor({
+  onIncline,
+  onDecline,
+  onChange,
+  onFallback
+}) {
+  const api = useContext(context);
+  const ref = useRef({
+    onIncline,
+    onDecline,
+    onChange,
+    onFallback
+  });
+  useLayoutEffect(() => {
+    ref.current.onIncline = onIncline;
+    ref.current.onDecline = onDecline;
+    ref.current.onChange = onChange;
+    ref.current.onFallback = onFallback;
+  }, [onIncline, onDecline, onChange, onFallback]);
+  useLayoutEffect(() => api.subscribe(ref), [api]);
+}
+
+export { PerformanceMonitor, usePerformanceMonitor };

package/src/core/PerspectiveCamera.js

@@ -0,0 +1,73 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import { useFBO } from './useFBO.js';
+
+const isFunction = node => typeof node === 'function';
+
+const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
+  envMap,
+  resolution = 256,
+  frames = Infinity,
+  makeDefault,
+  children,
+  ...props
+}, ref) => {
+  const set = useThree(({
+    set
+  }) => set);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const size = useThree(({
+    size
+  }) => size);
+  const cameraRef = React.useRef(null);
+  const groupRef = React.useRef(null);
+  const fbo = useFBO(resolution);
+  React.useLayoutEffect(() => {
+    if (!props.manual) {
+      cameraRef.current.aspect = size.width / size.height;
+    }
+  }, [size, props]);
+  React.useLayoutEffect(() => {
+    cameraRef.current.updateProjectionMatrix();
+  });
+  let count = 0;
+  let oldEnvMap = null;
+  const functional = isFunction(children);
+  useFrame(state => {
+    if (functional && (frames === Infinity || count < frames)) {
+      groupRef.current.visible = false;
+      state.gl.setRenderTarget(fbo);
+      oldEnvMap = state.scene.background;
+      if (envMap) state.scene.background = envMap;
+      state.gl.render(state.scene, cameraRef.current);
+      state.scene.background = oldEnvMap;
+      state.gl.setRenderTarget(null);
+      groupRef.current.visible = true;
+      count++;
+    }
+  });
+  React.useLayoutEffect(() => {
+    if (makeDefault) {
+      const oldCam = camera;
+      set(() => ({
+        camera: cameraRef.current
+      }));
+      return () => set(() => ({
+        camera: oldCam
+      }));
+    } // The camera should not be part of the dependency list because this components camera is a stable reference
+    // that must exchange the default, and clean up after itself on unmount.
+
+  }, [cameraRef, makeDefault, set]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("perspectiveCamera", _extends({
+    ref: mergeRefs([cameraRef, ref])
+  }, props), !functional && children), /*#__PURE__*/React.createElement("group", {
+    ref: groupRef
+  }, functional && children(fbo.texture)));
+});
+
+export { PerspectiveCamera };

package/src/core/PointMaterial.js

@@ -0,0 +1,36 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+
+class PointMaterialImpl extends THREE.PointsMaterial {
+  constructor(props) {
+    super(props);
+
+    this.onBeforeCompile = (shader, renderer) => {
+      const {
+        isWebGL2
+      } = renderer.capabilities;
+      shader.fragmentShader = shader.fragmentShader.replace('#include <output_fragment>', `
+        ${!isWebGL2 ? '#extension GL_OES_standard_derivatives : enable\n#include <output_fragment>' : '#include <output_fragment>'}
+      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+      float r = dot(cxy, cxy);
+      float delta = fwidth(r);     
+      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
+      #include <tonemapping_fragment>
+      #include <encodings_fragment>
+      `);
+    };
+  }
+
+}
+const PointMaterial = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const [material] = React.useState(() => new PointMaterialImpl(null));
+  return /*#__PURE__*/React.createElement("primitive", _extends({}, props, {
+    object: material,
+    ref: ref,
+    attach: "material"
+  }));
+});
+
+export { PointMaterial, PointMaterialImpl };

package/src/core/PointerLockControls.js

@@ -0,0 +1,90 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree } from '@react-three/fiber';
+import * as React from 'react';
+import { PointerLockControls as PointerLockControls$1 } from 'three-stdlib';
+
+const PointerLockControls = /*#__PURE__*/React.forwardRef(({
+  domElement,
+  selector,
+  onChange,
+  onLock,
+  onUnlock,
+  enabled = true,
+  makeDefault,
+  ...props
+}, ref) => {
+  const {
+    camera,
+    ...rest
+  } = props;
+  const setEvents = useThree(state => state.setEvents);
+  const gl = useThree(state => state.gl);
+  const defaultCamera = useThree(state => state.camera);
+  const invalidate = useThree(state => state.invalidate);
+  const events = useThree(state => state.events);
+  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.useState(() => new PointerLockControls$1(explCamera));
+  React.useEffect(() => {
+    if (enabled) {
+      controls.connect(explDomElement); // Force events to be centered while PLC is active
+
+      const oldComputeOffsets = get().events.compute;
+      setEvents({
+        compute(event, state) {
+          const offsetX = state.size.width / 2;
+          const offsetY = state.size.height / 2;
+          state.pointer.set(offsetX / state.size.width * 2 - 1, -(offsetY / state.size.height) * 2 + 1);
+          state.raycaster.setFromCamera(state.pointer, state.camera);
+        }
+
+      });
+      return () => {
+        controls.disconnect();
+        setEvents({
+          compute: oldComputeOffsets
+        });
+      };
+    }
+  }, [enabled, controls]);
+  React.useEffect(() => {
+    const callback = e => {
+      invalidate();
+      if (onChange) onChange(e);
+    };
+
+    controls.addEventListener('change', callback);
+    if (onLock) controls.addEventListener('lock', onLock);
+    if (onUnlock) controls.addEventListener('unlock', onUnlock); // Enforce previous interaction
+
+    const handler = () => controls.lock();
+
+    const elements = selector ? Array.from(document.querySelectorAll(selector)) : [document];
+    elements.forEach(element => element && element.addEventListener('click', handler));
+    return () => {
+      controls.removeEventListener('change', callback);
+      if (onLock) controls.addEventListener('lock', onLock);
+      if (onUnlock) controls.addEventListener('unlock', onUnlock);
+      elements.forEach(element => element ? element.removeEventListener('click', handler) : undefined);
+    };
+  }, [onChange, onLock, onUnlock, selector, controls, invalidate]);
+  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
+  }, rest));
+});
+
+export { PointerLockControls };