@ohos-ports/react-three-drei 10.7.7-beta.0

package/core/Cloud.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Color, Group, Vector3, Material, MeshLambertMaterial, Matrix4 } from 'three';
+import { ReactThreeFiber, ThreeElement, ThreeElements } from '@react-three/fiber';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        cloudMaterial: ThreeElement<typeof MeshLambertMaterial>;
+    }
+}
+type CloudState = {
+    uuid: string;
+    index: number;
+    segments: number;
+    dist: number;
+    matrix: Matrix4;
+    bounds: Vector3;
+    position: Vector3;
+    volume: number;
+    length: number;
+    ref: React.RefObject<Group>;
+    speed: number;
+    growth: number;
+    opacity: number;
+    fade: number;
+    density: number;
+    rotation: number;
+    rotationFactor: number;
+    color: Color;
+};
+export type CloudsProps = Omit<ThreeElements['group'], 'ref'> & {
+    texture?: string;
+    limit?: number;
+    range?: number;
+    material?: typeof Material;
+    frustumCulled?: boolean;
+};
+export type CloudProps = Omit<ThreeElements['group'], 'ref'> & {
+    seed?: number;
+    segments?: number;
+    bounds?: ReactThreeFiber.Vector3;
+    concentrate?: 'random' | 'inside' | 'outside';
+    scale?: ReactThreeFiber.Vector3;
+    volume?: number;
+    smallestVolume?: number;
+    distribute?: (cloud: CloudState, index: number) => {
+        point: Vector3;
+        volume?: number;
+    };
+    growth?: number;
+    speed?: number;
+    fade?: number;
+    opacity?: number;
+    color?: ReactThreeFiber.Color;
+};
+export declare const Clouds: React.ForwardRefExoticComponent<Omit<import("@react-three/fiber/dist/declarations/src/core/utils").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Group<import("three").Object3DEventMap>, ReactThreeFiber.MathProps<Group<import("three").Object3DEventMap>> & ReactThreeFiber.ReactProps<Group<import("three").Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<Group<import("three").Object3DEventMap>, typeof Group>, "object">>>, "ref"> & {
+    texture?: string;
+    limit?: number;
+    range?: number;
+    material?: typeof Material;
+    frustumCulled?: boolean;
+} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
+export declare const CloudInstance: React.ForwardRefExoticComponent<Omit<import("@react-three/fiber/dist/declarations/src/core/utils").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Group<import("three").Object3DEventMap>, ReactThreeFiber.MathProps<Group<import("three").Object3DEventMap>> & ReactThreeFiber.ReactProps<Group<import("three").Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<Group<import("three").Object3DEventMap>, typeof Group>, "object">>>, "ref"> & {
+    seed?: number;
+    segments?: number;
+    bounds?: ReactThreeFiber.Vector3;
+    concentrate?: "random" | "inside" | "outside";
+    scale?: ReactThreeFiber.Vector3;
+    volume?: number;
+    smallestVolume?: number;
+    distribute?: (cloud: CloudState, index: number) => {
+        point: Vector3;
+        volume?: number;
+    };
+    growth?: number;
+    speed?: number;
+    fade?: number;
+    opacity?: number;
+    color?: ReactThreeFiber.Color;
+} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
+export declare const Cloud: React.ForwardRefExoticComponent<Omit<import("@react-three/fiber/dist/declarations/src/core/utils").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Group<import("three").Object3DEventMap>, ReactThreeFiber.MathProps<Group<import("three").Object3DEventMap>> & ReactThreeFiber.ReactProps<Group<import("three").Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<Group<import("three").Object3DEventMap>, typeof Group>, "object">>>, "ref"> & {
+    seed?: number;
+    segments?: number;
+    bounds?: ReactThreeFiber.Vector3;
+    concentrate?: "random" | "inside" | "outside";
+    scale?: ReactThreeFiber.Vector3;
+    volume?: number;
+    smallestVolume?: number;
+    distribute?: (cloud: CloudState, index: number) => {
+        point: Vector3;
+        volume?: number;
+    };
+    growth?: number;
+    speed?: number;
+    fade?: number;
+    opacity?: number;
+    color?: ReactThreeFiber.Color;
+} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
+export {};

package/core/Cloud.js

