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

package/core/Stars.js

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Color, AdditiveBlending, ShaderMaterial, Vector3, Spherical } from 'three';
+import { version } from '../helpers/constants.js';
+
+class StarfieldMaterial extends ShaderMaterial {
+  constructor() {
+    super({
+      uniforms: {
+        time: {
+          value: 0.0
+        },
+        fade: {
+          value: 1.0
+        }
+      },
+      vertexShader: /* glsl */`
+      uniform float time;
+      attribute float size;
+      varying vec3 vColor;
+      void main() {
+        vColor = color;
+        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);
+        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));
+        gl_Position = projectionMatrix * mvPosition;
+      }`,
+      fragmentShader: /* glsl */`
+      uniform sampler2D pointTexture;
+      uniform float fade;
+      varying vec3 vColor;
+      void main() {
+        float opacity = 1.0;
+        if (fade == 1.0) {
+          float d = distance(gl_PointCoord, vec2(0.5, 0.5));
+          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
+        }
+        gl_FragColor = vec4(vColor, opacity);
+
+        #include <tonemapping_fragment>
+	      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      }`
+    });
+  }
+}
+const genStar = r => {
+  return new Vector3().setFromSpherical(new Spherical(r, Math.acos(1 - Math.random() * 2), Math.random() * 2 * Math.PI));
+};
+const Stars = /* @__PURE__ */React.forwardRef(({
+  radius = 100,
+  depth = 50,
+  count = 5000,
+  saturation = 0,
+  factor = 4,
+  fade = false,
+  speed = 1
+}, ref) => {
+  const material = React.useRef(null);
+  const [position, color, size] = React.useMemo(() => {
+    const positions = [];
+    const colors = [];
+    const sizes = Array.from({
+      length: count
+    }, () => (0.5 + 0.5 * Math.random()) * factor);
+    const color = new Color();
+    let r = radius + depth;
+    const increment = depth / count;
+    for (let i = 0; i < count; i++) {
+      r -= increment * Math.random();
+      positions.push(...genStar(r).toArray());
+      color.setHSL(i / count, saturation, 0.9);
+      colors.push(color.r, color.g, color.b);
+    }
+    return [new Float32Array(positions), new Float32Array(colors), new Float32Array(sizes)];
+  }, [count, depth, factor, radius, saturation]);
+  useFrame(state => material.current && (material.current.uniforms.time.value = state.clock.elapsedTime * speed));
+  const [starfieldMaterial] = React.useState(() => new StarfieldMaterial());
+  return /*#__PURE__*/React.createElement("points", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-position",
+    args: [position, 3]
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-color",
+    args: [color, 3]
+  }), /*#__PURE__*/React.createElement("bufferAttribute", {
+    attach: "attributes-size",
+    args: [size, 1]
+  })), /*#__PURE__*/React.createElement("primitive", {
+    ref: material,
+    object: starfieldMaterial,
+    attach: "material",
+    blending: AdditiveBlending,
+    "uniforms-fade-value": fade,
+    depthWrite: false,
+    transparent: true,
+    vertexColors: true
+  }));
+});
+
+export { Stars };

package/core/Stats.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats.js"),n=require("../helpers/useEffectfulState.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 f=c(e),l=u(r);exports.Stats=function({showPanel:e=0,className:r,parent:u}){const c=n.useEffectfulState((()=>new l.default),[]);return f.useEffect((()=>{if(c){const n=u&&u.current||document.body;c.showPanel(e),null==n||n.appendChild(c.dom);const f=(null!=r?r:"").split(" ").filter((e=>e));f.length&&c.dom.classList.add(...f);const l=t.addEffect((()=>c.begin())),s=t.addAfterEffect((()=>c.end()));return()=>{f.length&&c.dom.classList.remove(...f),null==n||n.removeChild(c.dom),l(),s()}}}),[u,c,r,e]),null};

package/core/Stats.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type StatsProps = {
+    showPanel?: number;
+    className?: string;
+    parent?: React.RefObject<HTMLElement>;
+};
+export declare function Stats({ showPanel, className, parent }: StatsProps): null;

