@react-three/drei 10.7.7 → 11.0.0-alpha.1

package/core/GradientTexture.js

@@ -1,54 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import { useThree } from '@react-three/fiber';
-import * as THREE from 'three';
-
-let GradientType = /*#__PURE__*/function (GradientType) {
-  GradientType["Linear"] = "linear";
-  GradientType["Radial"] = "radial";
-  return GradientType;
-}({});
-function GradientTexture({
-  stops,
-  colors,
-  size = 1024,
-  width = 16,
-  type = GradientType.Linear,
-  innerCircleRadius = 0,
-  outerCircleRadius = 'auto',
-  ...props
-}) {
-  const gl = useThree(state => state.gl);
-  const canvas = React.useMemo(() => {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    canvas.width = width;
-    canvas.height = size;
-    let gradient;
-    if (type === GradientType.Linear) {
-      gradient = context.createLinearGradient(0, 0, 0, size);
-    } else {
-      const canvasCenterX = canvas.width / 2;
-      const canvasCenterY = canvas.height / 2;
-      const radius = outerCircleRadius !== 'auto' ? Math.abs(Number(outerCircleRadius)) : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
-      gradient = context.createRadialGradient(canvasCenterX, canvasCenterY, Math.abs(innerCircleRadius), canvasCenterX, canvasCenterY, radius);
-    }
-    const tempColor = new THREE.Color(); // reuse instance for performance
-    let i = stops.length;
-    while (i--) {
-      gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle());
-    }
-    context.save();
-    context.fillStyle = gradient;
-    context.fillRect(0, 0, width, size);
-    context.restore();
-    return canvas;
-  }, [stops]);
-  return /*#__PURE__*/React.createElement("canvasTexture", _extends({
-    colorSpace: gl.outputColorSpace,
-    args: [canvas],
-    attach: "map"
-  }, props));
-}
-
-export { GradientTexture, GradientType };

package/core/Grid.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("@react-three/fiber"),r=require("./shaderMaterial.cjs.js"),t=require("../helpers/constants.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var s=l(e),c=a(n),f=a(o);const d=r.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,fadeFrom:1,cellThickness:.5,sectionThickness:1,cellColor:new f.Color,sectionColor:new f.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new f.Vector3,worldPlanePosition:new f.Vector3},"\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform vec3 worldPlanePosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      localPosition = position.xzy;\n      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n      \n      worldPosition = modelMatrix * vec4(localPosition, 1.0);\n      if (followCamera) {\n        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n        localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n      }\n\n      gl_Position = projectionMatrix * viewMatrix * worldPosition;\n    }\n  ",`\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float fadeFrom;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = localPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1.0 - thickness;\n      return 1.0 - min(line, 1.0);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      vec3 from = worldCamProjPosition*vec3(fadeFrom);\n      float dist = distance(from, worldPosition.xyz);\n      float d = 1.0 - min(dist / fadeDistance, 1.0);\n      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <${t.version>=154?"colorspace_fragment":"encodings_fragment"}>\n    }\n  `),m=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:o="#2080ff",cellSize:r=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:a=!1,fadeDistance:m=100,fadeStrength:u=1,fadeFrom:g=1,cellThickness:P=.5,sectionThickness:v=1,side:w=f.BackSide,...C},h)=>{i.extend({GridMaterial:d});const p=c.useRef(null);c.useImperativeHandle(h,(()=>p.current),[]);const x=new f.Plane,j=new f.Vector3(0,1,0),z=new f.Vector3(0,0,0);i.useFrame((e=>{x.setFromNormalAndCoplanarPoint(j,z).applyMatrix4(p.current.matrixWorld);const n=p.current.material,o=n.uniforms.worldCamProjPosition,i=n.uniforms.worldPlanePosition;x.projectPoint(e.camera.position,o.value),i.value.set(0,0,0).applyMatrix4(p.current.matrixWorld)}));const y={cellSize:r,sectionSize:t,cellColor:n,sectionColor:o,cellThickness:P,sectionThickness:v},S={fadeDistance:m,fadeStrength:u,fadeFrom:g,infiniteGrid:a,followCamera:l};return c.createElement("mesh",s.default({ref:p,frustumCulled:!1},C),c.createElement("gridMaterial",s.default({transparent:!0,"extensions-derivatives":!0,side:w},y,S)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=m;

package/core/Grid.d.ts

