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

package/core/Caustics.js

@@ -0,0 +1,388 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import { useFBO } from './Fbo.js';
+import { useHelper } from './Helper.js';
+import { shaderMaterial } from './shaderMaterial.js';
+import { Edges } from './Edges.js';
+import { FullScreenQuad } from 'three-stdlib';
+import { version } from '../helpers/constants.js';
+
+function createNormalMaterial(side = THREE.FrontSide) {
+  const viewMatrix = {
+    value: new THREE.Matrix4()
+  };
+  return Object.assign(new THREE.MeshNormalMaterial({
+    side
+  }), {
+    viewMatrix,
+    onBeforeCompile: shader => {
+      shader.uniforms.viewMatrix = viewMatrix;
+      shader.fragmentShader = `vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {
+           return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );
+         }\n` + shader.fragmentShader.replace('#include <normal_fragment_maps>', `#include <normal_fragment_maps>
+           normal = inverseTransformDirection( normal, viewMatrix );\n`);
+    }
+  });
+}
+const CausticsProjectionMaterial = /* @__PURE__ */shaderMaterial({
+  causticsTexture: null,
+  causticsTextureB: null,
+  color: /* @__PURE__ */new THREE.Color(),
+  lightProjMatrix: /* @__PURE__ */new THREE.Matrix4(),
+  lightViewMatrix: /* @__PURE__ */new THREE.Matrix4()
+}, `varying vec3 vWorldPosition;
+   void main() {
+     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
+     vec4 worldPosition = modelMatrix * vec4(position, 1.);
+     vWorldPosition = worldPosition.xyz;
+   }`, `varying vec3 vWorldPosition;
+  uniform vec3 color;
+  uniform sampler2D causticsTexture;
+  uniform sampler2D causticsTextureB;
+  uniform mat4 lightProjMatrix;
+  uniform mat4 lightViewMatrix;
+   void main() {
+    // Apply caustics
+    vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0);
+    lightSpacePos.xyz /= lightSpacePos.w;
+    lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5;
+    vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb;
+    vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;
+    gl_FragColor = vec4((front + back) * color, 1.0);
+    #include <tonemapping_fragment>
+    #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+   }`);
+const CausticsMaterial = /* @__PURE__ */shaderMaterial({
+  cameraMatrixWorld: /* @__PURE__ */new THREE.Matrix4(),
+  cameraProjectionMatrixInv: /* @__PURE__ */new THREE.Matrix4(),
+  normalTexture: null,
+  depthTexture: null,
+  lightDir: /* @__PURE__ */new THREE.Vector3(0, 1, 0),
+  lightPlaneNormal: /* @__PURE__ */new THREE.Vector3(0, 1, 0),
+  lightPlaneConstant: 0,
+  near: 0.1,
+  far: 100,
+  modelMatrix: /* @__PURE__ */new THREE.Matrix4(),
+  worldRadius: 1 / 40,
+  ior: 1.1,
+  bounces: 0,
+  resolution: 1024,
+  size: 10,
+  intensity: 0.5
+}, /* glsl */`
+  varying vec2 vUv;
+  void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }`, /* glsl */`
+  uniform mat4 cameraMatrixWorld;
+  uniform mat4 cameraProjectionMatrixInv;
+  uniform vec3 lightDir;
+  uniform vec3 lightPlaneNormal;
+  uniform float lightPlaneConstant;
+  uniform float near;
+  uniform float far;
+  uniform float time;
+  uniform float worldRadius;
+  uniform float resolution;
+  uniform float size;
+  uniform float intensity;
+  uniform float ior;
+  precision highp isampler2D;
+  precision highp usampler2D;
+  uniform sampler2D normalTexture;
+  uniform sampler2D depthTexture;
+  uniform float bounces;
+  varying vec2 vUv;
+  vec3 WorldPosFromDepth(float depth, vec2 coord) {
+    float z = depth * 2.0 - 1.0;
+    vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);
+    vec4 viewSpacePosition = cameraProjectionMatrixInv * clipSpacePosition;
+    // Perspective division
+    viewSpacePosition /= viewSpacePosition.w;
+    vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;
+    return worldSpacePosition.xyz;
+  }
+  float sdPlane( vec3 p, vec3 n, float h ) {
+    // n must be normalized
+    return dot(p,n) + h;
+  }
+  float planeIntersect( vec3 ro, vec3 rd, vec4 p ) {
+    return -(dot(ro,p.xyz)+p.w)/dot(rd,p.xyz);
+  }
+  vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 pos, vec3 normal, float ior, out vec3 rayOrigin, out vec3 rayDirection) {
+    rayOrigin = ro;
+    rayDirection = rd;
+    rayDirection = refract(rayDirection, normal, 1.0 / ior);
+    rayOrigin = pos + rayDirection * 0.1;
+    return rayDirection;
+  }
+  void main() {
+    // Each sample consists of random offset in the x and y direction
+    float caustic = 0.0;
+    float causticTexelSize = (1.0 / resolution) * size * 2.0;
+    float texelsNeeded = worldRadius / causticTexelSize;
+    float sampleRadius = texelsNeeded / resolution;
+    float sum = 0.0;
+    if (texture2D(depthTexture, vUv).x == 1.0) {
+      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+      return;
+    }
+    vec2 offset1 = vec2(-0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);
+    vec2 offset2 = vec2(-0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);
+    vec2 offset3 = vec2(0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);
+    vec2 offset4 = vec2(0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);
+    vec2 uv1 = vUv + offset1 * sampleRadius;
+    vec2 uv2 = vUv + offset2 * sampleRadius;
+    vec2 uv3 = vUv + offset3 * sampleRadius;
+    vec2 uv4 = vUv + offset4 * sampleRadius;
+    vec3 normal1 = texture2D(normalTexture, uv1, -10.0).rgb * 2.0 - 1.0;
+    vec3 normal2 = texture2D(normalTexture, uv2, -10.0).rgb * 2.0 - 1.0;
+    vec3 normal3 = texture2D(normalTexture, uv3, -10.0).rgb * 2.0 - 1.0;
+    vec3 normal4 = texture2D(normalTexture, uv4, -10.0).rgb * 2.0 - 1.0;
+    float depth1 = texture2D(depthTexture, uv1, -10.0).x;
+    float depth2 = texture2D(depthTexture, uv2, -10.0).x;
+    float depth3 = texture2D(depthTexture, uv3, -10.0).x;
+    float depth4 = texture2D(depthTexture, uv4, -10.0).x;
+    // Sanity check the depths
+    if (depth1 == 1.0 || depth2 == 1.0 || depth3 == 1.0 || depth4 == 1.0) {
+      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+      return;
+    }
+    vec3 pos1 = WorldPosFromDepth(depth1, uv1);
+    vec3 pos2 = WorldPosFromDepth(depth2, uv2);
+    vec3 pos3 = WorldPosFromDepth(depth3, uv3);
+    vec3 pos4 = WorldPosFromDepth(depth4, uv4);
+    vec3 originPos1 = WorldPosFromDepth(0.0, uv1);
+    vec3 originPos2 = WorldPosFromDepth(0.0, uv2);
+    vec3 originPos3 = WorldPosFromDepth(0.0, uv3);
+    vec3 originPos4 = WorldPosFromDepth(0.0, uv4);
+    vec3 endPos1, endPos2, endPos3, endPos4;
+    vec3 endDir1, endDir2, endDir3, endDir4;
+    totalInternalReflection(originPos1, lightDir, pos1, normal1, ior, endPos1, endDir1);
+    totalInternalReflection(originPos2, lightDir, pos2, normal2, ior, endPos2, endDir2);
+    totalInternalReflection(originPos3, lightDir, pos3, normal3, ior, endPos3, endDir3);
+    totalInternalReflection(originPos4, lightDir, pos4, normal4, ior, endPos4, endDir4);
+    float lightPosArea = length(cross(originPos2 - originPos1, originPos3 - originPos1)) + length(cross(originPos3 - originPos1, originPos4 - originPos1));
+    float t1 = planeIntersect(endPos1, endDir1, vec4(lightPlaneNormal, lightPlaneConstant));
+    float t2 = planeIntersect(endPos2, endDir2, vec4(lightPlaneNormal, lightPlaneConstant));
+    float t3 = planeIntersect(endPos3, endDir3, vec4(lightPlaneNormal, lightPlaneConstant));
+    float t4 = planeIntersect(endPos4, endDir4, vec4(lightPlaneNormal, lightPlaneConstant));
+    vec3 finalPos1 = endPos1 + endDir1 * t1;
+    vec3 finalPos2 = endPos2 + endDir2 * t2;
+    vec3 finalPos3 = endPos3 + endDir3 * t3;
+    vec3 finalPos4 = endPos4 + endDir4 * t4;
+    float finalArea = length(cross(finalPos2 - finalPos1, finalPos3 - finalPos1)) + length(cross(finalPos3 - finalPos1, finalPos4 - finalPos1));
+    caustic += intensity * (lightPosArea / finalArea);
+    // Calculate the area of the triangle in light spaces
+    gl_FragColor = vec4(vec3(max(caustic, 0.0)), 1.0);
+  }`);
+const NORMALPROPS = {
+  depth: true,
+  minFilter: THREE.LinearFilter,
+  magFilter: THREE.LinearFilter,
+  type: THREE.UnsignedByteType
+};
+const CAUSTICPROPS = {
+  minFilter: THREE.LinearMipmapLinearFilter,
+  magFilter: THREE.LinearFilter,
+  type: THREE.FloatType,
+  generateMipmaps: true
+};
+const Caustics = /* @__PURE__ */React.forwardRef(({
+  debug,
+  children,
+  frames = 1,
+  ior = 1.1,
+  color = 'white',
+  causticsOnly = false,
+  backside = false,
+  backsideIOR = 1.1,
+  worldRadius = 0.3125,
+  intensity = 0.05,
+  resolution = 2024,
+  lightSource = [5, 5, 5],
+  ...props
+}, fref) => {
+  extend({
+    CausticsProjectionMaterial
+  });
+  const ref = React.useRef(null);
+  const camera = React.useRef(null);
+  const scene = React.useRef(null);
+  const plane = React.useRef(null);
+  const gl = useThree(state => state.gl);
+  const helper = useHelper(debug && camera, THREE.CameraHelper);
+
+  // Buffers for front and back faces
+  const normalTarget = useFBO(resolution, resolution, NORMALPROPS);
+  const normalTargetB = useFBO(resolution, resolution, NORMALPROPS);
+  const causticsTarget = useFBO(resolution, resolution, CAUSTICPROPS);
+  const causticsTargetB = useFBO(resolution, resolution, CAUSTICPROPS);
+  // Normal materials for front and back faces
+  const [normalMat] = React.useState(() => createNormalMaterial());
+  const [normalMatB] = React.useState(() => createNormalMaterial(THREE.BackSide));
+  // The quad that catches the caustics
+  const [causticsMaterial] = React.useState(() => new CausticsMaterial());
+  const [causticsQuad] = React.useState(() => new FullScreenQuad(causticsMaterial));
+  React.useLayoutEffect(() => {
+    ref.current.updateWorldMatrix(false, true);
+  });
+  let count = 0;
+  const v = new THREE.Vector3();
+  const lpF = new THREE.Frustum();
+  const lpM = new THREE.Matrix4();
+  const lpP = new THREE.Plane();
+  const lightDir = new THREE.Vector3();
+  const lightDirInv = new THREE.Vector3();
+  const bounds = new THREE.Box3();
+  const focusPos = new THREE.Vector3();
+  const boundsVertices = [];
+  const worldVerts = [];
+  const projectedVerts = [];
+  const lightDirs = [];
+  const cameraPos = new THREE.Vector3();
+  for (let i = 0; i < 8; i++) {
+    boundsVertices.push(new THREE.Vector3());
+    worldVerts.push(new THREE.Vector3());
+    projectedVerts.push(new THREE.Vector3());
+    lightDirs.push(new THREE.Vector3());
+  }
+  useFrame(() => {
+    if (frames === Infinity || count++ < frames) {
+      var _scene$current$parent, _helper$current;
+      if (Array.isArray(lightSource)) lightDir.fromArray(lightSource).normalize();else lightDir.copy(ref.current.worldToLocal(lightSource.current.getWorldPosition(v)).normalize());
+      lightDirInv.copy(lightDir).multiplyScalar(-1);
+      (_scene$current$parent = scene.current.parent) == null || _scene$current$parent.matrixWorld.identity();
+      bounds.setFromObject(scene.current, true);
+      boundsVertices[0].set(bounds.min.x, bounds.min.y, bounds.min.z);
+      boundsVertices[1].set(bounds.min.x, bounds.min.y, bounds.max.z);
+      boundsVertices[2].set(bounds.min.x, bounds.max.y, bounds.min.z);
+      boundsVertices[3].set(bounds.min.x, bounds.max.y, bounds.max.z);
+      boundsVertices[4].set(bounds.max.x, bounds.min.y, bounds.min.z);
+      boundsVertices[5].set(bounds.max.x, bounds.min.y, bounds.max.z);
+      boundsVertices[6].set(bounds.max.x, bounds.max.y, bounds.min.z);
+      boundsVertices[7].set(bounds.max.x, bounds.max.y, bounds.max.z);
+      for (let i = 0; i < 8; i++) {
+        worldVerts[i].copy(boundsVertices[i]);
+      }
+      bounds.getCenter(focusPos);
+      boundsVertices.map(v => v.sub(focusPos));
+      const lightPlane = lpP.set(lightDirInv, 0);
+      boundsVertices.map((v, i) => lightPlane.projectPoint(v, projectedVerts[i]));
+      const centralVert = projectedVerts.reduce((a, b) => a.add(b), v.set(0, 0, 0)).divideScalar(projectedVerts.length);
+      const radius = projectedVerts.map(v => v.distanceTo(centralVert)).reduce((a, b) => Math.max(a, b));
+      const dirLength = boundsVertices.map(x => x.dot(lightDir)).reduce((a, b) => Math.max(a, b));
+      // Shadows
+      camera.current.position.copy(cameraPos.copy(lightDir).multiplyScalar(dirLength).add(focusPos));
+      camera.current.lookAt(scene.current.localToWorld(focusPos));
+      const dirMatrix = lpM.lookAt(camera.current.position, focusPos, v.set(0, 1, 0));
+      camera.current.left = -radius;
+      camera.current.right = radius;
+      camera.current.top = radius;
+      camera.current.bottom = -radius;
+      const yOffset = v.set(0, radius, 0).applyMatrix4(dirMatrix);
+      const yTime = (camera.current.position.y + yOffset.y) / lightDir.y;
+      camera.current.near = 0.1;
+      camera.current.far = yTime;
+      camera.current.updateProjectionMatrix();
+      camera.current.updateMatrixWorld();
+
+      // Now find size of ground plane
+      const groundProjectedCoords = worldVerts.map((v, i) => v.add(lightDirs[i].copy(lightDir).multiplyScalar(-v.y / lightDir.y)));
+      const centerPos = groundProjectedCoords.reduce((a, b) => a.add(b), v.set(0, 0, 0)).divideScalar(groundProjectedCoords.length);
+      const maxSize = 2 * groundProjectedCoords.map(v => Math.hypot(v.x - centerPos.x, v.z - centerPos.z)).reduce((a, b) => Math.max(a, b));
+      plane.current.scale.setScalar(maxSize);
+      plane.current.position.copy(centerPos);
+      if (debug) (_helper$current = helper.current) == null || _helper$current.update();
+
+      // Inject uniforms
+      normalMatB.viewMatrix.value = normalMat.viewMatrix.value = camera.current.matrixWorldInverse;
+      const dirLightNearPlane = lpF.setFromProjectionMatrix(lpM.multiplyMatrices(camera.current.projectionMatrix, camera.current.matrixWorldInverse)).planes[4];
+      causticsMaterial.cameraMatrixWorld = camera.current.matrixWorld;
+      causticsMaterial.cameraProjectionMatrixInv = camera.current.projectionMatrixInverse;
+      causticsMaterial.lightDir = lightDirInv;
+      causticsMaterial.lightPlaneNormal = dirLightNearPlane.normal;
+      causticsMaterial.lightPlaneConstant = dirLightNearPlane.constant;
+      causticsMaterial.near = camera.current.near;
+      causticsMaterial.far = camera.current.far;
+      causticsMaterial.resolution = resolution;
+      causticsMaterial.size = radius;
+      causticsMaterial.intensity = intensity;
+      causticsMaterial.worldRadius = worldRadius;
+
+      // Switch the scene on
+      scene.current.visible = true;
+
+      // Render front face normals
+      gl.setRenderTarget(normalTarget);
+      gl.clear();
+      scene.current.overrideMaterial = normalMat;
+      gl.render(scene.current, camera.current);
+
+      // Render back face normals, if enabled
+      gl.setRenderTarget(normalTargetB);
+      gl.clear();
+      if (backside) {
+        scene.current.overrideMaterial = normalMatB;
+        gl.render(scene.current, camera.current);
+      }
+
+      // Remove the override material
+      scene.current.overrideMaterial = null;
+
+      // Render front face caustics
+      causticsMaterial.ior = ior;
+      plane.current.material.lightProjMatrix = camera.current.projectionMatrix;
+      plane.current.material.lightViewMatrix = camera.current.matrixWorldInverse;
+      causticsMaterial.normalTexture = normalTarget.texture;
+      causticsMaterial.depthTexture = normalTarget.depthTexture;
+      gl.setRenderTarget(causticsTarget);
+      gl.clear();
+      causticsQuad.render(gl);
+
+      // Render back face caustics, if enabled
+      causticsMaterial.ior = backsideIOR;
+      causticsMaterial.normalTexture = normalTargetB.texture;
+      causticsMaterial.depthTexture = normalTargetB.depthTexture;
+      gl.setRenderTarget(causticsTargetB);
+      gl.clear();
+      if (backside) causticsQuad.render(gl);
+
+      // Reset render target
+      gl.setRenderTarget(null);
+
+      // Switch the scene off if caustics is all that's wanted
+      if (causticsOnly) scene.current.visible = false;
+    }
+  });
+  React.useImperativeHandle(fref, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement("scene", {
+    ref: scene
+  }, /*#__PURE__*/React.createElement("orthographicCamera", {
+    ref: camera,
+    up: [0, 1, 0]
+  }), children), /*#__PURE__*/React.createElement("mesh", {
+    renderOrder: 2,
+    ref: plane,
+    "rotation-x": -Math.PI / 2
+  }, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("causticsProjectionMaterial", {
+    transparent: true,
+    color: color,
+    causticsTexture: causticsTarget.texture,
+    causticsTextureB: causticsTargetB.texture,
+    blending: THREE.CustomBlending,
+    blendSrc: THREE.OneFactor,
+    blendDst: THREE.SrcAlphaFactor,
+    depthWrite: false
+  }), debug && /*#__PURE__*/React.createElement(Edges, null, /*#__PURE__*/React.createElement("lineBasicMaterial", {
+    color: "#ffff00",
+    toneMapped: false
+  }))));
+});
+
+export { Caustics };