package/core/Stats.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { addEffect, addAfterEffect } from '@react-three/fiber';
+import StatsImpl from 'stats.js';
+import { useEffectfulState } from '../helpers/useEffectfulState.js';
+
+function Stats({
+  showPanel = 0,
+  className,
+  parent
+}) {
+  const stats = useEffectfulState(() => new StatsImpl(), []);
+  React.useEffect(() => {
+    if (stats) {
+      const node = parent && parent.current || document.body;
+      stats.showPanel(showPanel);
+      node == null || node.appendChild(stats.dom);
+      const classNames = (className !== null && className !== void 0 ? className : '').split(' ').filter(cls => cls);
+      if (classNames.length) stats.dom.classList.add(...classNames);
+      const begin = addEffect(() => stats.begin());
+      const end = addAfterEffect(() => stats.end());
+      return () => {
+        if (classNames.length) stats.dom.classList.remove(...classNames);
+        node == null || node.removeChild(stats.dom);
+        begin();
+        end();
+      };
+    }
+  }, [parent, stats, className, showPanel]);
+  return null;
+}
+
+export { Stats };

package/core/StatsGl.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("stats-gl");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(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=l(t),u=n(r);const s=o.forwardRef((function({className:t,parent:r,id:n,clearStatsGlStyle:l,...s},c){const a=e.useThree((e=>e.gl)),d=o.useMemo((()=>{const e=new u.default({...s});return e.init(a),e}),[a]);return o.useImperativeHandle(c,(()=>d.domElement),[d]),o.useEffect((()=>{if(d){const o=r&&r.current||document.body;null==o||o.appendChild(d.domElement),d.domElement.querySelectorAll("canvas").forEach((e=>{e.style.removeProperty("position")})),n&&(d.domElement.id=n),l&&d.domElement.removeAttribute("style"),d.domElement.removeAttribute("style");const u=(null!=t?t:"").split(" ").filter((e=>e));u.length&&d.domElement.classList.add(...u);const s=e.addAfterEffect((()=>d.update()));return()=>{u.length&&d.domElement.classList.remove(...u),null==o||o.removeChild(d.domElement),s()}}}),[r,d,t,n,l]),null}));exports.StatsGl=s;

package/core/StatsGl.d.ts

@@ -0,0 +1,14 @@
+import { ForwardRefComponent } from '../helpers/ts-utils';
+import * as React from 'react';
+import Stats from 'stats-gl';
+type StatsOptions = ConstructorParameters<typeof Stats>[0];
+export type StatsGlProps = Partial<StatsOptions> & {
+    id?: string;
+    clearStatsGlStyle?: boolean;
+    showPanel?: number;
+    className?: string;
+    parent?: React.RefObject<HTMLElement>;
+    ref?: React.RefObject<HTMLElement>;
+};
+export declare const StatsGl: ForwardRefComponent<StatsGlProps, HTMLDivElement>;
+export {};

package/core/StatsGl.js

@@ -0,0 +1,44 @@
+import { useThree, addAfterEffect } from '@react-three/fiber';
+import * as React from 'react';
+import Stats from 'stats-gl';
+
+const StatsGl = /* @__PURE__ */React.forwardRef(function StatsGl({
+  className,
+  parent,
+  id,
+  clearStatsGlStyle,
+  ...props
+}, fref) {
+  const gl = useThree(state => state.gl);
+  const stats = React.useMemo(() => {
+    const stats = new Stats({
+      ...props
+    });
+    stats.init(gl);
+    return stats;
+  }, [gl]);
+  React.useImperativeHandle(fref, () => stats.domElement, [stats]);
+  React.useEffect(() => {
+    if (stats) {
+      const node = parent && parent.current || document.body;
+      node == null || node.appendChild(stats.domElement);
+      stats.domElement.querySelectorAll('canvas').forEach(canvas => {
+        canvas.style.removeProperty('position');
+      });
+      if (id) stats.domElement.id = id;
+      if (clearStatsGlStyle) stats.domElement.removeAttribute('style');
+      stats.domElement.removeAttribute('style');
+      const classNames = (className !== null && className !== void 0 ? className : '').split(' ').filter(cls => cls);
+      if (classNames.length) stats.domElement.classList.add(...classNames);
+      const end = addAfterEffect(() => stats.update());
+      return () => {
+        if (classNames.length) stats.domElement.classList.remove(...classNames);
+        node == null || node.removeChild(stats.domElement);
+        end();
+      };
+    }
+  }, [parent, stats, className, id, clearStatsGlStyle]);
+  return null;
+});
+
+export { StatsGl };

package/core/Svg.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),a=require("three"),s=require("three-stdlib");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=l(e),u=o(r);const n=r.forwardRef((function({src:e,skipFill:l,skipStrokes:o,fillMaterial:n,strokeMaterial:c,fillMeshProps:d,strokeMeshProps:f,...p},m){const y=t.useLoader(s.SVGLoader,e.startsWith("<svg")?`data:image/svg+xml;utf8,${e}`:e),h=r.useMemo((()=>o?[]:y.paths.map((e=>{var t;return void 0===(null==(t=e.userData)?void 0:t.style.stroke)||"none"===e.userData.style.stroke?null:e.subPaths.map((t=>s.SVGLoader.pointsToStroke(t.getPoints(),e.userData.style)))}))),[y,o]);r.useEffect((()=>()=>h.forEach((e=>e&&e.map((e=>e.dispose()))))),[h]);let b=0;return u.createElement("object3D",i.default({ref:m},p),u.createElement("object3D",{scale:[1,-1,1]},y.paths.map(((e,t)=>{var p,m;return u.createElement(r.Fragment,{key:t},!l&&void 0!==(null==(p=e.userData)?void 0:p.style.fill)&&"none"!==e.userData.style.fill&&s.SVGLoader.createShapes(e).map(((t,r)=>u.createElement("mesh",i.default({key:r},d,{renderOrder:b++}),u.createElement("shapeGeometry",{args:[t]}),u.createElement("meshBasicMaterial",i.default({color:e.userData.style.fill,opacity:e.userData.style.fillOpacity,transparent:!0,side:a.DoubleSide,depthWrite:!1},n))))),!o&&void 0!==(null==(m=e.userData)?void 0:m.style.stroke)&&"none"!==e.userData.style.stroke&&e.subPaths.map(((r,s)=>u.createElement("mesh",i.default({key:s,geometry:h[t][s]},f,{renderOrder:b++}),u.createElement("meshBasicMaterial",i.default({color:e.userData.style.stroke,opacity:e.userData.style.strokeOpacity,transparent:!0,side:a.DoubleSide,depthWrite:!1},c))))))}))))}));exports.Svg=n;