@@ -1,26 +0,0 @@
-import * as THREE from 'three';
-import { ThreeElements } from '@react-three/fiber';
-import { ForwardRefComponent } from '../helpers/ts-utils';
-export type GridMaterialType = {
-    cellSize?: number;
-    cellThickness?: number;
-    cellColor?: THREE.ColorRepresentation;
-    sectionSize?: number;
-    sectionThickness?: number;
-    sectionColor?: THREE.ColorRepresentation;
-    followCamera?: boolean;
-    infiniteGrid?: boolean;
-    fadeDistance?: number;
-    fadeStrength?: number;
-    fadeFrom?: number;
-    side?: THREE.Side;
-};
-export type GridProps = Omit<ThreeElements['mesh'], 'ref' | 'args'> & GridMaterialType & {
-    args?: ConstructorParameters<typeof THREE.PlaneGeometry>;
-};
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        gridMaterial: ThreeElements['shaderMaterial'] & GridMaterialType;
-    }
-}
-export declare const Grid: ForwardRefComponent<GridProps, THREE.Mesh>;

package/core/Grid.js

@@ -1,142 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import * as THREE from 'three';
-import { extend, useFrame } from '@react-three/fiber';
-import { shaderMaterial } from './shaderMaterial.js';
-import { version } from '../helpers/constants.js';
-
-const GridMaterial = /* @__PURE__ */shaderMaterial({
-  cellSize: 0.5,
-  sectionSize: 1,
-  fadeDistance: 100,
-  fadeStrength: 1,
-  fadeFrom: 1,
-  cellThickness: 0.5,
-  sectionThickness: 1,
-  cellColor: /* @__PURE__ */new THREE.Color(),
-  sectionColor: /* @__PURE__ */new THREE.Color(),
-  infiniteGrid: false,
-  followCamera: false,
-  worldCamProjPosition: /* @__PURE__ */new THREE.Vector3(),
-  worldPlanePosition: /* @__PURE__ */new THREE.Vector3()
-}, /* glsl */`
-    varying vec3 localPosition;
-    varying vec4 worldPosition;
-
-    uniform vec3 worldCamProjPosition;
-    uniform vec3 worldPlanePosition;
-    uniform float fadeDistance;
-    uniform bool infiniteGrid;
-    uniform bool followCamera;
-
-    void main() {
-      localPosition = position.xzy;
-      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;
-      
-      worldPosition = modelMatrix * vec4(localPosition, 1.0);
-      if (followCamera) {
-        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);
-        localPosition = (inverse(modelMatrix) * worldPosition).xyz;
-      }
-
-      gl_Position = projectionMatrix * viewMatrix * worldPosition;
-    }
-  `, /* glsl */`
-    varying vec3 localPosition;
-    varying vec4 worldPosition;
-
-    uniform vec3 worldCamProjPosition;
-    uniform float cellSize;
-    uniform float sectionSize;
-    uniform vec3 cellColor;
-    uniform vec3 sectionColor;
-    uniform float fadeDistance;
-    uniform float fadeStrength;
-    uniform float fadeFrom;
-    uniform float cellThickness;
-    uniform float sectionThickness;
-
-    float getGrid(float size, float thickness) {
-      vec2 r = localPosition.xz / size;
-      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
-      float line = min(grid.x, grid.y) + 1.0 - thickness;
-      return 1.0 - min(line, 1.0);
-    }
-
-    void main() {
-      float g1 = getGrid(cellSize, cellThickness);
-      float g2 = getGrid(sectionSize, sectionThickness);
-
-      vec3 from = worldCamProjPosition*vec3(fadeFrom);
-      float dist = distance(from, worldPosition.xyz);
-      float d = 1.0 - min(dist / fadeDistance, 1.0);
-      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));
-
-      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));
-      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);
-      if (gl_FragColor.a <= 0.0) discard;
-
-      #include <tonemapping_fragment>
-      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
-    }
-  `);
-const Grid = /* @__PURE__ */React.forwardRef(({
-  args,
-  cellColor = '#000000',
-  sectionColor = '#2080ff',
-  cellSize = 0.5,
-  sectionSize = 1,
-  followCamera = false,
-  infiniteGrid = false,
-  fadeDistance = 100,
-  fadeStrength = 1,
-  fadeFrom = 1,
-  cellThickness = 0.5,
-  sectionThickness = 1,
-  side = THREE.BackSide,
-  ...props
-}, fRef) => {
-  extend({
-    GridMaterial
-  });
-  const ref = React.useRef(null);
-  React.useImperativeHandle(fRef, () => ref.current, []);
-  const plane = new THREE.Plane();
-  const upVector = new THREE.Vector3(0, 1, 0);
-  const zeroVector = new THREE.Vector3(0, 0, 0);
-  useFrame(state => {
-    plane.setFromNormalAndCoplanarPoint(upVector, zeroVector).applyMatrix4(ref.current.matrixWorld);
-    const gridMaterial = ref.current.material;
-    const worldCamProjPosition = gridMaterial.uniforms.worldCamProjPosition;
-    const worldPlanePosition = gridMaterial.uniforms.worldPlanePosition;
-    plane.projectPoint(state.camera.position, worldCamProjPosition.value);
-    worldPlanePosition.value.set(0, 0, 0).applyMatrix4(ref.current.matrixWorld);
-  });
-  const uniforms1 = {
-    cellSize,
-    sectionSize,
-    cellColor,
-    sectionColor,
-    cellThickness,
-    sectionThickness
-  };
-  const uniforms2 = {
-    fadeDistance,
-    fadeStrength,
-    fadeFrom,
-    infiniteGrid,
-    followCamera
-  };
-  return /*#__PURE__*/React.createElement("mesh", _extends({
-    ref: ref,
-    frustumCulled: false
-  }, props), /*#__PURE__*/React.createElement("gridMaterial", _extends({
-    transparent: true,
-    "extensions-derivatives": true,
-    side: side
-  }, uniforms1, uniforms2)), /*#__PURE__*/React.createElement("planeGeometry", {
-    args: args
-  }));
-});
-
-export { Grid };