package/core/Center.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=n(e),i=u(r);const c=i.forwardRef((function({children:e,object:r,disable:n,disableX:u,disableY:c,disableZ:a,left:l,right:s,top:f,bottom:d,front:p,back:b,onCentered:m,precise:g=!0,cacheKey:h=0,...x},y){const j=i.useRef(null),O=i.useRef(null),v=i.useRef(null),[w]=i.useState((()=>new t.Box3)),[S]=i.useState((()=>new t.Vector3)),[z]=i.useState((()=>new t.Sphere));return i.useLayoutEffect((()=>{O.current.matrixWorld.identity(),w.setFromObject(null!=r?r:v.current,g);const e=w.max.x-w.min.x,t=w.max.y-w.min.y,o=w.max.z-w.min.z;w.getCenter(S),w.getBoundingSphere(z);const i=f?t/2:d?-t/2:0,h=l?-e/2:s?e/2:0,x=p?o/2:b?-o/2:0;O.current.position.set(n||u?0:-S.x+h,n||c?0:-S.y+i,n||a?0:-S.z+x),null==m||m({parent:j.current.parent,container:j.current,width:e,height:t,depth:o,boundingBox:w,boundingSphere:z,center:S,verticalAlignment:i,horizontalAlignment:h,depthAlignment:x})}),[h,m,f,l,p,n,u,c,a,r,g,s,d,b,w,S,z]),i.useImperativeHandle(y,(()=>j.current),[]),i.createElement("group",o.default({ref:j},x),i.createElement("group",{ref:O},i.createElement("group",{ref:v},e)))}));exports.Center=c;