@@ -0,0 +1,231 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { REVISION, Quaternion, Vector3, DynamicDrawUsage, MeshLambertMaterial, Matrix4, Color } from 'three';
+import { extend, useFrame, applyProps } from '@react-three/fiber';
+import { useTexture } from './Texture.js';
+import { setUpdateRange } from '../helpers/deprecated.js';
+
+const CLOUD_URL = 'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png';
+const parentMatrix = /* @__PURE__ */new Matrix4();
+const translation = /* @__PURE__ */new Vector3();
+const rotation = /* @__PURE__ */new Quaternion();
+const cpos = /* @__PURE__ */new Vector3();
+const cquat = /* @__PURE__ */new Quaternion();
+const scale = /* @__PURE__ */new Vector3();
+const context = /* @__PURE__ */React.createContext(null);
+const Clouds = /* @__PURE__ */React.forwardRef(({
+  children,
+  material = MeshLambertMaterial,
+  texture = CLOUD_URL,
+  range,
+  limit = 200,
+  frustumCulled,
+  ...props
+}, fref) => {
+  var _image$width, _image$height;
+  const CloudMaterial = React.useMemo(() => {
+    return class extends material {
+      constructor() {
+        super();
+        const opaque_fragment = parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment';
+        this.onBeforeCompile = shader => {
+          shader.vertexShader = `attribute float cloudOpacity;
+               varying float vOpacity;
+              ` + shader.vertexShader.replace('#include <fog_vertex>', `#include <fog_vertex>
+                 vOpacity = cloudOpacity;
+                `);
+          shader.fragmentShader = `varying float vOpacity;
+              ` + shader.fragmentShader.replace(`#include <${opaque_fragment}>`, `#include <${opaque_fragment}>
+                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);
+                `);
+        };
+      }
+    };
+  }, [material]);
+  extend({
+    CloudMaterial
+  });
+  const instance = React.useRef(null);
+  const clouds = React.useRef([]);
+  const opacities = React.useMemo(() => new Float32Array(Array.from({
+    length: limit
+  }, () => 1)), [limit]);
+  const colors = React.useMemo(() => new Float32Array(Array.from({
+    length: limit
+  }, () => [1, 1, 1]).flat()), [limit]);
+  const cloudTexture = useTexture(texture);
+  let t = 0;
+  let index = 0;
+  let config;
+  const qat = new Quaternion();
+  const dir = new Vector3(0, 0, 1);
+  const pos = new Vector3();
+  useFrame((state, delta) => {
+    t = state.clock.elapsedTime;
+    parentMatrix.copy(instance.current.matrixWorld).invert();
+    state.camera.matrixWorld.decompose(cpos, cquat, scale);
+    for (index = 0; index < clouds.current.length; index++) {
+      config = clouds.current[index];
+      config.ref.current.matrixWorld.decompose(translation, rotation, scale);
+      translation.add(pos.copy(config.position).applyQuaternion(rotation).multiply(scale));
+      rotation.copy(cquat).multiply(qat.setFromAxisAngle(dir, config.rotation += delta * config.rotationFactor));
+      scale.multiplyScalar(config.volume + (1 + Math.sin(t * config.density * config.speed)) / 2 * config.growth);
+      config.matrix.compose(translation, rotation, scale).premultiply(parentMatrix);
+      config.dist = translation.distanceTo(cpos);
+    }
+
+    // Depth-sort. Instances have no specific draw order, w/o sorting z would be random
+    clouds.current.sort((a, b) => b.dist - a.dist);
+    for (index = 0; index < clouds.current.length; index++) {
+      config = clouds.current[index];
+      opacities[index] = config.opacity * (config.dist < config.fade - 1 ? config.dist / config.fade : 1);
+      instance.current.setMatrixAt(index, config.matrix);
+      instance.current.setColorAt(index, config.color);
+    }
+
+    // Update instance
+    instance.current.geometry.attributes.cloudOpacity.needsUpdate = true;
+    instance.current.instanceMatrix.needsUpdate = true;
+    if (instance.current.instanceColor) instance.current.instanceColor.needsUpdate = true;
+  });
+  React.useLayoutEffect(() => {
+    const count = Math.min(limit, range !== undefined ? range : limit, clouds.current.length);
+    instance.current.count = count;
+    setUpdateRange(instance.current.instanceMatrix, {
+      start: 0,
+      count: count * 16
+    });
+    if (instance.current.instanceColor) {
+      setUpdateRange(instance.current.instanceColor, {
+        start: 0,
+        count: count * 3
+      });
+    }
+    setUpdateRange(instance.current.geometry.attributes.cloudOpacity, {
+      start: 0,
+      count: count
+    });
+  });
+  let imageBounds = [(_image$width = cloudTexture.image.width) !== null && _image$width !== void 0 ? _image$width : 1, (_image$height = cloudTexture.image.height) !== null && _image$height !== void 0 ? _image$height : 1];
+  const max = Math.max(imageBounds[0], imageBounds[1]);
+  imageBounds = [imageBounds[0] / max, imageBounds[1] / max];
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: fref
+  }, props), /*#__PURE__*/React.createElement(context.Provider, {
+    value: clouds
+  }, children, /*#__PURE__*/React.createElement("instancedMesh", {
+    matrixAutoUpdate: false,
+    ref: instance,
+    args: [null, null, limit],
+    frustumCulled: frustumCulled
+  }, /*#__PURE__*/React.createElement("instancedBufferAttribute", {
+    usage: DynamicDrawUsage,
+    attach: "instanceColor",
+    args: [colors, 3]
+  }), /*#__PURE__*/React.createElement("planeGeometry", {
+    args: [...imageBounds]
+  }, /*#__PURE__*/React.createElement("instancedBufferAttribute", {
+    usage: DynamicDrawUsage,
+    attach: "attributes-cloudOpacity",
+    args: [opacities, 1]
+  })), /*#__PURE__*/React.createElement("cloudMaterial", {
+    key: material.name,
+    map: cloudTexture,
+    transparent: true,
+    depthWrite: false
+  }))));
+});
+const CloudInstance = /* @__PURE__ */React.forwardRef(({
+  opacity = 1,
+  speed = 0,
+  bounds = [5, 1, 1],
+  segments = 20,
+  color = '#ffffff',
+  fade = 10,
+  volume = 6,
+  smallestVolume = 0.25,
+  distribute = null,
+  growth = 4,
+  concentrate = 'inside',
+  seed = Math.random(),
+  ...props
+}, fref) => {
+  function random() {
+    const x = Math.sin(seed++) * 10000;
+    return x - Math.floor(x);
+  }
+  const parent = React.useContext(context);
+  const ref = React.useRef(null);
+  const uuid = React.useId();
+  const clouds = React.useMemo(() => {
+    return [...new Array(segments)].map((_, index) => ({
+      segments,
+      bounds: new Vector3(1, 1, 1),
+      position: new Vector3(),
+      uuid,
+      index,
+      ref,
+      dist: 0,
+      matrix: new Matrix4(),
+      color: new Color(),
+      rotation: index * (Math.PI / segments)
+    }));
+  }, [segments, uuid]);
+  React.useLayoutEffect(() => {
+    clouds.forEach((cloud, index) => {
+      applyProps(cloud, {
+        volume,
+        color,
+        speed,
+        growth,
+        opacity,
+        fade,
+        bounds,
+        density: Math.max(0.5, random()),
+        rotationFactor: Math.max(0.2, 0.5 * random()) * speed
+      });
+      // Only distribute randomly if there are multiple segments
+
+      const distributed = distribute == null ? void 0 : distribute(cloud, index);
+      if (distributed || segments > 1) {
+        var _distributed$point;
+        cloud.position.copy(cloud.bounds).multiply((_distributed$point = distributed == null ? void 0 : distributed.point) !== null && _distributed$point !== void 0 ? _distributed$point : {
+          x: random() * 2 - 1,
+          y: random() * 2 - 1,
+          z: random() * 2 - 1
+        });
+      }
+      const xDiff = Math.abs(cloud.position.x);
+      const yDiff = Math.abs(cloud.position.y);
+      const zDiff = Math.abs(cloud.position.z);
+      const max = Math.max(xDiff, yDiff, zDiff);
+      cloud.length = 1;
+      if (xDiff === max) cloud.length -= xDiff / cloud.bounds.x;
+      if (yDiff === max) cloud.length -= yDiff / cloud.bounds.y;
+      if (zDiff === max) cloud.length -= zDiff / cloud.bounds.z;
+      cloud.volume = ((distributed == null ? void 0 : distributed.volume) !== undefined ? distributed.volume : Math.max(Math.max(0, smallestVolume), concentrate === 'random' ? random() : concentrate === 'inside' ? cloud.length : 1 - cloud.length)) * volume;
+    });
+  }, [concentrate, bounds, fade, color, opacity, growth, volume, seed, segments, speed]);
+  React.useLayoutEffect(() => {
+    const temp = clouds;
+    parent.current = [...parent.current, ...temp];
+    return () => {
+      parent.current = parent.current.filter(item => item.uuid !== uuid);
+    };
+  }, [clouds]);
+  React.useImperativeHandle(fref, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props));
+});
+const Cloud = /* @__PURE__ */React.forwardRef((props, fref) => {
+  const parent = React.useContext(context);
+  if (parent) return /*#__PURE__*/React.createElement(CloudInstance, _extends({
+    ref: fref
+  }, props));
+  return /*#__PURE__*/React.createElement(Clouds, null, /*#__PURE__*/React.createElement(CloudInstance, _extends({
+    ref: fref
+  }, props)));
+});
+
+export { Cloud, CloudInstance, Clouds };

