@react-three/drei 9.74.11 → 9.74.13

package/src/core/Points.js

@@ -0,0 +1,227 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { extend, useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+
+const _inverseMatrix = /*@__PURE__*/new THREE.Matrix4();
+
+const _ray = /*@__PURE__*/new THREE.Ray();
+
+const _sphere = /*@__PURE__*/new THREE.Sphere();
+
+const _position = /*@__PURE__*/new THREE.Vector3();
+
+class PositionPoint extends THREE.Group {
+  constructor() {
+    super();
+    this.size = 0;
+    this.color = new THREE.Color('white');
+    this.instance = {
+      current: undefined
+    };
+    this.instanceKey = {
+      current: undefined
+    };
+  } // This will allow the virtual instance have bounds
+
+
+  get geometry() {
+    var _this$instance$curren;
+
+    return (_this$instance$curren = this.instance.current) == null ? void 0 : _this$instance$curren.geometry;
+  }
+
+  raycast(raycaster, intersects) {
+    var _raycaster$params$Poi, _raycaster$params$Poi2;
+
+    const parent = this.instance.current;
+    if (!parent || !parent.geometry) return;
+    const instanceId = parent.userData.instances.indexOf(this.instanceKey); // If the instance wasn't found or exceeds the parents draw range, bail out
+
+    if (instanceId === -1 || instanceId > parent.geometry.drawRange.count) return;
+    const threshold = (_raycaster$params$Poi = (_raycaster$params$Poi2 = raycaster.params.Points) == null ? void 0 : _raycaster$params$Poi2.threshold) !== null && _raycaster$params$Poi !== void 0 ? _raycaster$params$Poi : 1;
+
+    _sphere.set(this.getWorldPosition(_position), threshold);
+
+    if (raycaster.ray.intersectsSphere(_sphere) === false) return;
+
+    _inverseMatrix.copy(parent.matrixWorld).invert();
+
+    _ray.copy(raycaster.ray).applyMatrix4(_inverseMatrix);
+
+    const localThreshold = threshold / ((this.scale.x + this.scale.y + this.scale.z) / 3);
+    const localThresholdSq = localThreshold * localThreshold;
+
+    const rayPointDistanceSq = _ray.distanceSqToPoint(this.position);
+
+    if (rayPointDistanceSq < localThresholdSq) {
+      const intersectPoint = new THREE.Vector3();
+
+      _ray.closestPointToPoint(this.position, intersectPoint);
+
+      intersectPoint.applyMatrix4(this.matrixWorld);
+      const distance = raycaster.ray.origin.distanceTo(intersectPoint);
+      if (distance < raycaster.near || distance > raycaster.far) return;
+      intersects.push({
+        distance: distance,
+        distanceToRay: Math.sqrt(rayPointDistanceSq),
+        point: intersectPoint,
+        index: instanceId,
+        face: null,
+        object: this
+      });
+    }
+  }
+
+}
+let i, positionRef;
+const context = /*@__PURE__*/React.createContext(null);
+const parentMatrix = /*@__PURE__*/new THREE.Matrix4();
+const position = /*@__PURE__*/new THREE.Vector3();
+/**
+ * Instance implementation, relies on react + context to update the attributes based on the children of this component
+ */
+
+const PointsInstances = /*#__PURE__*/React.forwardRef(({
+  children,
+  range,
+  limit = 1000,
+  ...props
+}, ref) => {
+  const parentRef = React.useRef(null);
+  const [refs, setRefs] = React.useState([]);
+  const [[positions, colors, sizes]] = React.useState(() => [new Float32Array(limit * 3), Float32Array.from({
+    length: limit * 3
+  }, () => 1), Float32Array.from({
+    length: limit
+  }, () => 1)]);
+  React.useEffect(() => {
+    // We might be a frame too late? 🤷‍♂️
+    parentRef.current.geometry.attributes.position.needsUpdate = true;
+  });
+  useFrame(() => {
+    parentRef.current.updateMatrix();
+    parentRef.current.updateMatrixWorld();
+    parentMatrix.copy(parentRef.current.matrixWorld).invert();
+    parentRef.current.geometry.drawRange.count = Math.min(limit, range !== undefined ? range : limit, refs.length);
+
+    for (i = 0; i < refs.length; i++) {
+      positionRef = refs[i].current;
+      positionRef.getWorldPosition(position).applyMatrix4(parentMatrix);
+      position.toArray(positions, i * 3);
+      parentRef.current.geometry.attributes.position.needsUpdate = true;
+      positionRef.matrixWorldNeedsUpdate = true;
+      positionRef.color.toArray(colors, i * 3);
+      parentRef.current.geometry.attributes.color.needsUpdate = true;
+      sizes.set([positionRef.size], i);
+      parentRef.current.geometry.attributes.size.needsUpdate = true;
+    }
+  });
+  const api = React.useMemo(() => ({
+    getParent: () => parentRef,
+    subscribe: ref => {
+      setRefs(refs => [...refs, ref]);
+      return () => setRefs(refs => refs.filter(item => item.current !== ref.current));
+    }
+  }), []);
+  return /*#__PURE__*/React.createElement("points", _extends({
+    userData: {
+      instances: refs
+    },
+    matrixAutoUpdate: false,
+    ref: mergeRefs([ref, parentRef]),
+    raycast: () => null
+  }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-position",
+    count: positions.length / 3,
+    array: positions,
+    itemSize: 3,
+    usage: THREE.DynamicDrawUsage
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-color",
+    count: colors.length / 3,
+    array: colors,
+    itemSize: 3,
+    usage: THREE.DynamicDrawUsage
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-size",
+    count: sizes.length,
+    array: sizes,
+    itemSize: 1,
+    usage: THREE.DynamicDrawUsage
+  })), /*#__PURE__*/React.createElement(context.Provider, {
+    value: api
+  }, children));
+});
+const Point = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  React.useMemo(() => extend({
+    PositionPoint
+  }), []);
+  const group = React.useRef();
+  const {
+    subscribe,
+    getParent
+  } = React.useContext(context);
+  React.useLayoutEffect(() => subscribe(group), []);
+  return /*#__PURE__*/React.createElement("positionPoint", _extends({
+    instance: getParent(),
+    instanceKey: group,
+    ref: mergeRefs([ref, group])
+  }, props), children);
+});
+/**
+ * Buffer implementation, relies on complete buffers of the correct number, leaves it to the user to update them
+ */
+
+const PointsBuffer = /*#__PURE__*/React.forwardRef(({
+  children,
+  positions,
+  colors,
+  sizes,
+  stride = 3,
+  ...props
+}, forwardedRef) => {
+  const pointsRef = React.useRef(null);
+  useFrame(() => {
+    const attr = pointsRef.current.geometry.attributes;
+    attr.position.needsUpdate = true;
+    if (colors) attr.color.needsUpdate = true;
+    if (sizes) attr.size.needsUpdate = true;
+  });
+  return /*#__PURE__*/React.createElement("points", _extends({
+    ref: mergeRefs([forwardedRef, pointsRef])
+  }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-position",
+    count: positions.length / stride,
+    array: positions,
+    itemSize: stride,
+    usage: THREE.DynamicDrawUsage
+  }), colors && /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-color",
+    count: colors.length / stride,
+    array: colors,
+    itemSize: 3,
+    usage: THREE.DynamicDrawUsage
+  }), sizes && /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-size",
+    count: sizes.length / stride,
+    array: sizes,
+    itemSize: 1,
+    usage: THREE.DynamicDrawUsage
+  })), children);
+});
+const Points = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+  if (props.positions instanceof Float32Array) {
+    return /*#__PURE__*/React.createElement(PointsBuffer, _extends({}, props, {
+      ref: forwardedRef
+    }));
+  } else return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
+    ref: forwardedRef
+  }));
+});
+
+export { Point, Points, PointsBuffer, PositionPoint };

