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

package/core/GradientTexture.js

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,160 @@
+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

@@ -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("@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

@@ -0,0 +1,64 @@
+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 {};