package/core/ComputedAttribute.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,u.get?u:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(e),a=n(t);exports.ComputedAttribute=({compute:e,name:t,...u})=>{const[n]=a.useState((()=>new r.BufferAttribute(new Float32Array(0),1))),o=a.useRef(null);return a.useLayoutEffect((()=>{if(o.current){var t;const r=null!==(t=o.current.parent)&&void 0!==t?t:o.current.__r3f.parent.object,u=e(r);o.current.copy(u)}}),[e]),a.createElement("primitive",c.default({ref:o,object:n,attach:`attributes-${t}`},u))};

package/core/ComputedAttribute.d.ts

@@ -0,0 +1,8 @@
+import { ThreeElements } from '@react-three/fiber';
+import * as React from 'react';
+import { BufferAttribute, BufferGeometry } from 'three';
+export type ComputedAttributeProps = Omit<ThreeElements['bufferAttribute'], 'args'> & {
+    compute: (geometry: BufferGeometry) => BufferAttribute;
+    name: string;
+};
+export declare const ComputedAttribute: ({ compute, name, ...props }: ComputedAttributeProps) => React.JSX.Element;

package/core/ComputedAttribute.js

@@ -0,0 +1,33 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { BufferAttribute } from 'three';
+
+/**
+ * Used exclusively as a child of a BufferGeometry.
+ * Computes the BufferAttribute by calling the `compute` function
+ * and attaches the attribute to the geometry.
+ */
+const ComputedAttribute = ({
+  compute,
+  name,
+  ...props
+}) => {
+  const [bufferAttribute] = React.useState(() => new BufferAttribute(new Float32Array(0), 1));
+  const primitive = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (primitive.current) {
+      var _ref;
+      // @ts-expect-error brittle
+      const parent = (_ref = primitive.current.parent) !== null && _ref !== void 0 ? _ref : primitive.current.__r3f.parent.object;
+      const attr = compute(parent);
+      primitive.current.copy(attr);
+    }
+  }, [compute]);
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: primitive,
+    object: bufferAttribute,
+    attach: `attributes-${name}`
+  }, props));
+};
+
+export { ComputedAttribute };