package/core/Svg.d.ts

@@ -0,0 +1,13 @@
+import { ThreeElements } from '@react-three/fiber';
+import { Object3D } from 'three';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export interface SvgProps extends Omit<ThreeElements['object3D'], 'ref'> {
+    src: string;
+    skipFill?: boolean;
+    skipStrokes?: boolean;
+    fillMaterial?: ThreeElements['meshBasicMaterial'];
+    strokeMaterial?: ThreeElements['meshBasicMaterial'];
+    fillMeshProps?: ThreeElements['mesh'];
+    strokeMeshProps?: ThreeElements['mesh'];
+}
+export declare const Svg: ForwardRefComponent<SvgProps, Object3D>;

package/core/Svg.js

@@ -0,0 +1,62 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useLoader } from '@react-three/fiber';
+import * as React from 'react';
+import { forwardRef, useMemo, useEffect, Fragment } from 'react';
+import { DoubleSide } from 'three';
+import { SVGLoader } from 'three-stdlib';
+
+const Svg = /* @__PURE__ */forwardRef(function R3FSvg({
+  src,
+  skipFill,
+  skipStrokes,
+  fillMaterial,
+  strokeMaterial,
+  fillMeshProps,
+  strokeMeshProps,
+  ...props
+}, ref) {
+  const svg = useLoader(SVGLoader, !src.startsWith('<svg') ? src : `data:image/svg+xml;utf8,${src}`);
+  const strokeGeometries = useMemo(() => skipStrokes ? [] : svg.paths.map(path => {
+    var _path$userData;
+    return ((_path$userData = path.userData) == null ? void 0 : _path$userData.style.stroke) === undefined || path.userData.style.stroke === 'none' ? null : path.subPaths.map(subPath => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style));
+  }), [svg, skipStrokes]);
+  useEffect(() => {
+    return () => strokeGeometries.forEach(group => group && group.map(g => g.dispose()));
+  }, [strokeGeometries]);
+  let renderOrder = 0;
+  return /*#__PURE__*/React.createElement("object3D", _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement("object3D", {
+    scale: [1, -1, 1]
+  }, svg.paths.map((path, p) => {
+    var _path$userData2, _path$userData3;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: p
+    }, !skipFill && ((_path$userData2 = path.userData) == null ? void 0 : _path$userData2.style.fill) !== undefined && path.userData.style.fill !== 'none' && SVGLoader.createShapes(path).map((shape, s) => /*#__PURE__*/React.createElement("mesh", _extends({
+      key: s
+    }, fillMeshProps, {
+      renderOrder: renderOrder++
+    }), /*#__PURE__*/React.createElement("shapeGeometry", {
+      args: [shape]
+    }), /*#__PURE__*/React.createElement("meshBasicMaterial", _extends({
+      color: path.userData.style.fill,
+      opacity: path.userData.style.fillOpacity,
+      transparent: true,
+      side: DoubleSide,
+      depthWrite: false
+    }, fillMaterial)))), !skipStrokes && ((_path$userData3 = path.userData) == null ? void 0 : _path$userData3.style.stroke) !== undefined && path.userData.style.stroke !== 'none' && path.subPaths.map((_subPath, s) => /*#__PURE__*/React.createElement("mesh", _extends({
+      key: s,
+      geometry: strokeGeometries[p][s]
+    }, strokeMeshProps, {
+      renderOrder: renderOrder++
+    }), /*#__PURE__*/React.createElement("meshBasicMaterial", _extends({
+      color: path.userData.style.stroke,
+      opacity: path.userData.style.strokeOpacity,
+      transparent: true,
+      side: DoubleSide,
+      depthWrite: false
+    }, strokeMaterial)))));
+  })));
+});
+
+export { Svg };