package/src/core/PositionalAudio.js

@@ -0,0 +1,51 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { AudioListener, AudioLoader } from 'three';
+import { useThree, useLoader } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+
+const PositionalAudio = /*#__PURE__*/React.forwardRef(({
+  url,
+  distance = 1,
+  loop = true,
+  autoplay,
+  ...props
+}, ref) => {
+  const sound = React.useRef();
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const [listener] = React.useState(() => new AudioListener());
+  const buffer = useLoader(AudioLoader, url);
+  React.useEffect(() => {
+    const _sound = sound.current;
+
+    if (_sound) {
+      _sound.setBuffer(buffer);
+
+      _sound.setRefDistance(distance);
+
+      _sound.setLoop(loop);
+
+      if (autoplay && !_sound.isPlaying) _sound.play();
+    }
+  }, [buffer, camera, distance, loop]);
+  React.useEffect(() => {
+    const _sound = sound.current;
+    camera.add(listener);
+    return () => {
+      camera.remove(listener);
+
+      if (_sound) {
+        if (_sound.isPlaying) _sound.stop();
+        if (_sound.source && _sound.source._connected) _sound.disconnect();
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("positionalAudio", _extends({
+    ref: mergeRefs([sound, ref]),
+    args: [listener]
+  }, props));
+});
+
+export { PositionalAudio };

package/src/core/Preload.js

@@ -0,0 +1,45 @@
+import { WebGLCubeRenderTarget, CubeCamera } from 'three';
+import * as React from 'react';
+import { useThree } from '@react-three/fiber';
+
+function Preload({
+  all,
+  scene,
+  camera
+}) {
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const dCamera = useThree(({
+    camera
+  }) => camera);
+  const dScene = useThree(({
+    scene
+  }) => scene); // Layout effect because it must run before React commits
+
+  React.useLayoutEffect(() => {
+    const invisible = [];
+
+    if (all) {
+      (scene || dScene).traverse(object => {
+        if (object.visible === false) {
+          invisible.push(object);
+          object.visible = true;
+        }
+      });
+    } // Now compile the scene
+
+
+    gl.compile(scene || dScene, camera || dCamera); // And for good measure, hit it with a cube camera
+
+    const cubeRenderTarget = new WebGLCubeRenderTarget(128);
+    const cubeCamera = new CubeCamera(0.01, 100000, cubeRenderTarget);
+    cubeCamera.update(gl, scene || dScene);
+    cubeRenderTarget.dispose(); // Flips these objects back
+
+    invisible.forEach(object => object.visible = false);
+  }, []);
+  return null;
+}
+
+export { Preload };

package/src/core/QuadraticBezierLine.js

@@ -0,0 +1,44 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Vector3, QuadraticBezierCurve3 } from 'three';
+import mergeRefs from 'react-merge-refs';
+import { Line } from './Line.js';
+
+const v = new Vector3();
+const QuadraticBezierLine = /*#__PURE__*/React.forwardRef(function QuadraticBezierLine({
+  start = [0, 0, 0],
+  end = [0, 0, 0],
+  mid,
+  segments = 20,
+  ...rest
+}, forwardref) {
+  const ref = React.useRef(null);
+  const [curve] = React.useState(() => new QuadraticBezierCurve3(undefined, undefined, undefined));
+  const getPoints = React.useCallback((start, end, mid, segments = 20) => {
+    if (start instanceof Vector3) curve.v0.copy(start);else curve.v0.set(...start);
+    if (end instanceof Vector3) curve.v2.copy(end);else curve.v2.set(...end);
+
+    if (mid instanceof Vector3) {
+      curve.v1.copy(mid);
+    } else if (Array.isArray(mid)) {
+      curve.v1.set(...mid);
+    } else {
+      curve.v1.copy(curve.v0.clone().add(curve.v2.clone().sub(curve.v0)).add(v.set(0, curve.v0.y - curve.v2.y, 0)));
+    }
+
+    return curve.getPoints(segments);
+  }, []);
+  React.useLayoutEffect(() => {
+    ref.current.setPoints = (start, end, mid) => {
+      const points = getPoints(start, end, mid);
+      if (ref.current.geometry) ref.current.geometry.setPositions(points.map(p => p.toArray()).flat());
+    };
+  }, []);
+  const points = React.useMemo(() => getPoints(start, end, mid, segments), [start, end, mid, segments]);
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: mergeRefs([ref, forwardref]),
+    points: points
+  }, rest));
+});
+
+export { QuadraticBezierLine };