package/core/Helper.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber");function t(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 u=t(e);function n(e,t,...n){const c=u.useRef(null),l=r.useThree((e=>e.scene));return u.useLayoutEffect((()=>{let r;if(e&&null!=e&&e.current&&t&&(c.current=r=new t(e.current,...n)),r)return r.traverse((e=>e.raycast=()=>null)),l.add(r),()=>{c.current=void 0,l.remove(r),null==r.dispose||r.dispose()}}),[l,t,e,...n]),r.useFrame((()=>{var e;null==(e=c.current)||null==e.update||e.update()})),c}exports.Helper=({type:e,args:r=[]})=>{const t=u.useRef(null),c=u.useRef(null);return u.useLayoutEffect((()=>{c.current=t.current.parent})),n(c,e,...r),u.createElement("object3D",{ref:t})},exports.useHelper=n;

package/core/Helper.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { Object3D } from 'three';
-import { Falsey } from 'utility-types';
-type HelperType = Object3D & {
-    update: () => void;
-    dispose: () => void;
-};
-type HelperConstructor = new (...args: any[]) => any;
-type HelperArgs<T> = T extends [infer _, ...infer R] ? R : never;
-export declare function useHelper<T extends HelperConstructor>(object3D: React.RefObject<Object3D> | Falsey, helperConstructor: T, ...args: HelperArgs<ConstructorParameters<T>>): React.RefObject<HelperType | null>;
-export type HelperProps<T extends HelperConstructor> = {
-    type: T;
-    args?: HelperArgs<ConstructorParameters<T>>;
-};
-export declare const Helper: <T extends HelperConstructor>({ type: helperConstructor, args, }: HelperProps<T>) => React.JSX.Element;
-export {};

package/core/Helper.js

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { useThree, useFrame } from '@react-three/fiber';
-
-function useHelper(object3D, helperConstructor, ...args) {
-  const helper = React.useRef(null);
-  const scene = useThree(state => state.scene);
-  React.useLayoutEffect(() => {
-    let currentHelper = undefined;
-    if (object3D && object3D != null && object3D.current && helperConstructor) {
-      helper.current = currentHelper = new helperConstructor(object3D.current, ...args);
-    }
-    if (currentHelper) {
-      // Prevent the helpers from blocking rays
-      currentHelper.traverse(child => child.raycast = () => null);
-      scene.add(currentHelper);
-      return () => {
-        helper.current = undefined;
-        scene.remove(currentHelper);
-        currentHelper.dispose == null || currentHelper.dispose();
-      };
-    }
-  }, [scene, helperConstructor, object3D, ...args]);
-  useFrame(() => {
-    var _helper$current;
-    return void ((_helper$current = helper.current) == null || _helper$current.update == null ? void 0 : _helper$current.update());
-  });
-  return helper;
-}
-
-//
-
-const Helper = ({
-  type: helperConstructor,
-  args = []
-}) => {
-  const thisRef = React.useRef(null);
-  const parentRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    parentRef.current = thisRef.current.parent;
-  });
-  useHelper(parentRef, helperConstructor, ...args);
-  return /*#__PURE__*/React.createElement("object3D", {
-    ref: thisRef
-  });
-};
-
-export { Helper, useHelper };