package/core/Text.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("troika-three-text"),n=require("@react-three/fiber"),o=require("suspend-react");function c(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 a=c(e),i=u(t);const f=i.forwardRef((({sdfGlyphSize:e=64,anchorX:t="center",anchorY:c="middle",font:u,fontSize:f=1,children:s,characters:d,onSync:l,...p},h)=>{const b=n.useThree((({invalidate:e})=>e)),[y]=i.useState((()=>new r.Text)),[j,m]=i.useMemo((()=>{const e=[];let t="";return i.Children.forEach(s,(r=>{"string"==typeof r||"number"==typeof r?t+=r:e.push(r)})),[e,t]}),[s]);return o.suspend((()=>new Promise((e=>r.preloadFont({font:u,characters:d},e)))),["troika-text",u,d]),i.useLayoutEffect((()=>{y.sync((()=>{b(),l&&l(y)}))})),i.useEffect((()=>()=>y.dispose()),[y]),i.createElement("primitive",a.default({object:y,ref:h,font:u,text:m,anchorX:t,anchorY:c,fontSize:f,sdfGlyphSize:e},p),j)}));exports.Text=f;

package/core/Text.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type TextProps = Omit<ThreeElements['mesh'], 'ref'> & {
+    children: React.ReactNode;
+    characters?: string;
+    color?: ReactThreeFiber.Color;
+    fontSize?: number;
+    fontWeight?: number | string;
+    fontStyle?: 'italic' | 'normal';
+    maxWidth?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+    textAlign?: 'left' | 'right' | 'center' | 'justify';
+    font?: string;
+    anchorX?: number | 'left' | 'center' | 'right';
+    anchorY?: number | 'top' | 'top-baseline' | 'middle' | 'bottom-baseline' | 'bottom';
+    clipRect?: [number, number, number, number];
+    depthOffset?: number;
+    direction?: 'auto' | 'ltr' | 'rtl';
+    overflowWrap?: 'normal' | 'break-word';
+    whiteSpace?: 'normal' | 'overflowWrap' | 'nowrap';
+    outlineWidth?: number | string;
+    outlineOffsetX?: number | string;
+    outlineOffsetY?: number | string;
+    outlineBlur?: number | string;
+    outlineColor?: ReactThreeFiber.Color;
+    outlineOpacity?: number;
+    strokeWidth?: number | string;
+    strokeColor?: ReactThreeFiber.Color;
+    strokeOpacity?: number;
+    fillOpacity?: number;
+    sdfGlyphSize?: number;
+    debugSDF?: boolean;
+    glyphGeometryDetail?: number;
+    onSync?: (troika: any) => void;
+};
+export declare const Text: ForwardRefComponent<TextProps, any>;

package/core/Text.js

@@ -0,0 +1,57 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Text as Text$1, preloadFont } from 'troika-three-text';
+import { useThree } from '@react-three/fiber';
+import { suspend } from 'suspend-react';
+
+const Text = /* @__PURE__ */React.forwardRef(({
+  sdfGlyphSize = 64,
+  anchorX = 'center',
+  anchorY = 'middle',
+  font,
+  fontSize = 1,
+  children,
+  characters,
+  onSync,
+  ...props
+}, ref) => {
+  const invalidate = useThree(({
+    invalidate
+  }) => invalidate);
+  const [troikaMesh] = React.useState(() => new Text$1());
+  const [nodes, text] = React.useMemo(() => {
+    const n = [];
+    let t = '';
+    React.Children.forEach(children, child => {
+      if (typeof child === 'string' || typeof child === 'number') {
+        t += child;
+      } else {
+        n.push(child);
+      }
+    });
+    return [n, t];
+  }, [children]);
+  suspend(() => new Promise(res => preloadFont({
+    font,
+    characters
+  }, res)), ['troika-text', font, characters]);
+  React.useLayoutEffect(() => void troikaMesh.sync(() => {
+    invalidate();
+    if (onSync) onSync(troikaMesh);
+  }));
+  React.useEffect(() => {
+    return () => troikaMesh.dispose();
+  }, [troikaMesh]);
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    object: troikaMesh,
+    ref: ref,
+    font: font,
+    text: text,
+    anchorX: anchorX,
+    anchorY: anchorY,
+    fontSize: fontSize,
+    sdfGlyphSize: sdfGlyphSize
+  }, props), nodes);
+});
+
+export { Text };