package/src/core/Reflector.js

@@ -0,0 +1,182 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, HalfFloatType, LinearFilter } from 'three';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import { BlurPass } from '../materials/BlurPass.js';
+import { MeshReflectorMaterial } from '../materials/MeshReflectorMaterial.js';
+
+extend({
+  MeshReflectorMaterial
+});
+/**
+ * @deprecated Use MeshReflectorMaterial instead
+ */
+
+const Reflector = /*#__PURE__*/React.forwardRef(({
+  mixBlur = 0,
+  mixStrength = 0.5,
+  resolution = 256,
+  blur = [0, 0],
+  args = [1, 1],
+  minDepthThreshold = 0.9,
+  maxDepthThreshold = 1,
+  depthScale = 0,
+  depthToBlurRatioBias = 0.25,
+  mirror = 0,
+  children,
+  debug = 0,
+  distortion = 1,
+  mixContrast = 1,
+  distortionMap,
+  ...props
+}, ref) => {
+  React.useEffect(() => {
+    console.warn('Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!');
+  }, []);
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const scene = useThree(({
+    scene
+  }) => scene);
+  blur = Array.isArray(blur) ? blur : [blur, blur];
+  const hasBlur = blur[0] + blur[1] > 0;
+  const meshRef = React.useRef(null);
+  const [reflectorPlane] = React.useState(() => new Plane());
+  const [normal] = React.useState(() => new Vector3());
+  const [reflectorWorldPosition] = React.useState(() => new Vector3());
+  const [cameraWorldPosition] = React.useState(() => new Vector3());
+  const [rotationMatrix] = React.useState(() => new Matrix4());
+  const [lookAtPosition] = React.useState(() => new Vector3(0, 0, -1));
+  const [clipPlane] = React.useState(() => new Vector4());
+  const [view] = React.useState(() => new Vector3());
+  const [target] = React.useState(() => new Vector3());
+  const [q] = React.useState(() => new Vector4());
+  const [textureMatrix] = React.useState(() => new Matrix4());
+  const [virtualCamera] = React.useState(() => new PerspectiveCamera());
+  const beforeRender = React.useCallback(() => {
+    reflectorWorldPosition.setFromMatrixPosition(meshRef.current.matrixWorld);
+    cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+    rotationMatrix.extractRotation(meshRef.current.matrixWorld);
+    normal.set(0, 0, 1);
+    normal.applyMatrix4(rotationMatrix);
+    view.subVectors(reflectorWorldPosition, cameraWorldPosition); // Avoid rendering when reflector is facing away
+
+    if (view.dot(normal) > 0) return;
+    view.reflect(normal).negate();
+    view.add(reflectorWorldPosition);
+    rotationMatrix.extractRotation(camera.matrixWorld);
+    lookAtPosition.set(0, 0, -1);
+    lookAtPosition.applyMatrix4(rotationMatrix);
+    lookAtPosition.add(cameraWorldPosition);
+    target.subVectors(reflectorWorldPosition, lookAtPosition);
+    target.reflect(normal).negate();
+    target.add(reflectorWorldPosition);
+    virtualCamera.position.copy(view);
+    virtualCamera.up.set(0, 1, 0);
+    virtualCamera.up.applyMatrix4(rotationMatrix);
+    virtualCamera.up.reflect(normal);
+    virtualCamera.lookAt(target);
+    virtualCamera.far = camera.far; // Used in WebGLBackground
+
+    virtualCamera.updateMatrixWorld();
+    virtualCamera.projectionMatrix.copy(camera.projectionMatrix); // Update the texture matrix
+
+    textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+    textureMatrix.multiply(virtualCamera.projectionMatrix);
+    textureMatrix.multiply(virtualCamera.matrixWorldInverse);
+    textureMatrix.multiply(meshRef.current.matrixWorld); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+    // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+
+    reflectorPlane.setFromNormalAndCoplanarPoint(normal, reflectorWorldPosition);
+    reflectorPlane.applyMatrix4(virtualCamera.matrixWorldInverse);
+    clipPlane.set(reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant);
+    const projectionMatrix = virtualCamera.projectionMatrix;
+    q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+    q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+    q.z = -1.0;
+    q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
+
+    clipPlane.multiplyScalar(2.0 / clipPlane.dot(q)); // Replacing the third row of the projection matrix
+
+    projectionMatrix.elements[2] = clipPlane.x;
+    projectionMatrix.elements[6] = clipPlane.y;
+    projectionMatrix.elements[10] = clipPlane.z + 1.0;
+    projectionMatrix.elements[14] = clipPlane.w;
+  }, []);
+  const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
+    const parameters = {
+      type: HalfFloatType,
+      minFilter: LinearFilter,
+      magFilter: LinearFilter
+    };
+    const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
+    fbo1.depthBuffer = true;
+    fbo1.depthTexture = new DepthTexture(resolution, resolution);
+    fbo1.depthTexture.format = DepthFormat;
+    fbo1.depthTexture.type = UnsignedShortType;
+    const fbo2 = new WebGLRenderTarget(resolution, resolution, parameters);
+    const blurpass = new BlurPass({
+      gl,
+      resolution,
+      width: blur[0],
+      height: blur[1],
+      minDepthThreshold,
+      maxDepthThreshold,
+      depthScale,
+      depthToBlurRatioBias
+    });
+    const reflectorProps = {
+      mirror,
+      textureMatrix,
+      mixBlur,
+      tDiffuse: fbo1.texture,
+      tDepth: fbo1.depthTexture,
+      tDiffuseBlur: fbo2.texture,
+      hasBlur,
+      mixStrength,
+      minDepthThreshold,
+      maxDepthThreshold,
+      depthScale,
+      depthToBlurRatioBias,
+      transparent: true,
+      debug,
+      distortion,
+      distortionMap,
+      mixContrast,
+      'defines-USE_BLUR': hasBlur ? '' : undefined,
+      'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
+      'defines-USE_DISTORTION': distortionMap ? '' : undefined
+    };
+    return [fbo1, fbo2, blurpass, reflectorProps];
+  }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap, mixContrast]);
+  useFrame(() => {
+    if (!(meshRef != null && meshRef.current)) return;
+    meshRef.current.visible = false;
+    const currentXrEnabled = gl.xr.enabled;
+    const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
+    beforeRender();
+    gl.xr.enabled = false;
+    gl.shadowMap.autoUpdate = false;
+    gl.setRenderTarget(fbo1);
+    gl.state.buffers.depth.setMask(true);
+    if (!gl.autoClear) gl.clear();
+    gl.render(scene, virtualCamera);
+    if (hasBlur) blurpass.render(gl, fbo1, fbo2);
+    gl.xr.enabled = currentXrEnabled;
+    gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
+    meshRef.current.visible = true;
+    gl.setRenderTarget(null);
+  });
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: mergeRefs([meshRef, ref])
+  }, props), /*#__PURE__*/React.createElement("planeGeometry", {
+    args: args
+  }), children ? children('meshReflectorMaterial', reflectorProps) : /*#__PURE__*/React.createElement("meshReflectorMaterial", reflectorProps));
+});
+
+export { Reflector };