package/core/ContactShadows.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=o(e),l=u(r),s=u(t);const c=l.forwardRef((({scale:e=10,frames:r=1/0,opacity:t=1,width:o=1,height:u=1,blur:c=1,near:d=0,far:f=10,resolution:h=512,smooth:m=!0,color:p="#000000",depthWrite:g=!1,renderOrder:v,...b},M)=>{const y=l.useRef(null),w=a.useThree((e=>e.scene)),T=a.useThree((e=>e.gl)),x=l.useRef(null);o*=Array.isArray(e)?e[0]:e||1,u*=Array.isArray(e)?e[1]:e||1;const[O,R,S,j,C,P,q]=l.useMemo((()=>{const e=new s.WebGLRenderTarget(h,h),r=new s.WebGLRenderTarget(h,h);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new s.PlaneGeometry(o,u).rotateX(Math.PI/2),a=new s.Mesh(t),i=new s.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>{e.uniforms={...e.uniforms,ucolor:{value:new s.Color(p)}},e.fragmentShader=e.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           void main() {\n          "),e.fragmentShader=e.fragmentShader.replace("vec4( vec3( 1.0 - fragCoordZ ), opacity );","vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );")};const l=new s.ShaderMaterial(n.HorizontalBlurShader),c=new s.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=l.depthTest=!1,[e,t,i,a,l,c,r]}),[h,o,u,e,p]),E=e=>{j.visible=!0,j.material=C,C.uniforms.tDiffuse.value=O.texture,C.uniforms.h.value=1*e/256,T.setRenderTarget(q),T.render(j,x.current),j.material=P,P.uniforms.tDiffuse.value=q.texture,P.uniforms.v.value=1*e/256,T.setRenderTarget(O),T.render(j,x.current),j.visible=!1};let W,k,A=0;return a.useFrame((()=>{x.current&&(r===1/0||A<r)&&(A++,W=w.background,k=w.overrideMaterial,y.current.visible=!1,w.background=null,w.overrideMaterial=S,T.setRenderTarget(O),T.render(w,x.current),E(c),m&&E(.4*c),T.setRenderTarget(null),y.current.visible=!0,w.overrideMaterial=k,w.background=W)})),l.useImperativeHandle(M,(()=>y.current),[]),l.createElement("group",i.default({"rotation-x":Math.PI/2},b,{ref:y}),l.createElement("mesh",{renderOrder:v,geometry:R,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},l.createElement("meshBasicMaterial",{transparent:!0,map:O.texture,opacity:t,depthWrite:g})),l.createElement("orthographicCamera",{ref:x,args:[-o/2,o/2,u/2,-u/2,d,f]}))}));exports.ContactShadows=c;

package/core/ContactShadows.d.ts

@@ -0,0 +1,18 @@
+import * as THREE from 'three';
+import { ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type ContactShadowsProps = Omit<ThreeElements['group'], 'ref' | 'scale'> & {
+    opacity?: number;
+    width?: number;
+    height?: number;
+    blur?: number;
+    near?: number;
+    far?: number;
+    smooth?: boolean;
+    resolution?: number;
+    frames?: number;
+    scale?: number | [x: number, y: number];
+    color?: THREE.ColorRepresentation;
+    depthWrite?: boolean;
+};
+export declare const ContactShadows: ForwardRefComponent<ContactShadowsProps, THREE.Group>;

package/core/ContactShadows.js

@@ -0,0 +1,114 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+import { HorizontalBlurShader, VerticalBlurShader } from 'three-stdlib';
+
+const ContactShadows = /* @__PURE__ */React.forwardRef(({
+  scale = 10,
+  frames = Infinity,
+  opacity = 1,
+  width = 1,
+  height = 1,
+  blur = 1,
+  near = 0,
+  far = 10,
+  resolution = 512,
+  smooth = true,
+  color = '#000000',
+  depthWrite = false,
+  renderOrder,
+  ...props
+}, fref) => {
+  const ref = React.useRef(null);
+  const scene = useThree(state => state.scene);
+  const gl = useThree(state => state.gl);
+  const shadowCamera = React.useRef(null);
+  width = width * (Array.isArray(scale) ? scale[0] : scale || 1);
+  height = height * (Array.isArray(scale) ? scale[1] : scale || 1);
+  const [renderTarget, planeGeometry, depthMaterial, blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur] = React.useMemo(() => {
+    const renderTarget = new THREE.WebGLRenderTarget(resolution, resolution);
+    const renderTargetBlur = new THREE.WebGLRenderTarget(resolution, resolution);
+    renderTargetBlur.texture.generateMipmaps = renderTarget.texture.generateMipmaps = false;
+    const planeGeometry = new THREE.PlaneGeometry(width, height).rotateX(Math.PI / 2);
+    const blurPlane = new THREE.Mesh(planeGeometry);
+    const depthMaterial = new THREE.MeshDepthMaterial();
+    depthMaterial.depthTest = depthMaterial.depthWrite = false;
+    depthMaterial.onBeforeCompile = shader => {
+      shader.uniforms = {
+        ...shader.uniforms,
+        ucolor: {
+          value: new THREE.Color(color)
+        }
+      };
+      shader.fragmentShader = shader.fragmentShader.replace(`void main() {`,
+      //
+      `uniform vec3 ucolor;
+           void main() {
+          `);
+      shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );',
+      // Colorize the shadow, multiply by the falloff so that the center can remain darker
+      'vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );');
+    };
+    const horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader);
+    const verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader);
+    verticalBlurMaterial.depthTest = horizontalBlurMaterial.depthTest = false;
+    return [renderTarget, planeGeometry, depthMaterial, blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur];
+  }, [resolution, width, height, scale, color]);
+  const blurShadows = blur => {
+    blurPlane.visible = true;
+    blurPlane.material = horizontalBlurMaterial;
+    horizontalBlurMaterial.uniforms.tDiffuse.value = renderTarget.texture;
+    horizontalBlurMaterial.uniforms.h.value = blur * 1 / 256;
+    gl.setRenderTarget(renderTargetBlur);
+    gl.render(blurPlane, shadowCamera.current);
+    blurPlane.material = verticalBlurMaterial;
+    verticalBlurMaterial.uniforms.tDiffuse.value = renderTargetBlur.texture;
+    verticalBlurMaterial.uniforms.v.value = blur * 1 / 256;
+    gl.setRenderTarget(renderTarget);
+    gl.render(blurPlane, shadowCamera.current);
+    blurPlane.visible = false;
+  };
+  let count = 0;
+  let initialBackground;
+  let initialOverrideMaterial;
+  useFrame(() => {
+    if (shadowCamera.current && (frames === Infinity || count < frames)) {
+      count++;
+      initialBackground = scene.background;
+      initialOverrideMaterial = scene.overrideMaterial;
+      ref.current.visible = false;
+      scene.background = null;
+      scene.overrideMaterial = depthMaterial;
+      gl.setRenderTarget(renderTarget);
+      gl.render(scene, shadowCamera.current);
+      blurShadows(blur);
+      if (smooth) blurShadows(blur * 0.4);
+      gl.setRenderTarget(null);
+      ref.current.visible = true;
+      scene.overrideMaterial = initialOverrideMaterial;
+      scene.background = initialBackground;
+    }
+  });
+  React.useImperativeHandle(fref, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    "rotation-x": Math.PI / 2
+  }, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("mesh", {
+    renderOrder: renderOrder,
+    geometry: planeGeometry,
+    scale: [1, -1, 1],
+    rotation: [-Math.PI / 2, 0, 0]
+  }, /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    map: renderTarget.texture,
+    opacity: opacity,
+    depthWrite: depthWrite
+  })), /*#__PURE__*/React.createElement("orthographicCamera", {
+    ref: shadowCamera,
+    args: [-width / 2, width / 2, height / 2, -height / 2, near, far]
+  }));
+});
+
+export { ContactShadows };

package/core/CubeCamera.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=u(e),a=u(r);function o({resolution:u=256,near:o=.1,far:c=1e3,envMap:s,fog:f}={}){const i=t.useThree((({gl:e})=>e)),l=t.useThree((({scene:e})=>e)),b=r.useMemo((()=>{const r=new e.WebGLCubeRenderTarget(u);return r.texture.type=e.HalfFloatType,r}),[u]);r.useEffect((()=>()=>{b.dispose()}),[b]);const p=r.useMemo((()=>new n.CubeCamera(o,c,b)),[o,c,b]);let d,g;const m=a.useCallback((()=>{d=l.fog,g=l.background,l.background=s||g,l.fog=f||d,p.update(i,l),l.fog=d,l.background=g}),[i,l,p]);return{fbo:b,camera:p,update:m}}exports.CubeCamera=function({children:e,frames:r=1/0,resolution:u,near:n,far:c,envMap:s,fog:f,...i}){const l=a.useRef(null),{fbo:b,camera:p,update:d}=o({resolution:u,near:n,far:c,envMap:s,fog:f});let g=0;return t.useFrame((()=>{l.current&&(r===1/0||g<r)&&(l.current.visible=!1,d(),l.current.visible=!0,g++)})),a.createElement("group",i,a.createElement("primitive",{object:p}),a.createElement("group",{ref:l},null==e?void 0:e(b.texture)))},exports.useCubeCamera=o;

package/core/CubeCamera.d.ts

@@ -0,0 +1,21 @@
+import * as THREE from 'three';
+import { Fog, FogExp2, Texture } from 'three';
+import * as React from 'react';
+import { ThreeElements } from '@react-three/fiber';
+export type CubeCameraOptions = {
+    resolution?: number;
+    near?: number;
+    far?: number;
+    envMap?: THREE.Texture;
+    fog?: Fog | FogExp2;
+};
+export declare function useCubeCamera({ resolution, near, far, envMap, fog }?: CubeCameraOptions): {
+    fbo: THREE.WebGLCubeRenderTarget;
+    camera: THREE.CubeCamera;
+    update: () => void;
+};
+export type CubeCameraProps = Omit<ThreeElements['group'], 'children'> & {
+    children?: (tex: Texture) => React.ReactNode;
+    frames?: number;
+} & CubeCameraOptions;
+export declare function CubeCamera({ children, frames, resolution, near, far, envMap, fog, ...props }: CubeCameraProps): React.JSX.Element;

package/core/CubeCamera.js

@@ -0,0 +1,86 @@
+import * as THREE from 'three';
+import { WebGLCubeRenderTarget, HalfFloatType } from 'three';
+import * as React from 'react';
+import { useMemo, useEffect } from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+
+function useCubeCamera({
+  resolution = 256,
+  near = 0.1,
+  far = 1000,
+  envMap,
+  fog
+} = {}) {
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const scene = useThree(({
+    scene
+  }) => scene);
+  const fbo = useMemo(() => {
+    const fbo = new WebGLCubeRenderTarget(resolution);
+    fbo.texture.type = HalfFloatType;
+    return fbo;
+  }, [resolution]);
+  useEffect(() => {
+    return () => {
+      fbo.dispose();
+    };
+  }, [fbo]);
+  const camera = useMemo(() => new THREE.CubeCamera(near, far, fbo), [near, far, fbo]);
+  let originalFog;
+  let originalBackground;
+  const update = React.useCallback(() => {
+    originalFog = scene.fog;
+    originalBackground = scene.background;
+    scene.background = envMap || originalBackground;
+    scene.fog = fog || originalFog;
+    camera.update(gl, scene);
+    scene.fog = originalFog;
+    scene.background = originalBackground;
+  }, [gl, scene, camera]);
+  return {
+    fbo,
+    camera,
+    update
+  };
+}
+function CubeCamera({
+  children,
+  frames = Infinity,
+  resolution,
+  near,
+  far,
+  envMap,
+  fog,
+  ...props
+}) {
+  const ref = React.useRef(null);
+  const {
+    fbo,
+    camera,
+    update
+  } = useCubeCamera({
+    resolution,
+    near,
+    far,
+    envMap,
+    fog
+  });
+  let count = 0;
+  useFrame(() => {
+    if (ref.current && (frames === Infinity || count < frames)) {
+      ref.current.visible = false;
+      update();
+      ref.current.visible = true;
+      count++;
+    }
+  });
+  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("primitive", {
+    object: camera
+  }), /*#__PURE__*/React.createElement("group", {
+    ref: ref
+  }, children == null ? void 0 : children(fbo.texture)));
+}
+
+export { CubeCamera, useCubeCamera };

package/core/CubeTexture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=u(e);function a(e,{path:u}){const[n]=t.useLoader(r.CubeTextureLoader,[e],(e=>e.setPath(u)));return n}a.preload=(e,{path:u})=>t.useLoader.preload(r.CubeTextureLoader,[e],(e=>e.setPath(u))),exports.CubeTexture=function({children:e,files:r,...t}){const u=a(r,{...t});return n.createElement(n.Fragment,null,null==e?void 0:e(u))},exports.useCubeTexture=a;

package/core/CubeTexture.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CubeTexture as _CubeTexture, Texture } from 'three';
+export type CubeTextureOptions = {
+    path: string;
+};
+export declare function useCubeTexture(files: string[], { path }: CubeTextureOptions): _CubeTexture;
+export declare namespace useCubeTexture {
+    var preload: (files: string[], { path }: CubeTextureOptions) => void;
+}
+export type CubeTextureProps = CubeTextureOptions & {
+    children?: (tex: Texture) => React.ReactNode;
+    files: Parameters<typeof useCubeTexture>[0];
+};
+export declare function CubeTexture({ children, files, ...options }: CubeTextureProps): React.JSX.Element;