package/core/Text3D.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("@react-three/fiber"),n=require("three-stdlib"),u=require("./useFont.cjs.js");function s(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)}require("suspend-react");var i=s(e),l=c(t);const o=["string","number"],a=l.forwardRef((({font:e,letterSpacing:s=0,lineHeight:c=1,size:a=1,height:f=.2,bevelThickness:m=.1,bevelSize:b=.01,bevelEnabled:d=!1,bevelOffset:g=0,bevelSegments:h=4,curveSegments:v=8,smooth:p,children:y,...j},x)=>{l.useMemo((()=>r.extend({RenamedTextGeometry:n.TextGeometry})),[]);const O=l.useRef(null),S=u.useFont(e),E=t.useMemo((()=>({font:S,size:a,height:f,bevelThickness:m,bevelSize:b,bevelEnabled:d,bevelSegments:h,bevelOffset:g,curveSegments:v,letterSpacing:s,lineHeight:c})),[S,a,f,m,b,d,h,g,v,s,c]),[q,...M]=t.useMemo((()=>(e=>{let t="";const r=[];return l.Children.forEach(e,(e=>{o.includes(typeof e)?t+=e+"":r.push(e)})),[t,...r]})(y)),[y]),T=l.useMemo((()=>[q,E]),[q,E]);return l.useLayoutEffect((()=>{p&&(O.current.geometry=n.mergeVertices(O.current.geometry,p),O.current.geometry.computeVertexNormals())}),[T,p]),l.useImperativeHandle(x,(()=>O.current),[]),l.createElement("mesh",i.default({},j,{ref:O}),l.createElement("renamedTextGeometry",{args:T}),M)}));exports.Text3D=a;

package/core/Text3D.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { ThreeElement, ThreeElements } from '@react-three/fiber';
+import { TextGeometry, TextGeometryParameters } from 'three-stdlib';
+import { FontData } from './useFont';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        renamedTextGeometry: ThreeElement<typeof TextGeometry>;
+    }
+}
+export type Text3DProps = Omit<ThreeElements['mesh'], 'ref'> & {
+    font: FontData | string;
+    bevelSegments?: number;
+    smooth?: number;
+} & Omit<TextGeometryParameters, 'font'>;
+export declare const Text3D: ForwardRefComponent<React.PropsWithChildren<Text3DProps & {
+    letterSpacing?: number;
+    lineHeight?: number;
+}>, THREE.Mesh>;

package/core/Text3D.js