package/core/Hud.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=n(e),u=n(r);function c({defaultScene:e,defaultCamera:r,renderPriority:n=1}){const{gl:a,scene:c,camera:l}=t.useThree();let o;return t.useFrame((()=>{o=a.autoClear,1===n&&(a.autoClear=!0,a.render(e,r)),a.autoClear=!1,a.clearDepth(),a.render(c,l),a.autoClear=o}),n),u.createElement("group",{onPointerOver:()=>null})}exports.Hud=function({children:e,renderPriority:r=1}){const{scene:n,camera:l}=t.useThree(),[o]=u.useState((()=>new a.Scene));return u.createElement(u.Fragment,null,t.createPortal(u.createElement(u.Fragment,null,e,u.createElement(c,{defaultScene:n,defaultCamera:l,renderPriority:r})),o,{events:{priority:r+1}}))};

package/core/Hud.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export type HudProps = {
-    children: React.ReactNode;
-    renderPriority?: number;
-};
-export declare function Hud({ children, renderPriority }: HudProps): React.JSX.Element;

package/core/Hud.js

@@ -1,55 +0,0 @@
-import * as THREE from 'three';
-import * as React from 'react';
-import { useThree, createPortal, useFrame } from '@react-three/fiber';
-
-function RenderHud({
-  defaultScene,
-  defaultCamera,
-  renderPriority = 1
-}) {
-  const {
-    gl,
-    scene,
-    camera
-  } = useThree();
-  let oldCLear;
-  useFrame(() => {
-    oldCLear = gl.autoClear;
-    if (renderPriority === 1) {
-      // Clear scene and render the default scene
-      gl.autoClear = true;
-      gl.render(defaultScene, defaultCamera);
-    }
-    // Disable cleaning and render the portal with its own camera
-    gl.autoClear = false;
-    gl.clearDepth();
-    gl.render(scene, camera);
-    // Restore default
-    gl.autoClear = oldCLear;
-  }, renderPriority);
-  // Without an element that receives pointer events state.pointer will always be 0/0
-  return /*#__PURE__*/React.createElement("group", {
-    onPointerOver: () => null
-  });
-}
-function Hud({
-  children,
-  renderPriority = 1
-}) {
-  const {
-    scene: defaultScene,
-    camera: defaultCamera
-  } = useThree();
-  const [hudScene] = React.useState(() => new THREE.Scene());
-  return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(RenderHud, {
-    defaultScene: defaultScene,
-    defaultCamera: defaultCamera,
-    renderPriority: renderPriority
-  })), hudScene, {
-    events: {
-      priority: renderPriority + 1
-    }
-  }));
-}
-
-export { Hud };