package/core/Center.d.ts

@@ -0,0 +1,33 @@
+import { Box3, Vector3, Sphere, Group, Object3D } from 'three';
+import { ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type OnCenterCallbackProps = {
+    parent: Object3D;
+    container: Object3D;
+    width: number;
+    height: number;
+    depth: number;
+    boundingBox: Box3;
+    boundingSphere: Sphere;
+    center: Vector3;
+    verticalAlignment: number;
+    horizontalAlignment: number;
+    depthAlignment: number;
+};
+export type CenterProps = Omit<ThreeElements['group'], 'ref'> & {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    front?: boolean;
+    back?: boolean;
+    disable?: boolean;
+    disableX?: boolean;
+    disableY?: boolean;
+    disableZ?: boolean;
+    object?: Object3D | null;
+    precise?: boolean;
+    onCentered?: (props: OnCenterCallbackProps) => void;
+    cacheKey?: any;
+};
+export declare const Center: ForwardRefComponent<CenterProps, Group>;

package/core/Center.js

@@ -0,0 +1,67 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { Box3, Vector3, Sphere } from 'three';
+import * as React from 'react';
+
+const Center = /* @__PURE__ */React.forwardRef(function Center({
+  children,
+  object,
+  disable,
+  disableX,
+  disableY,
+  disableZ,
+  left,
+  right,
+  top,
+  bottom,
+  front,
+  back,
+  onCentered,
+  precise = true,
+  cacheKey = 0,
+  ...props
+}, fRef) {
+  const ref = React.useRef(null);
+  const outer = React.useRef(null);
+  const inner = React.useRef(null);
+  const [box3] = React.useState(() => new Box3());
+  const [center] = React.useState(() => new Vector3());
+  const [sphere] = React.useState(() => new Sphere());
+  React.useLayoutEffect(() => {
+    outer.current.matrixWorld.identity();
+    box3.setFromObject(object !== null && object !== void 0 ? object : inner.current, precise);
+    const width = box3.max.x - box3.min.x;
+    const height = box3.max.y - box3.min.y;
+    const depth = box3.max.z - box3.min.z;
+    box3.getCenter(center);
+    box3.getBoundingSphere(sphere);
+    const vAlign = top ? height / 2 : bottom ? -height / 2 : 0;
+    const hAlign = left ? -width / 2 : right ? width / 2 : 0;
+    const dAlign = front ? depth / 2 : back ? -depth / 2 : 0;
+    outer.current.position.set(disable || disableX ? 0 : -center.x + hAlign, disable || disableY ? 0 : -center.y + vAlign, disable || disableZ ? 0 : -center.z + dAlign);
+
+    // Only fire onCentered if the bounding box has changed
+    onCentered == null || onCentered({
+      parent: ref.current.parent,
+      container: ref.current,
+      width,
+      height,
+      depth,
+      boundingBox: box3,
+      boundingSphere: sphere,
+      center: center,
+      verticalAlignment: vAlign,
+      horizontalAlignment: hAlign,
+      depthAlignment: dAlign
+    });
+  }, [cacheKey, onCentered, top, left, front, disable, disableX, disableY, disableZ, object, precise, right, bottom, back, box3, center, sphere]);
+  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 { Center };

package/core/Clone.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e),c=i(t),l=i(r);const s=l.forwardRef((({isChild:e=!1,object:t,children:r,deep:a,castShadow:i,receiveShadow:d,inject:u,keys:f,...y},m)=>{const h={keys:f,deep:a,inject:u,castShadow:i,receiveShadow:d};if(t=l.useMemo((()=>{if(!1===e&&!Array.isArray(t)){let e=!1;if(t.traverse((t=>{t.isSkinnedMesh&&(e=!0)})),e)return n.SkeletonUtils.clone(t)}return t}),[t,e]),Array.isArray(t))return l.createElement("group",o.default({},y,{ref:m}),t.map((e=>l.createElement(s,o.default({key:e.uuid,object:e},h)))),r);const{children:p,...b}=function(e,{keys:t=["near","far","color","distance","decay","penumbra","angle","intensity","skeleton","visible","castShadow","receiveShadow","morphTargetDictionary","morphTargetInfluences","name","geometry","material","position","rotation","scale","up","userData","bindMode","bindMatrix","bindMatrixInverse","skeleton"],deep:r,inject:n,castShadow:a,receiveShadow:i}){let o={};for(const r of t)o[r]=e[r];return r&&(o.geometry&&"materialsOnly"!==r&&(o.geometry=o.geometry.clone()),o.material&&"geometriesOnly"!==r&&(o.material=o.material.clone())),n&&(o="function"==typeof n?{...o,children:n(e)}:l.isValidElement(n)?{...o,children:n}:{...o,...n}),e instanceof c.Mesh&&(a&&(o.castShadow=!0),i&&(o.receiveShadow=!0)),o}(t,h),j=t.type[0].toLowerCase()+t.type.slice(1);return l.createElement(j,o.default({},b,y,{ref:m}),t.children.map((e=>"Bone"===e.type?l.createElement("primitive",o.default({key:e.uuid,object:e},h)):l.createElement(s,o.default({key:e.uuid,object:e},h,{isChild:!0})))),r,p)}));exports.Clone=s;

package/core/Clone.d.ts

@@ -0,0 +1,15 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+import { ThreeElements } from '@react-three/fiber';
+export type CloneProps = Omit<ThreeElements['group'], 'ref' | 'children'> & {
+    object: THREE.Object3D | THREE.Object3D[];
+    children?: React.ReactNode;
+    deep?: boolean | 'materialsOnly' | 'geometriesOnly';
+    keys?: string[];
+    inject?: ThreeElements['mesh'] | React.ReactNode | ((object: THREE.Object3D) => React.ReactNode);
+    castShadow?: boolean;
+    receiveShadow?: boolean;
+    isChild?: boolean;
+};
+export declare const Clone: ForwardRefComponent<CloneProps, THREE.Group>;

package/core/Clone.js

@@ -0,0 +1,100 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { SkeletonUtils } from 'three-stdlib';
+
+function createSpread(child, {
+  keys = ['near', 'far', 'color', 'distance', 'decay', 'penumbra', 'angle', 'intensity', 'skeleton', 'visible', 'castShadow', 'receiveShadow', 'morphTargetDictionary', 'morphTargetInfluences', 'name', 'geometry', 'material', 'position', 'rotation', 'scale', 'up', 'userData', 'bindMode', 'bindMatrix', 'bindMatrixInverse', 'skeleton'],
+  deep,
+  inject,
+  castShadow,
+  receiveShadow
+}) {
+  let spread = {};
+  for (const key of keys) {
+    spread[key] = child[key];
+  }
+  if (deep) {
+    if (spread.geometry && deep !== 'materialsOnly') spread.geometry = spread.geometry.clone();
+    if (spread.material && deep !== 'geometriesOnly') spread.material = spread.material.clone();
+  }
+  if (inject) {
+    if (typeof inject === 'function') spread = {
+      ...spread,
+      children: inject(child)
+    };else if (/*#__PURE__*/React.isValidElement(inject)) spread = {
+      ...spread,
+      children: inject
+    };else spread = {
+      ...spread,
+      ...inject
+    };
+  }
+  if (child instanceof THREE.Mesh) {
+    if (castShadow) spread.castShadow = true;
+    if (receiveShadow) spread.receiveShadow = true;
+  }
+  return spread;
+}
+const Clone = /* @__PURE__ */React.forwardRef(({
+  isChild = false,
+  object,
+  children,
+  deep,
+  castShadow,
+  receiveShadow,
+  inject,
+  keys,
+  ...props
+}, forwardRef) => {
+  const config = {
+    keys,
+    deep,
+    inject,
+    castShadow,
+    receiveShadow
+  };
+  object = React.useMemo(() => {
+    if (isChild === false && !Array.isArray(object)) {
+      let isSkinned = false;
+      object.traverse(object => {
+        if (object.isSkinnedMesh) isSkinned = true;
+      });
+      if (isSkinned) return SkeletonUtils.clone(object);
+    }
+    return object;
+  }, [object, isChild]);
+
+  // Deal with arrayed clones
+  if (Array.isArray(object)) {
+    return /*#__PURE__*/React.createElement("group", _extends({}, props, {
+      ref: forwardRef
+    }), object.map(o => /*#__PURE__*/React.createElement(Clone, _extends({
+      key: o.uuid,
+      object: o
+    }, config))), children);
+  }
+
+  // Singleton clones
+  const {
+    children: injectChildren,
+    ...spread
+  } = createSpread(object, config);
+  const Element = object.type[0].toLowerCase() + object.type.slice(1);
+  return /*#__PURE__*/React.createElement(Element, _extends({}, spread, props, {
+    ref: forwardRef
+  }), object.children.map(child => {
+    if (child.type === 'Bone') return /*#__PURE__*/React.createElement("primitive", _extends({
+      key: child.uuid,
+      object: child
+    }, config));
+    return /*#__PURE__*/React.createElement(Clone, _extends({
+      key: child.uuid,
+      object: child
+    }, config, {
+      isChild: true
+    }));
+  }), children, injectChildren);
+});
+
+export { Clone };

package/core/Cloud.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"),n=require("@react-three/fiber"),a=require("./Texture.cjs.js"),o=require("../helpers/deprecated.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=u(e),i=c(t);const s=new r.Matrix4,d=new r.Vector3,f=new r.Quaternion,m=new r.Vector3,p=new r.Quaternion,g=new r.Vector3,h=i.createContext(null),y=i.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:u="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:c,limit:y=200,frustumCulled:x,...v},b)=>{var M,w;const C=i.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float cloudOpacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = cloudOpacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:C});const E=i.useRef(null),O=i.useRef([]),A=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>1)))),[y]),j=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>[1,1,1])).flat())),[y]),R=a.useTexture(u);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),I=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.elapsedTime,s.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(m,p,g),_=0;_<O.current.length;_++)U=O.current[_],U.ref.current.matrixWorld.decompose(d,f,g),d.add(I.copy(U.position).applyQuaternion(f).multiply(g)),f.copy(p).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),g.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(d,f,g).premultiply(s),U.dist=d.distanceTo(m);for(O.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<O.current.length;_++)U=O.current[_],A[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.cloudOpacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),i.useLayoutEffect((()=>{const e=Math.min(y,void 0!==c?c:y,O.current.length);E.current.count=e,o.setUpdateRange(E.current.instanceMatrix,{start:0,count:16*e}),E.current.instanceColor&&o.setUpdateRange(E.current.instanceColor,{start:0,count:3*e}),o.setUpdateRange(E.current.geometry.attributes.cloudOpacity,{start:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1];const P=Math.max(D[0],D[1]);return D=[D[0]/P,D[1]/P],i.createElement("group",l.default({ref:b},v),i.createElement(h.Provider,{value:O},e,i.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,y],frustumCulled:x},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),i.createElement("planeGeometry",{args:[...D]},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-cloudOpacity",args:[A,1]})),i.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),x=i.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:o=20,color:u="#ffffff",fade:c=10,volume:s=6,smallestVolume:d=.25,distribute:f=null,growth:m=4,concentrate:p="inside",seed:g=Math.random(),...y},x)=>{function v(){const e=1e4*Math.sin(g++);return e-Math.floor(e)}const b=i.useContext(h),M=i.useRef(null),w=i.useId(),C=i.useMemo((()=>[...new Array(o)].map(((e,t)=>({segments:o,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:w,index:t,ref:M,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/o)})))),[o,w]);return i.useLayoutEffect((()=>{C.forEach(((r,l)=>{n.applyProps(r,{volume:s,color:u,speed:t,growth:m,opacity:e,fade:c,bounds:a,density:Math.max(.5,v()),rotationFactor:Math.max(.2,.5*v())*t});const i=null==f?void 0:f(r,l);var g;(i||o>1)&&r.position.copy(r.bounds).multiply(null!==(g=null==i?void 0:i.point)&&void 0!==g?g:{x:2*v()-1,y:2*v()-1,z:2*v()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),b=Math.max(h,y,x);r.length=1,h===b&&(r.length-=h/r.bounds.x),y===b&&(r.length-=y/r.bounds.y),x===b&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==i?void 0:i.volume)?i.volume:Math.max(Math.max(0,d),"random"===p?v():"inside"===p?r.length:1-r.length))*s}))}),[p,a,c,u,e,m,s,g,o,t]),i.useLayoutEffect((()=>{const e=C;return b.current=[...b.current,...e],()=>{b.current=b.current.filter((e=>e.uuid!==w))}}),[C]),i.useImperativeHandle(x,(()=>M.current),[]),i.createElement("group",l.default({ref:M},y))})),v=i.forwardRef(((e,t)=>i.useContext(h)?i.createElement(x,l.default({ref:t},e)):i.createElement(y,null,i.createElement(x,l.default({ref:t},e)))));exports.Cloud=v,exports.CloudInstance=x,exports.Clouds=y;