@@ -0,0 +1,74 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { extend } from '@react-three/fiber';
+import { TextGeometry, mergeVertices } from 'three-stdlib';
+import { useFont } from './useFont.js';
+
+const types = ['string', 'number'];
+const getTextFromChildren = children => {
+  let label = '';
+  const rest = [];
+  React.Children.forEach(children, child => {
+    if (types.includes(typeof child)) label += child + '';else rest.push(child);
+  });
+  return [label, ...rest];
+};
+const Text3D = /* @__PURE__ */React.forwardRef(({
+  font: _font,
+  letterSpacing = 0,
+  lineHeight = 1,
+  size = 1,
+  height = 0.2,
+  bevelThickness = 0.1,
+  bevelSize = 0.01,
+  bevelEnabled = false,
+  bevelOffset = 0,
+  bevelSegments = 4,
+  curveSegments = 8,
+  smooth,
+  children,
+  ...props
+}, fref) => {
+  React.useMemo(() => extend({
+    RenamedTextGeometry: TextGeometry
+  }), []);
+  const ref = React.useRef(null);
+  const font = useFont(_font);
+  const opts = useMemo(() => {
+    return {
+      font,
+      size,
+      height,
+      bevelThickness,
+      bevelSize,
+      bevelEnabled,
+      bevelSegments,
+      bevelOffset,
+      curveSegments,
+      letterSpacing,
+      lineHeight
+    };
+  }, [font, size, height, bevelThickness, bevelSize, bevelEnabled, bevelSegments, bevelOffset, curveSegments, letterSpacing, lineHeight]);
+
+  /**
+   * We need the `children` in the deps because we
+   * need to be able to do `<Text3d>{state}</Text3d>`.
+   */
+  const [label, ...rest] = useMemo(() => getTextFromChildren(children), [children]);
+  const args = React.useMemo(() => [label, opts], [label, opts]);
+  React.useLayoutEffect(() => {
+    if (smooth) {
+      ref.current.geometry = mergeVertices(ref.current.geometry, smooth);
+      ref.current.geometry.computeVertexNormals();
+    }
+  }, [args, smooth]);
+  React.useImperativeHandle(fref, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("mesh", _extends({}, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("renamedTextGeometry", {
+    args: args
+  }), rest);
+});
+
+export { Text3D };

package/core/Texture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=u(e);const o=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function a(u,n){const a=t.useThree((e=>e.gl)),c=t.useLoader(r.TextureLoader,o(u)?Object.values(u):u);e.useLayoutEffect((()=>{null==n||n(c)}),[n]),e.useEffect((()=>{if("initTexture"in a){let e=[];Array.isArray(c)?e=c:c instanceof r.Texture?e=[c]:o(c)&&(e=Object.values(c)),e.forEach((e=>{e instanceof r.Texture&&a.initTexture(e)}))}}),[a,c]);return e.useMemo((()=>{if(o(u)){const e={};let r=0;for(const t in u)e[t]=c[r++];return e}return c}),[u,c])}a.preload=e=>t.useLoader.preload(r.TextureLoader,e),a.clear=e=>t.useLoader.clear(r.TextureLoader,e);exports.IsObject=o,exports.Texture=({children:e,input:r,onLoad:t})=>{const u=a(r,t);return n.createElement(n.Fragment,null,null==e?void 0:e(u))},exports.useTexture=a;

package/core/Texture.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Texture as _Texture } from 'three';
+export declare const IsObject: (url: unknown) => url is Record<string, string>;
+type TextureArray<T> = T extends string[] ? _Texture[] : never;
+type TextureRecord<T> = T extends Record<string, string> ? {
+    [key in keyof T]: _Texture;
+} : never;
+type SingleTexture<T> = T extends string ? _Texture : never;
+export type MappedTextureType<T extends string[] | string | Record<string, string>> = TextureArray<T> | TextureRecord<T> | SingleTexture<T>;
+export declare function useTexture<Url extends string[] | string | Record<string, string>>(input: Url, onLoad?: (texture: MappedTextureType<Url>) => void): MappedTextureType<Url>;
+export declare namespace useTexture {
+    var preload: (url: string | string[]) => void;
+    var clear: (input: string | string[]) => void;
+}
+export declare const Texture: ({ children, input, onLoad, }: {
+    children?: (texture: ReturnType<typeof useTexture>) => React.ReactNode;
+    input: Parameters<typeof useTexture>[0];
+    onLoad?: Parameters<typeof useTexture>[1];
+}) => React.JSX.Element;
+export {};

package/core/Texture.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { useLayoutEffect, useEffect, useMemo } from 'react';
+import { TextureLoader, Texture as Texture$1 } from 'three';
+import { useThree, useLoader } from '@react-three/fiber';
+
+const IsObject = url => url === Object(url) && !Array.isArray(url) && typeof url !== 'function';
+function useTexture(input, onLoad) {
+  const gl = useThree(state => state.gl);
+  const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input);
+  useLayoutEffect(() => {
+    onLoad == null || onLoad(textures);
+  }, [onLoad]);
+
+  // https://github.com/mrdoob/three.js/issues/22696
+  // Upload the texture to the GPU immediately instead of waiting for the first render
+  // NOTE: only available for WebGLRenderer
+  useEffect(() => {
+    if ('initTexture' in gl) {
+      let textureArray = [];
+      if (Array.isArray(textures)) {
+        textureArray = textures;
+      } else if (textures instanceof Texture$1) {
+        textureArray = [textures];
+      } else if (IsObject(textures)) {
+        textureArray = Object.values(textures);
+      }
+      textureArray.forEach(texture => {
+        if (texture instanceof Texture$1) {
+          gl.initTexture(texture);
+        }
+      });
+    }
+  }, [gl, textures]);
+  const mappedTextures = useMemo(() => {
+    if (IsObject(input)) {
+      const keyed = {};
+      let i = 0;
+      for (const key in input) keyed[key] = textures[i++];
+      return keyed;
+    } else {
+      return textures;
+    }
+  }, [input, textures]);
+  return mappedTextures;
+}
+useTexture.preload = url => useLoader.preload(TextureLoader, url);
+useTexture.clear = input => useLoader.clear(TextureLoader, input);
+
+//
+
+const Texture = ({
+  children,
+  input,
+  onLoad
+}) => {
+  const ret = useTexture(input, onLoad);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(ret));
+};
+
+export { IsObject, Texture, useTexture };