package/core/Image.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./Texture.cjs.js"),s=require("../helpers/constants.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var l=i(e),u=c(r),f=c(t);const v=a.shaderMaterial({color:new f.Color("white"),scale:new f.Vector2(1,1),imageBounds:new f.Vector2(1,1),resolution:1024,map:null,zoom:1,radius:0,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  varying vec2 vPos;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n    vPos = position.xy;\n  }\n",`\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  varying vec2 vPos;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform float resolution;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float radius;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  \n  const float PI = 3.14159265;\n    \n  // from https://iquilezles.org/articles/distfunctions\n  float udRoundBox( vec2 p, vec2 b, float r ) {\n    return length(max(abs(p)-b+r,0.0))-r;\n  }\n\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n\n    vec2 res = vec2(scale * resolution);\n    vec2 halfRes = 0.5 * res;\n    float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);    \n\t  vec3 a = mix(vec3(1.0,0.0,0.0), vec3(0.0,0.0,0.0), smoothstep(0.0, 1.0, b));\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity * a), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n  }\n`),m=u.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:s=0,opacity:i=1,radius:c=0,texture:f,toneMapped:m,transparent:d,side:y,...g},p)=>{n.extend({ImageMaterial:v});const x=u.useRef(null),h=n.useThree((e=>e.size)),b=Array.isArray(a)?[a[0],a[1]]:[a,a],w=[f.image.width,f.image.height],j=Math.max(h.width,h.height);return u.useImperativeHandle(p,(()=>x.current),[]),u.useLayoutEffect((()=>{x.current.geometry.parameters&&x.current.material.scale.set(b[0]*x.current.geometry.parameters.width,b[1]*x.current.geometry.parameters.height)}),[b[0],b[1]]),u.createElement("mesh",l.default({ref:x,scale:Array.isArray(a)?[...a,1]:a},g),u.createElement("planeGeometry",{args:[1,1,t,t]}),u.createElement("imageMaterial",{color:r,map:f,zoom:o,grayscale:s,opacity:i,scale:b,imageBounds:w,resolution:j,radius:c,toneMapped:m,transparent:d,side:y,key:v.key}),e)})),d=u.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return u.createElement(m,l.default({},r,{texture:n,ref:t}))})),y=u.forwardRef((({url:e,...r},t)=>u.createElement(m,l.default({},r,{ref:t})))),g=u.forwardRef(((e,r)=>{if(e.url)return u.createElement(d,l.default({},e,{ref:r}));if(e.texture)return u.createElement(y,l.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;

package/core/Image.d.ts

@@ -1,38 +0,0 @@
-import * as THREE from 'three';
-import { Color, ThreeElements } from '@react-three/fiber';
-import { ForwardRefComponent } from '../helpers/ts-utils';
-export type ImageProps = Omit<ThreeElements['mesh'], 'scale'> & {
-    segments?: number;
-    scale?: number | [number, number];
-    color?: Color;
-    zoom?: number;
-    radius?: number;
-    grayscale?: number;
-    toneMapped?: boolean;
-    transparent?: boolean;
-    opacity?: number;
-    side?: THREE.Side;
-} & ({
-    texture: THREE.Texture;
-    url?: never;
-} | {
-    texture?: never;
-    url: string;
-});
-type ImageMaterialType = ThreeElements['shaderMaterial'] & {
-    scale?: number[];
-    imageBounds?: number[];
-    radius?: number;
-    resolution?: number;
-    color?: Color;
-    map: THREE.Texture;
-    zoom?: number;
-    grayscale?: number;
-};
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        imageMaterial: ImageMaterialType;
-    }
-}
-export declare const Image: ForwardRefComponent<ImageProps, THREE.Mesh>;
-export {};

package/core/Image.js