package/src/core/RenderTexture.js

@@ -0,0 +1,96 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { useThree, createPortal, useFrame } from '@react-three/fiber';
+import { useFBO } from './useFBO.js';
+
+const RenderTexture = /*#__PURE__*/React.forwardRef(({
+  children,
+  compute,
+  width,
+  height,
+  samples = 8,
+  renderPriority = 0,
+  eventPriority = 0,
+  frames = Infinity,
+  stencilBuffer = false,
+  depthBuffer = true,
+  generateMipmaps = false,
+  ...props
+}, forwardRef) => {
+  const {
+    size,
+    viewport
+  } = useThree();
+  const fbo = useFBO((width || size.width) * viewport.dpr, (height || size.height) * viewport.dpr, {
+    samples,
+    stencilBuffer,
+    depthBuffer,
+    generateMipmaps
+  });
+  const [vScene] = React.useState(() => new THREE.Scene());
+  const uvCompute = React.useCallback((event, state, previous) => {
+    var _fbo$texture, _previous$previousRoo;
+
+    // Since this is only a texture it does not have an easy way to obtain the parent, which we
+    // need to transform event coordinates to local coordinates. We use r3f internals to find the
+    // next Object3D.
+    let parent = (_fbo$texture = fbo.texture) == null ? void 0 : _fbo$texture.__r3f.parent;
+
+    while (parent && !(parent instanceof THREE.Object3D)) {
+      parent = parent.__r3f.parent;
+    }
+
+    if (!parent) return false; // First we call the previous state-onion-layers compute, this is what makes it possible to nest portals
+
+    if (!previous.raycaster.camera) previous.events.compute(event, previous, (_previous$previousRoo = previous.previousRoot) == null ? void 0 : _previous$previousRoo.getState()); // We run a quick check against the parent, if it isn't hit there's no need to raycast at all
+
+    const [intersection] = previous.raycaster.intersectObject(parent);
+    if (!intersection) return false; // We take that hits uv coords, set up this layers raycaster, et voilà, we have raycasting on arbitrary surfaces
+
+    const uv = intersection.uv;
+    if (!uv) return false;
+    state.raycaster.setFromCamera(state.pointer.set(uv.x * 2 - 1, uv.y * 2 - 1), state.camera);
+  }, []);
+  React.useImperativeHandle(forwardRef, () => fbo.texture, [fbo]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal( /*#__PURE__*/React.createElement(Container, {
+    renderPriority: renderPriority,
+    frames: frames,
+    fbo: fbo
+  }, children, /*#__PURE__*/React.createElement("group", {
+    onPointerOver: () => null
+  })), vScene, {
+    events: {
+      compute: compute || uvCompute,
+      priority: eventPriority
+    }
+  }), /*#__PURE__*/React.createElement("primitive", _extends({
+    object: fbo.texture
+  }, props)));
+}); // The container component has to be separate, it can not be inlined because "useFrame(state" when run inside createPortal will return
+// the portals own state which includes user-land overrides (custom cameras etc), but if it is executed in <RenderTexture>'s render function
+// it would return the default state.
+
+function Container({
+  frames,
+  renderPriority,
+  children,
+  fbo
+}) {
+  let count = 0;
+  let oldAutoClear;
+  useFrame(state => {
+    if (frames === Infinity || count < frames) {
+      oldAutoClear = state.gl.autoClear;
+      state.gl.autoClear = true;
+      state.gl.setRenderTarget(fbo);
+      state.gl.render(state.scene, state.camera);
+      state.gl.setRenderTarget(null);
+      state.gl.autoClear = oldAutoClear;
+      count++;
+    }
+  }, renderPriority);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
+export { RenderTexture };

package/src/core/Resize.js

@@ -0,0 +1,39 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+
+const Resize = /*#__PURE__*/React.forwardRef(({
+  children,
+  width,
+  height,
+  depth,
+  box3,
+  precise = true,
+  ...props
+}, fRef) => {
+  const ref = React.useRef(null);
+  const outer = React.useRef(null);
+  const inner = React.useRef(null);
+  React.useLayoutEffect(() => {
+    outer.current.matrixWorld.identity();
+    let box = box3 || new THREE.Box3().setFromObject(inner.current, precise);
+    const w = box.max.x - box.min.x;
+    const h = box.max.y - box.min.y;
+    const d = box.max.z - box.min.z;
+    let dimension = Math.max(w, h, d);
+    if (width) dimension = w;
+    if (height) dimension = h;
+    if (depth) dimension = d;
+    outer.current.scale.setScalar(1 / dimension);
+  }, [width, height, depth, box3, precise]);
+  React.useImperativeHandle(fRef, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement("group", {
+    ref: outer
+  }, /*#__PURE__*/React.createElement("group", {
+    ref: inner
+  }, children)));
+});
+
+export { Resize };