package/core/TrackballControls.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 s=o(e),c=a(r);const u=c.forwardRef((({makeDefault:e,camera:r,domElement:o,regress:a,onChange:u,onStart:i,onEnd:f,...l},d)=>{const{invalidate:v,camera:m,gl:b,events:E,set:p,get:g,performance:h,viewport:j}=t.useThree(),O=r||m,L=o||E.connected||b.domElement,y=c.useMemo((()=>new n.TrackballControls(O)),[O]);return t.useFrame((()=>{y.enabled&&y.update()}),-1),c.useEffect((()=>(y.connect(L),()=>{y.dispose()})),[L,a,y,v]),c.useEffect((()=>{const e=e=>{v(),a&&h.regress(),u&&u(e)};return y.addEventListener("change",e),i&&y.addEventListener("start",i),f&&y.addEventListener("end",f),()=>{i&&y.removeEventListener("start",i),f&&y.removeEventListener("end",f),y.removeEventListener("change",e)}}),[u,i,f,y,v]),c.useEffect((()=>{y.handleResize()}),[j]),c.useEffect((()=>{if(e){const e=g().controls;return p({controls:y}),()=>p({controls:e})}}),[e,y]),c.createElement("primitive",s.default({ref:d,object:y},l))}));exports.TrackballControls=u;

package/core/TrackballControls.d.ts

@@ -0,0 +1,15 @@
+import { ReactThreeFiber, ThreeElement } from '@react-three/fiber';
+import * as THREE from 'three';
+import { TrackballControls as TrackballControlsImpl } from 'three-stdlib';
+import { ForwardRefComponent, Overwrite } from '../helpers/ts-utils';
+export type TrackballControlsProps = Omit<Overwrite<ThreeElement<typeof TrackballControlsImpl>, {
+    target?: ReactThreeFiber.Vector3;
+    camera?: THREE.Camera;
+    domElement?: HTMLElement;
+    regress?: boolean;
+    makeDefault?: boolean;
+    onChange?: (e?: THREE.Event) => void;
+    onStart?: (e?: THREE.Event) => void;
+    onEnd?: (e?: THREE.Event) => void;
+}>, 'ref' | 'args'>;
+export declare const TrackballControls: ForwardRefComponent<TrackballControlsProps, TrackballControlsImpl>;