@@ -1,160 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import * as THREE from 'three';
-import { extend, useThree } from '@react-three/fiber';
-import { shaderMaterial } from './shaderMaterial.js';
-import { useTexture } from './Texture.js';
-import { version } from '../helpers/constants.js';
-
-// {texture: THREE.Texture} XOR {url: string}
-
-const ImageMaterialImpl = /* @__PURE__ */shaderMaterial({
-  color: /* @__PURE__ */new THREE.Color('white'),
-  scale: /* @__PURE__ */new THREE.Vector2(1, 1),
-  imageBounds: /* @__PURE__ */new THREE.Vector2(1, 1),
-  resolution: 1024,
-  map: null,
-  zoom: 1,
-  radius: 0,
-  grayscale: 0,
-  opacity: 1
-}, /* glsl */`
-  varying vec2 vUv;
-  varying vec2 vPos;
-  void main() {
-    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
-    vUv = uv;
-    vPos = position.xy;
-  }
-`, /* glsl */`
-  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44
-  varying vec2 vUv;
-  varying vec2 vPos;
-  uniform vec2 scale;
-  uniform vec2 imageBounds;
-  uniform float resolution;
-  uniform vec3 color;
-  uniform sampler2D map;
-  uniform float radius;
-  uniform float zoom;
-  uniform float grayscale;
-  uniform float opacity;
-  const vec3 luma = vec3(.299, 0.587, 0.114);
-  vec4 toGrayscale(vec4 color, float intensity) {
-    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);
-  }
-  vec2 aspect(vec2 size) {
-    return size / min(size.x, size.y);
-  }
-  
-  const float PI = 3.14159265;
-    
-  // from https://iquilezles.org/articles/distfunctions
-  float udRoundBox( vec2 p, vec2 b, float r ) {
-    return length(max(abs(p)-b+r,0.0))-r;
-  }
-
-  void main() {
-    vec2 s = aspect(scale);
-    vec2 i = aspect(imageBounds);
-    float rs = s.x / s.y;
-    float ri = i.x / i.y;
-    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);
-    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;
-    vec2 uv = vUv * s / new + offset;
-    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);
-
-    vec2 res = vec2(scale * resolution);
-    vec2 halfRes = 0.5 * res;
-    float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);    
-	  vec3 a = mix(vec3(1.0,0.0,0.0), vec3(0.0,0.0,0.0), smoothstep(0.0, 1.0, b));
-    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity * a), grayscale);
-    
-    #include <tonemapping_fragment>
-    #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
-  }
-`);
-const ImageBase = /* @__PURE__ */React.forwardRef(({
-  children,
-  color,
-  segments = 1,
-  scale = 1,
-  zoom = 1,
-  grayscale = 0,
-  opacity = 1,
-  radius = 0,
-  texture,
-  toneMapped,
-  transparent,
-  side,
-  ...props
-}, fref) => {
-  extend({
-    ImageMaterial: ImageMaterialImpl
-  });
-  const ref = React.useRef(null);
-  const size = useThree(state => state.size);
-  const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale];
-  const imageBounds = [texture.image.width, texture.image.height];
-  const resolution = Math.max(size.width, size.height);
-  React.useImperativeHandle(fref, () => ref.current, []);
-  React.useLayoutEffect(() => {
-    // Support arbitrary plane geometries (for instance with rounded corners)
-    // @ts-ignore
-    if (ref.current.geometry.parameters) {
-      // @ts-ignore
-      ref.current.material.scale.set(
-      // @ts-ignore
-      planeBounds[0] * ref.current.geometry.parameters.width,
-      // @ts-ignore
-      planeBounds[1] * ref.current.geometry.parameters.height);
-    }
-  }, [planeBounds[0], planeBounds[1]]);
-  return /*#__PURE__*/React.createElement("mesh", _extends({
-    ref: ref,
-    scale: Array.isArray(scale) ? [...scale, 1] : scale
-  }, props), /*#__PURE__*/React.createElement("planeGeometry", {
-    args: [1, 1, segments, segments]
-  }), /*#__PURE__*/React.createElement("imageMaterial", {
-    color: color,
-    map: texture,
-    zoom: zoom,
-    grayscale: grayscale,
-    opacity: opacity,
-    scale: planeBounds,
-    imageBounds: imageBounds,
-    resolution: resolution,
-    radius: radius,
-    toneMapped: toneMapped,
-    transparent: transparent,
-    side: side,
-    key: ImageMaterialImpl.key
-  }), children);
-});
-const ImageWithUrl = /* @__PURE__ */React.forwardRef(({
-  url,
-  ...props
-}, ref) => {
-  const texture = useTexture(url);
-  return /*#__PURE__*/React.createElement(ImageBase, _extends({}, props, {
-    texture: texture,
-    ref: ref
-  }));
-});
-const ImageWithTexture = /* @__PURE__ */React.forwardRef(({
-  url: _url,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/React.createElement(ImageBase, _extends({}, props, {
-    ref: ref
-  }));
-});
-const Image = /* @__PURE__ */React.forwardRef((props, ref) => {
-  if (props.url) return /*#__PURE__*/React.createElement(ImageWithUrl, _extends({}, props, {
-    ref: ref
-  }));else if (props.texture) return /*#__PURE__*/React.createElement(ImageWithTexture, _extends({}, props, {
-    ref: ref
-  }));else throw new Error('<Image /> requires a url or texture');
-});
-
-export { Image };

package/core/Instances.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("../helpers/deprecated.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 u=c(e),i=s(t),o=s(r);const l=new i.Matrix4,f=new i.Matrix4,d=[],m=new i.Mesh;class y extends i.Group{constructor(){super(),this.color=new i.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const r=this.instance.current;if(!r)return;if(!r.geometry||!r.material)return;m.geometry=r.geometry;const n=r.matrixWorld,a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,l),f.multiplyMatrices(n,l),m.matrixWorld=f,r.material instanceof i.Material?m.material.side=r.material.side:m.material.side=r.material[0].side,m.raycast(e,d);for(let e=0,r=d.length;e<r;e++){const r=d[e];r.instanceId=a,r.object=this,t.push(r)}d.length=0}}}const p=o.createContext(null),g=new i.Matrix4,x=new i.Matrix4,h=new i.Matrix4,b=new i.Vector3,M=new i.Quaternion,w=new i.Vector3,A=o.forwardRef((({context:e,children:t,...r},a)=>{o.useMemo((()=>n.extend({PositionMesh:y})),[]);const c=o.useRef(null);o.useImperativeHandle(a,(()=>c.current),[]);const{subscribe:s,getParent:i}=o.useContext(e||p);return o.useLayoutEffect((()=>s(c)),[]),o.createElement("positionMesh",u.default({instance:i(),instanceKey:c,ref:c},r),t)})),v=o.forwardRef((({context:e,children:t,range:r,limit:c=1e3,frames:s=1/0,...l},f)=>{const[{localContext:d,instance:m}]=o.useState((()=>{const e=o.createContext(null);return{localContext:e,instance:o.forwardRef(((t,r)=>o.createElement(A,u.default({context:e},t,{ref:r}))))}})),y=o.useRef(null);o.useImperativeHandle(f,(()=>y.current),[]);const[v,E]=o.useState([]),[[j,D]]=o.useState((()=>{const e=new Float32Array(16*c);for(let t=0;t<c;t++)h.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*c)].map((()=>1)))]}));o.useEffect((()=>{y.current.instanceMatrix.needsUpdate=!0}));let R=0,O=0;const C=o.useRef([]);o.useLayoutEffect((()=>{C.current=Object.entries(y.current.geometry.attributes).filter((([e,t])=>t.isInstancedBufferAttribute))})),n.useFrame((()=>{if(s===1/0||R<s){y.current.updateMatrix(),y.current.updateMatrixWorld(),g.copy(y.current.matrixWorld).invert(),O=Math.min(c,void 0!==r?r:c,v.length),y.current.count=O,a.setUpdateRange(y.current.instanceMatrix,{start:0,count:16*O}),a.setUpdateRange(y.current.instanceColor,{start:0,count:3*O});for(let e=0;e<v.length;e++){const t=v[e].current;t.matrixWorld.decompose(b,M,w),x.compose(b,M,w).premultiply(g),x.toArray(j,16*e),y.current.instanceMatrix.needsUpdate=!0,t.color.toArray(D,3*e),y.current.instanceColor.needsUpdate=!0}R++}}));const P=o.useMemo((()=>({getParent:()=>y,subscribe:e=>(E((t=>[...t,e])),()=>E((t=>t.filter((t=>t.current!==e.current)))))})),[]);return o.createElement("instancedMesh",u.default({userData:{instances:v,limit:c,frames:s},matrixAutoUpdate:!1,ref:y,args:[null,null,0],raycast:()=>null},l),o.createElement("instancedBufferAttribute",{attach:"instanceMatrix",args:[j,16],usage:i.DynamicDrawUsage}),o.createElement("instancedBufferAttribute",{attach:"instanceColor",args:[D,3],usage:i.DynamicDrawUsage}),"function"==typeof t?o.createElement(d.Provider,{value:P},t(m)):e?o.createElement(e.Provider,{value:P},t):o.createElement(p.Provider,{value:P},t))})),E=o.forwardRef((function({meshes:e,children:t,...r},n){const a=Array.isArray(e);if(!a)for(const t of Object.keys(e))e[t].isMesh||delete e[t];const c=(a?e:Object.values(e)).map((({geometry:e,material:t})=>o.createElement(v,u.default({key:e.uuid,geometry:e,material:t},r))));return o.createElement("group",{ref:n},j((r=>a?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{}))),c))}));function j(e,t,r=[]){if(!t[0])return e(r);function n(n){return j(e,t.slice(1),r.concat([n]))}return"function"==typeof t[0]?t[0]({results:r,render:n}):o.cloneElement(t[0],{children:n})}const D=o.forwardRef((({name:e,defaultValue:t,normalized:r,usage:a=i.DynamicDrawUsage},c)=>{const s=o.useRef(null);o.useImperativeHandle(c,(()=>s.current),[]),o.useLayoutEffect((()=>{const r=s.current.__r3f.parent.object;r.geometry.attributes[e]=s.current;const n=Array.isArray(t)?t:[t],a=Array.from({length:r.userData.limit},(()=>n)).flat();return s.current.array=new Float32Array(a),s.current.itemSize=n.length,s.current.count=a.length/s.current.itemSize,()=>{delete r.geometry.attributes[e]}}),[e]);let u=0;return n.useFrame((()=>{const t=s.current.__r3f.parent.object;if(t.userData.frames===1/0||u<t.userData.frames){for(let r=0;r<t.userData.instances.length;r++){const n=t.userData.instances[r].current[e];void 0!==n&&(s.current.set(Array.isArray(n)?n:"function"==typeof n.toArray?n.toArray():[n],r*s.current.itemSize),s.current.needsUpdate=!0)}u++}})),o.createElement("instancedBufferAttribute",{ref:s,usage:a,normalized:r})}));exports.Instance=A,exports.InstancedAttribute=D,exports.Instances=v,exports.Merged=E,exports.PositionMesh=y,exports.createInstances=function(){const e=o.createContext(null);return[o.forwardRef(((t,r)=>o.createElement(v,u.default({ref:r,context:e},t)))),o.forwardRef(((t,r)=>o.createElement(A,u.default({ref:r,context:e},t))))]};

package/core/Instances.d.ts

@@ -1,64 +0,0 @@
-import * as THREE from 'three';
-import * as React from 'react';
-import { ThreeElement, ThreeElements } from '@react-three/fiber';
-import { ForwardRefComponent } from '../helpers/ts-utils';
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        positionMesh: ThreeElement<typeof PositionMesh>;
-    }
-}
-type Api = {
-    getParent: () => React.RefObject<InstancedMesh>;
-    subscribe: <T>(ref: React.RefObject<T>) => void;
-};
-export type InstancesProps = Omit<ThreeElements['instancedMesh'], 'ref' | 'args'> & {
-    context?: React.Context<Api>;
-    range?: number;
-    limit?: number;
-    frames?: number;
-};
-export type InstanceProps = Omit<ThreeElements['positionMesh'], 'ref'> & {
-    context?: React.Context<Api>;
-};
-export type InstancedAttributeProps = Omit<ThreeElements['instancedBufferAttribute'], 'ref' | 'args'> & {
-    name: string;
-    defaultValue: any;
-    normalized?: boolean;
-    usage?: number;
-};
-type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor'> & {
-    instanceMatrix: THREE.InstancedBufferAttribute;
-    instanceColor: THREE.InstancedBufferAttribute;
-};
-export declare class PositionMesh extends THREE.Group {
-    color: THREE.Color;
-    instance: React.RefObject<THREE.InstancedMesh | undefined>;
-    instanceKey: React.RefObject<PositionMesh | undefined>;
-    constructor();
-    get geometry(): THREE.BufferGeometry<THREE.NormalBufferAttributes> | undefined;
-    raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
-}
-export declare const Instance: 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<PositionMesh, import("@react-three/fiber").MathProps<PositionMesh> & import("@react-three/fiber").ReactProps<PositionMesh> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<PositionMesh, typeof PositionMesh>, "object">>>, "ref"> & {
-    context?: React.Context<Api>;
-} & React.RefAttributes<unknown>>;
-export declare const Instances: ForwardRefComponent<InstancesProps, THREE.InstancedMesh>;
-export interface MergedProps extends Omit<InstancesProps, 'children'> {
-    meshes: THREE.Mesh[] | Record<string, THREE.Object3D>;
-    children: (...instances: [React.FC<InstanceProps> & Record<string, React.FC<InstanceProps>>, ...React.FC<InstanceProps>[]]) => React.ReactNode;
-}
-export declare const Merged: ForwardRefComponent<MergedProps, THREE.Group>;
-export declare function createInstances<T = InstanceProps>(): readonly [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<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>, import("@react-three/fiber").MathProps<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>> & import("@react-three/fiber").ReactProps<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>, typeof THREE.InstancedMesh>, "object">>>, "ref" | "args"> & {
-    context?: React.Context<Api>;
-    range?: number;
-    limit?: number;
-    frames?: number;
-} & React.RefAttributes<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>>>, React.ForwardRefExoticComponent<React.PropsWithoutRef<T & 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<PositionMesh, import("@react-three/fiber").MathProps<PositionMesh> & import("@react-three/fiber").ReactProps<PositionMesh> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<PositionMesh, typeof PositionMesh>, "object">>>, "ref"> & {
-    context?: React.Context<Api>;
-}> & React.RefAttributes<PositionMesh & T>>];
-export declare const InstancedAttribute: 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<THREE.InstancedBufferAttribute, import("@react-three/fiber").MathProps<THREE.InstancedBufferAttribute> & import("@react-three/fiber").ReactProps<THREE.InstancedBufferAttribute>>>, Omit<import("@react-three/fiber").InstanceProps<THREE.InstancedBufferAttribute, typeof THREE.InstancedBufferAttribute>, "object">>>, "ref" | "args"> & {
-    name: string;
-    defaultValue: any;
-    normalized?: boolean;
-    usage?: number;
-} & React.RefAttributes<unknown>>;
-export {};