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

package/core/TrackballControls.js

@@ -0,0 +1,72 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as React from 'react';
+import { TrackballControls as TrackballControls$1 } from 'three-stdlib';
+
+const TrackballControls = /* @__PURE__ */React.forwardRef(({
+  makeDefault,
+  camera,
+  domElement,
+  regress,
+  onChange,
+  onStart,
+  onEnd,
+  ...restProps
+}, ref) => {
+  const {
+    invalidate,
+    camera: defaultCamera,
+    gl,
+    events,
+    set,
+    get,
+    performance,
+    viewport
+  } = useThree();
+  const explCamera = camera || defaultCamera;
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new TrackballControls$1(explCamera), [explCamera]);
+  useFrame(() => {
+    if (controls.enabled) controls.update();
+  }, -1);
+  React.useEffect(() => {
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, regress, controls, invalidate]);
+  React.useEffect(() => {
+    const callback = e => {
+      invalidate();
+      if (regress) performance.regress();
+      if (onChange) onChange(e);
+    };
+    controls.addEventListener('change', callback);
+    if (onStart) controls.addEventListener('start', onStart);
+    if (onEnd) controls.addEventListener('end', onEnd);
+    return () => {
+      if (onStart) controls.removeEventListener('start', onStart);
+      if (onEnd) controls.removeEventListener('end', onEnd);
+      controls.removeEventListener('change', callback);
+    };
+  }, [onChange, onStart, onEnd, controls, invalidate]);
+  React.useEffect(() => {
+    controls.handleResize();
+  }, [viewport]);
+  React.useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
+      set({
+        controls
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, controls]);
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: ref,
+    object: controls
+  }, restProps));
+});
+
+export { TrackballControls };

package/core/Trail.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("three"),n=require("meshline");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 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 i=o(t);const u={width:.2,length:1,decay:1,local:!1,stride:0,interval:1},s=(e,t=1)=>(e.set(e.subarray(t)),e.fill(-1/0,-t),e);function c(t,n){const{length:o,local:c,decay:l,interval:a,stride:f}={...u,...n},d=i.useRef(null),[h]=i.useState((()=>new r.Vector3));i.useLayoutEffect((()=>{t&&(d.current=Float32Array.from({length:10*o*3},((e,r)=>t.position.getComponent(r%3))))}),[o,t]);const p=i.useRef(new r.Vector3),y=i.useRef(0);return e.useFrame((()=>{if(t&&d.current){if(0===y.current){let e;c?e=t.position:(t.getWorldPosition(h),e=h);const r=1*l;for(let t=0;t<r;t++)e.distanceTo(p.current)<f||(s(d.current,3),d.current.set(e.toArray(),d.current.length-3));p.current.copy(e)}y.current++,y.current=y.current%a}})),d}const l=i.forwardRef(((t,o)=>{const{children:s}=t,{width:l,length:a,decay:f,local:d,stride:h,interval:p}={...u,...t},{color:y="hotpink",attenuation:g,target:m}=t,v=e.useThree((e=>e.size)),b=e.useThree((e=>e.scene)),w=i.useRef(null),[M,j]=i.useState(null),O=c(M,{length:a,decay:f,local:d,stride:h,interval:p});i.useEffect((()=>{const e=(null==m?void 0:m.current)||w.current.children.find((e=>e instanceof r.Object3D));e&&j(e)}),[O,m]);const E=i.useMemo((()=>new n.MeshLineGeometry),[]),P=i.useMemo((()=>{var e,t;const o=new n.MeshLineMaterial({lineWidth:.1*l,color:y,sizeAttenuation:1,resolution:new r.Vector2(v.width,v.height)});let i;if(s)if(Array.isArray(s))i=s.find((e=>{const t=e;return"string"==typeof t.type&&"meshLineMaterial"===t.type}));else{const e=s;"string"==typeof e.type&&"meshLineMaterial"===e.type&&(i=e)}return"object"==typeof(null==(e=i)?void 0:e.props)&&null!==(null==(t=i)?void 0:t.props)&&o.setValues(i.props),o}),[l,y,v,s]);return i.useEffect((()=>{P.uniforms.resolution.value.set(v.width,v.height)}),[v]),e.useFrame((()=>{O.current&&E.setPoints(O.current,g)})),i.createElement("group",null,e.createPortal(i.createElement("mesh",{ref:o,geometry:E,material:P}),b),i.createElement("group",{ref:w},s))}));exports.Trail=l,exports.useTrail=c;

package/core/Trail.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ColorRepresentation, Mesh, Object3D } from 'three';
+import { MeshLineGeometry as MeshLineGeometryImpl } from 'meshline';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+type Settings = {
+    width: number;
+    length: number;
+    decay: number;
+    local: boolean;
+    stride: number;
+    interval: number;
+};
+export type TrailProps = {
+    color?: ColorRepresentation;
+    attenuation?: (width: number) => number;
+    target?: React.RefObject<Object3D>;
+} & Partial<Settings>;
+export declare function useTrail(target: Object3D, settings: Partial<Settings>): React.RefObject<Float32Array | null>;
+export type MeshLineGeometry = Mesh & MeshLineGeometryImpl;
+export declare const Trail: ForwardRefComponent<React.PropsWithChildren<TrailProps>, MeshLineGeometry>;
+export {};

package/core/Trail.js

@@ -0,0 +1,150 @@
+import { useFrame, useThree, createPortal } from '@react-three/fiber';
+import * as React from 'react';
+import { Vector3, Object3D, Vector2 } from 'three';
+import { MeshLineGeometry, MeshLineMaterial } from 'meshline';
+
+const defaults = {
+  width: 0.2,
+  length: 1,
+  decay: 1,
+  local: false,
+  stride: 0,
+  interval: 1
+};
+const shiftLeft = (collection, steps = 1) => {
+  collection.set(collection.subarray(steps));
+  collection.fill(-Infinity, -steps);
+  return collection;
+};
+function useTrail(target, settings) {
+  const {
+    length,
+    local,
+    decay,
+    interval,
+    stride
+  } = {
+    ...defaults,
+    ...settings
+  };
+  const points = React.useRef(null);
+  const [worldPosition] = React.useState(() => new Vector3());
+  React.useLayoutEffect(() => {
+    if (target) {
+      points.current = Float32Array.from({
+        length: length * 10 * 3
+      }, (_, i) => target.position.getComponent(i % 3));
+    }
+  }, [length, target]);
+  const prevPosition = React.useRef(new Vector3());
+  const frameCount = React.useRef(0);
+  useFrame(() => {
+    if (!target) return;
+    if (!points.current) return;
+    if (frameCount.current === 0) {
+      let newPosition;
+      if (local) {
+        newPosition = target.position;
+      } else {
+        target.getWorldPosition(worldPosition);
+        newPosition = worldPosition;
+      }
+      const steps = 1 * decay;
+      for (let i = 0; i < steps; i++) {
+        if (newPosition.distanceTo(prevPosition.current) < stride) continue;
+        shiftLeft(points.current, 3);
+        points.current.set(newPosition.toArray(), points.current.length - 3);
+      }
+      prevPosition.current.copy(newPosition);
+    }
+    frameCount.current++;
+    frameCount.current = frameCount.current % interval;
+  });
+  return points;
+}
+const Trail = /* @__PURE__ */React.forwardRef((props, forwardRef) => {
+  const {
+    children
+  } = props;
+  const {
+    width,
+    length,
+    decay,
+    local,
+    stride,
+    interval
+  } = {
+    ...defaults,
+    ...props
+  };
+  const {
+    color = 'hotpink',
+    attenuation,
+    target
+  } = props;
+  const size = useThree(s => s.size);
+  const scene = useThree(s => s.scene);
+  const ref = React.useRef(null);
+  const [anchor, setAnchor] = React.useState(null);
+  const points = useTrail(anchor, {
+    length,
+    decay,
+    local,
+    stride,
+    interval
+  });
+  React.useEffect(() => {
+    const t = (target == null ? void 0 : target.current) || ref.current.children.find(o => {
+      return o instanceof Object3D;
+    });
+    if (t) {
+      setAnchor(t);
+    }
+  }, [points, target]);
+  const geo = React.useMemo(() => new MeshLineGeometry(), []);
+  const mat = React.useMemo(() => {
+    var _matOverride, _matOverride2;
+    const m = new MeshLineMaterial({
+      lineWidth: 0.1 * width,
+      color: color,
+      sizeAttenuation: 1,
+      resolution: new Vector2(size.width, size.height)
+    });
+
+    // Get and apply first <meshLineMaterial /> from children
+    let matOverride;
+    if (children) {
+      if (Array.isArray(children)) {
+        matOverride = children.find(child => {
+          const c = child;
+          return typeof c.type === 'string' && c.type === 'meshLineMaterial';
+        });
+      } else {
+        const c = children;
+        if (typeof c.type === 'string' && c.type === 'meshLineMaterial') {
+          matOverride = c;
+        }
+      }
+    }
+    if (typeof ((_matOverride = matOverride) == null ? void 0 : _matOverride.props) === 'object' && ((_matOverride2 = matOverride) == null ? void 0 : _matOverride2.props) !== null) {
+      m.setValues(matOverride.props);
+    }
+    return m;
+  }, [width, color, size, children]);
+  React.useEffect(() => {
+    mat.uniforms.resolution.value.set(size.width, size.height);
+  }, [size]);
+  useFrame(() => {
+    if (!points.current) return;
+    geo.setPoints(points.current, attenuation);
+  });
+  return /*#__PURE__*/React.createElement("group", null, createPortal(/*#__PURE__*/React.createElement("mesh", {
+    ref: forwardRef,
+    geometry: geo,
+    material: mat
+  }), scene), /*#__PURE__*/React.createElement("group", {
+    ref: ref
+  }, children));
+});
+
+export { Trail, useTrail };

package/core/TrailTexture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@react-three/fiber"),i=require("three");function s(t){if(t&&t.__esModule)return t;var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var a=s(t);const h=t=>Math.sqrt(1-Math.pow(t-1,2));class r{constructor({size:t=256,maxAge:e=750,radius:i=.3,intensity:s=.2,interpolate:a=0,smoothing:r=0,minForce:n=.3,blend:c="screen",ease:o=h}={}){this.size=t,this.maxAge=e,this.radius=i,this.intensity=s,this.ease=o,this.interpolate=a,this.smoothing=r,this.minForce=n,this.blend=c,this.trail=[],this.force=0,this.initTexture()}initTexture(){this.canvas=document.createElement("canvas"),this.canvas.width=this.canvas.height=this.size;const t=this.canvas.getContext("2d");if(null===t)throw new Error("2D not available");this.ctx=t,this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.texture=new i.Texture(this.canvas),this.canvas.id="touchTexture",this.canvas.style.width=this.canvas.style.height=`${this.canvas.width}px`}update(t){this.clear(),this.trail.forEach(((e,i)=>{e.age+=1e3*t,e.age>this.maxAge&&this.trail.splice(i,1)})),this.trail.length||(this.force=0),this.trail.forEach((t=>{this.drawTouch(t)})),this.texture.needsUpdate=!0}clear(){this.ctx.globalCompositeOperation="source-over",this.ctx.fillStyle="black",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height)}addTouch(t){const e=this.trail[this.trail.length-1];if(e){const i=e.x-t.x,s=e.y-t.y,a=i*i+s*s,h=Math.max(this.minForce,Math.min(1e4*a,1));if(this.force=function(t,e,i=.9){return e*i+t*(1-i)}(h,this.force,this.smoothing),this.interpolate){const t=Math.ceil(a/Math.pow(.5*this.radius/this.interpolate,2));if(t>1)for(let a=1;a<t;a++)this.trail.push({x:e.x-i/t*a,y:e.y-s/t*a,age:0,force:h})}}this.trail.push({x:t.x,y:t.y,age:0,force:this.force})}drawTouch(t){const e={x:t.x*this.size,y:(1-t.y)*this.size};let i=1;i=t.age<.3*this.maxAge?this.ease(t.age/(.3*this.maxAge)):this.ease(1-(t.age-.3*this.maxAge)/(.7*this.maxAge)),i*=t.force,this.ctx.globalCompositeOperation=this.blend;const s=this.size*this.radius*i,a=this.ctx.createRadialGradient(e.x,e.y,Math.max(0,.25*s),e.x,e.y,Math.max(0,s));a.addColorStop(0,`rgba(255, 255, 255, ${this.intensity})`),a.addColorStop(1,"rgba(0, 0, 0, 0.0)"),this.ctx.beginPath(),this.ctx.fillStyle=a,this.ctx.arc(e.x,e.y,Math.max(0,s),0,2*Math.PI),this.ctx.fill()}}function n(i={}){const{size:s,maxAge:a,radius:h,intensity:n,interpolate:c,smoothing:o,minForce:l,blend:u,ease:x}=i,d=t.useMemo((()=>new r(i)),[s,a,h,n,c,o,l,u,x]);e.useFrame(((t,e)=>{d.update(e)}));const f=t.useCallback((t=>d.addTouch(t.uv)),[d]);return[d.texture,f]}exports.TrailTexture=({children:t,...e})=>{const i=n(e);return a.createElement(a.Fragment,null,null==t?void 0:t(i))},exports.useTrailTexture=n;

package/core/TrailTexture.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Texture } from 'three';
+type TrailConfig = {
+    size?: number;
+    maxAge?: number;
+    radius?: number;
+    intensity?: number;
+    interpolate?: number;
+    smoothing?: number;
+    minForce?: number;
+    blend?: CanvasRenderingContext2D['globalCompositeOperation'];
+    ease?: (t: number) => number;
+};
+export declare function useTrailTexture(config?: Partial<TrailConfig>): [Texture, (ThreeEvent: any) => void];
+export type TrailTextureProps = {
+    children?: (texture: ReturnType<typeof useTrailTexture>) => React.ReactNode;
+} & TrailConfig;
+export declare const TrailTexture: ({ children, ...config }: TrailTextureProps) => React.JSX.Element;
+export {};

package/core/TrailTexture.js

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { useMemo, useCallback } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Texture } from 'three';
+
+// smooth new sample (measurement) based on previous sample (current)
+function smoothAverage(current, measurement, smoothing = 0.9) {
+  return measurement * smoothing + current * (1.0 - smoothing);
+}
+
+// default ease
+const easeCircleOut = x => Math.sqrt(1 - Math.pow(x - 1, 2));
+class TrailTextureImpl {
+  constructor({
+    size = 256,
+    maxAge = 750,
+    radius = 0.3,
+    intensity = 0.2,
+    interpolate = 0,
+    smoothing = 0,
+    minForce = 0.3,
+    blend = 'screen',
+    // source-over is canvas default. Others are slower
+    ease = easeCircleOut
+  } = {}) {
+    this.size = size;
+    this.maxAge = maxAge;
+    this.radius = radius;
+    this.intensity = intensity;
+    this.ease = ease;
+    this.interpolate = interpolate;
+    this.smoothing = smoothing;
+    this.minForce = minForce;
+    this.blend = blend;
+    this.trail = [];
+    this.force = 0;
+    this.initTexture();
+  }
+  initTexture() {
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = this.canvas.height = this.size;
+    const ctx = this.canvas.getContext('2d');
+    if (ctx === null) {
+      throw new Error('2D not available');
+    }
+    this.ctx = ctx;
+    this.ctx.fillStyle = 'black';
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    this.texture = new Texture(this.canvas);
+    this.canvas.id = 'touchTexture';
+    this.canvas.style.width = this.canvas.style.height = `${this.canvas.width}px`;
+  }
+  update(delta) {
+    this.clear();
+
+    // age points
+    this.trail.forEach((point, i) => {
+      point.age += delta * 1000;
+      // remove old
+      if (point.age > this.maxAge) {
+        this.trail.splice(i, 1);
+      }
+    });
+
+    // reset force when empty (when smoothing)
+    if (!this.trail.length) this.force = 0;
+    this.trail.forEach(point => {
+      this.drawTouch(point);
+    });
+    this.texture.needsUpdate = true;
+  }
+  clear() {
+    this.ctx.globalCompositeOperation = 'source-over';
+    this.ctx.fillStyle = 'black';
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  addTouch(point) {
+    const last = this.trail[this.trail.length - 1];
+    if (last) {
+      const dx = last.x - point.x;
+      const dy = last.y - point.y;
+      const dd = dx * dx + dy * dy;
+      const force = Math.max(this.minForce, Math.min(dd * 10000, 1));
+      this.force = smoothAverage(force, this.force, this.smoothing);
+      if (!!this.interpolate) {
+        const lines = Math.ceil(dd / Math.pow(this.radius * 0.5 / this.interpolate, 2));
+        if (lines > 1) {
+          for (let i = 1; i < lines; i++) {
+            this.trail.push({
+              x: last.x - dx / lines * i,
+              y: last.y - dy / lines * i,
+              age: 0,
+              force
+            });
+          }
+        }
+      }
+    }
+    this.trail.push({
+      x: point.x,
+      y: point.y,
+      age: 0,
+      force: this.force
+    });
+  }
+  drawTouch(point) {
+    const pos = {
+      x: point.x * this.size,
+      y: (1 - point.y) * this.size
+    };
+    let intensity = 1;
+    if (point.age < this.maxAge * 0.3) {
+      intensity = this.ease(point.age / (this.maxAge * 0.3));
+    } else {
+      intensity = this.ease(1 - (point.age - this.maxAge * 0.3) / (this.maxAge * 0.7));
+    }
+    intensity *= point.force;
+
+    // apply blending
+    this.ctx.globalCompositeOperation = this.blend;
+    const radius = this.size * this.radius * intensity;
+    const grd = this.ctx.createRadialGradient(pos.x, pos.y, Math.max(0, radius * 0.25), pos.x, pos.y, Math.max(0, radius));
+    grd.addColorStop(0, `rgba(255, 255, 255, ${this.intensity})`);
+    grd.addColorStop(1, `rgba(0, 0, 0, 0.0)`);
+    this.ctx.beginPath();
+    this.ctx.fillStyle = grd;
+    this.ctx.arc(pos.x, pos.y, Math.max(0, radius), 0, Math.PI * 2);
+    this.ctx.fill();
+  }
+}
+function useTrailTexture(config = {}) {
+  const {
+    size,
+    maxAge,
+    radius,
+    intensity,
+    interpolate,
+    smoothing,
+    minForce,
+    blend,
+    ease
+  } = config;
+  const trail = useMemo(() => new TrailTextureImpl(config), [size, maxAge, radius, intensity, interpolate, smoothing, minForce, blend, ease]);
+  useFrame((_, delta) => void trail.update(delta));
+  const onMove = useCallback(e => trail.addTouch(e.uv), [trail]);
+  return [trail.texture, onMove];
+}
+
+//
+
+const TrailTexture = ({
+  children,
+  ...config
+}) => {
+  const ret = useTrailTexture(config);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(ret));
+};
+
+export { TrailTexture, useTrailTexture };

package/core/TransformControls.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"),o=require("three-stdlib");function u(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 a=u(e),c=s(r),i=s(n);const f=c.forwardRef((({children:e,domElement:r,onChange:n,onMouseDown:u,onMouseUp:s,onObjectChange:f,object:l,makeDefault:d,camera:v,enabled:h,axis:m,mode:E,translationSnap:b,rotationSnap:g,scaleSnap:p,space:L,size:j,showX:w,showY:y,showZ:O,...T},D)=>{const C=t.useThree((e=>e.controls)),R=t.useThree((e=>e.gl)),S=t.useThree((e=>e.events)),q=t.useThree((e=>e.camera)),x=t.useThree((e=>e.invalidate)),M=t.useThree((e=>e.get)),_=t.useThree((e=>e.set)),z=v||q,P=r||S.connected||R.domElement,U=c.useMemo((()=>new o.TransformControls(z,P)),[z,P]),k=c.useRef(null);c.useLayoutEffect((()=>(l?U.attach(l instanceof i.Object3D?l:l.current):k.current instanceof i.Object3D&&U.attach(k.current),()=>{U.detach()})),[l,e,U]),c.useEffect((()=>{if(C){const e=e=>C.enabled=!e.value;return U.addEventListener("dragging-changed",e),()=>U.removeEventListener("dragging-changed",e)}}),[U,C]);const X=c.useRef(void 0),Y=c.useRef(void 0),Z=c.useRef(void 0),F=c.useRef(void 0);return c.useLayoutEffect((()=>{X.current=n}),[n]),c.useLayoutEffect((()=>{Y.current=u}),[u]),c.useLayoutEffect((()=>{Z.current=s}),[s]),c.useLayoutEffect((()=>{F.current=f}),[f]),c.useEffect((()=>{const e=e=>{x(),null==X.current||X.current(e)},t=e=>null==Y.current?void 0:Y.current(e),r=e=>null==Z.current?void 0:Z.current(e),n=e=>null==F.current?void 0:F.current(e);return U.addEventListener("change",e),U.addEventListener("mouseDown",t),U.addEventListener("mouseUp",r),U.addEventListener("objectChange",n),()=>{U.removeEventListener("change",e),U.removeEventListener("mouseDown",t),U.removeEventListener("mouseUp",r),U.removeEventListener("objectChange",n)}}),[x,U]),c.useEffect((()=>{if(d){const e=M().controls;return _({controls:U}),()=>_({controls:e})}}),[d,U]),c.createElement(c.Fragment,null,c.createElement("primitive",{ref:D,object:U,enabled:h,axis:m,mode:E,translationSnap:b,rotationSnap:g,scaleSnap:p,space:L,size:j,showX:w,showY:y,showZ:O}),c.createElement("group",a.default({ref:k},T),e))}));exports.TransformControls=f;

package/core/TransformControls.d.ts

@@ -0,0 +1,28 @@
+import { ThreeElement, ThreeElements } from '@react-three/fiber';
+import * as React from 'react';
+import * as THREE from 'three';
+import { TransformControls as TransformControlsImpl } from 'three-stdlib';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type TransformControlsProps = Omit<ThreeElement<typeof TransformControlsImpl>, 'ref' | 'args'> & Omit<ThreeElements['group'], 'ref'> & {
+    object?: THREE.Object3D | React.RefObject<THREE.Object3D>;
+    enabled?: boolean;
+    axis?: string | null;
+    domElement?: HTMLElement;
+    mode?: 'translate' | 'rotate' | 'scale';
+    translationSnap?: number | null;
+    rotationSnap?: number | null;
+    scaleSnap?: number | null;
+    space?: 'world' | 'local';
+    size?: number;
+    showX?: boolean;
+    showY?: boolean;
+    showZ?: boolean;
+    children?: React.ReactElement<THREE.Object3D>;
+    camera?: THREE.Camera;
+    onChange?: (e?: THREE.Event) => void;
+    onMouseDown?: (e?: THREE.Event) => void;
+    onMouseUp?: (e?: THREE.Event) => void;
+    onObjectChange?: (e?: THREE.Event) => void;
+    makeDefault?: boolean;
+};
+export declare const TransformControls: ForwardRefComponent<TransformControlsProps, TransformControlsImpl>;

package/core/TransformControls.js

@@ -0,0 +1,114 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree } from '@react-three/fiber';
+import * as React from 'react';
+import * as THREE from 'three';
+import { TransformControls as TransformControls$1 } from 'three-stdlib';
+
+const TransformControls = /* @__PURE__ */React.forwardRef(({
+  children,
+  domElement,
+  onChange,
+  onMouseDown,
+  onMouseUp,
+  onObjectChange,
+  object,
+  makeDefault,
+  camera,
+  // Transform
+  enabled,
+  axis,
+  mode,
+  translationSnap,
+  rotationSnap,
+  scaleSnap,
+  space,
+  size,
+  showX,
+  showY,
+  showZ,
+  ...props
+}, ref) => {
+  const defaultControls = useThree(state => state.controls);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const defaultCamera = useThree(state => state.camera);
+  const invalidate = useThree(state => state.invalidate);
+  const get = useThree(state => state.get);
+  const set = useThree(state => state.set);
+  const explCamera = camera || defaultCamera;
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new TransformControls$1(explCamera, explDomElement), [explCamera, explDomElement]);
+  const group = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (object) {
+      controls.attach(object instanceof THREE.Object3D ? object : object.current);
+    } else if (group.current instanceof THREE.Object3D) {
+      controls.attach(group.current);
+    }
+    return () => void controls.detach();
+  }, [object, children, controls]);
+  React.useEffect(() => {
+    if (defaultControls) {
+      const callback = event => defaultControls.enabled = !event.value;
+      controls.addEventListener('dragging-changed', callback);
+      return () => controls.removeEventListener('dragging-changed', callback);
+    }
+  }, [controls, defaultControls]);
+  const onChangeRef = React.useRef(undefined);
+  const onMouseDownRef = React.useRef(undefined);
+  const onMouseUpRef = React.useRef(undefined);
+  const onObjectChangeRef = React.useRef(undefined);
+  React.useLayoutEffect(() => void (onChangeRef.current = onChange), [onChange]);
+  React.useLayoutEffect(() => void (onMouseDownRef.current = onMouseDown), [onMouseDown]);
+  React.useLayoutEffect(() => void (onMouseUpRef.current = onMouseUp), [onMouseUp]);
+  React.useLayoutEffect(() => void (onObjectChangeRef.current = onObjectChange), [onObjectChange]);
+  React.useEffect(() => {
+    const onChange = e => {
+      invalidate();
+      onChangeRef.current == null || onChangeRef.current(e);
+    };
+    const onMouseDown = e => onMouseDownRef.current == null ? void 0 : onMouseDownRef.current(e);
+    const onMouseUp = e => onMouseUpRef.current == null ? void 0 : onMouseUpRef.current(e);
+    const onObjectChange = e => onObjectChangeRef.current == null ? void 0 : onObjectChangeRef.current(e);
+    controls.addEventListener('change', onChange);
+    controls.addEventListener('mouseDown', onMouseDown);
+    controls.addEventListener('mouseUp', onMouseUp);
+    controls.addEventListener('objectChange', onObjectChange);
+    return () => {
+      controls.removeEventListener('change', onChange);
+      controls.removeEventListener('mouseDown', onMouseDown);
+      controls.removeEventListener('mouseUp', onMouseUp);
+      controls.removeEventListener('objectChange', onObjectChange);
+    };
+  }, [invalidate, controls]);
+  React.useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      set({
+        controls
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, controls]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: controls,
+    enabled: enabled,
+    axis: axis,
+    mode: mode,
+    translationSnap: translationSnap,
+    rotationSnap: rotationSnap,
+    scaleSnap: scaleSnap,
+    space: space,
+    size: size,
+    showX: showX,
+    showY: showY,
+    showZ: showZ
+  }), /*#__PURE__*/React.createElement("group", _extends({
+    ref: group
+  }, props), children));
+});
+
+export { TransformControls };

package/core/VideoTexture.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"),n=require("suspend-react"),o=require("hls.js");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 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 s=u(e),a=u(r);const c=((e,r)=>"undefined"!=typeof window&&"function"==typeof(null==(e=window.document)?void 0:e.createElement)&&"string"==typeof(null==(r=window.navigator)?void 0:r.userAgent))();let i=null;function l(r,{unsuspend:s="loadedmetadata",start:l=!0,hls:d={},crossOrigin:p="anonymous",muted:m=!0,loop:v=!0,playsInline:y=!0,onVideoFrame:b,...g}={}){const w=t.useThree((e=>e.gl)),h=e.useRef(null),E=n.suspend((()=>new Promise((async e=>{let t,n;"string"==typeof r?t=r:n=r;const l=Object.assign(document.createElement("video"),{src:t,srcObject:n,crossOrigin:p,loop:v,muted:m,playsInline:y,...g});if(t&&c&&t.endsWith(".m3u8")){const e=h.current=await async function(...e){var r;null!==(r=i)&&void 0!==r||(i=await Promise.resolve().then((function(){return u(require("hls.js"))})));const t=i.default;return t.isSupported()?new t(...e):null}(d);e&&(e.on(o.Events.MEDIA_ATTACHED,(()=>{e.loadSource(t)})),e.attachMedia(l))}const f=new a.VideoTexture(l);f.colorSpace=w.outputColorSpace,l.addEventListener(s,(()=>e(f)))}))),[r]),O=E.source.data;return f(O,b),e.useEffect((()=>(l&&E.image.play(),()=>{h.current&&(h.current.destroy(),h.current=null)})),[E,l]),E}const d=e.forwardRef((({children:r,src:t,...n},o)=>{const u=l(t,n);return e.useEffect((()=>()=>{u.dispose()}),[u]),e.useImperativeHandle(o,(()=>u),[u]),s.createElement(s.Fragment,null,null==r?void 0:r(u))})),f=(r,t)=>{e.useEffect((()=>{if(!t)return;if(!r.requestVideoFrameCallback)return;let e;const n=(...o)=>{t(...o),e=r.requestVideoFrameCallback(n)};return r.requestVideoFrameCallback(n),()=>r.cancelVideoFrameCallback(e)}),[r,t])};exports.VideoTexture=d,exports.useVideoTexture=l;

package/core/VideoTexture.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { type default as Hls } from 'hls.js';
+declare function getHls(...args: ConstructorParameters<typeof Hls>): Promise<Hls | null>;
+export declare function useVideoTexture(srcOrSrcObject: HTMLVideoElement['src' | 'srcObject'], { unsuspend, start, hls: hlsConfig, crossOrigin, muted, loop, playsInline, onVideoFrame, ...videoProps }?: {
+    unsuspend?: keyof HTMLVideoElementEventMap;
+    start?: boolean;
+    hls?: Parameters<typeof getHls>[0];
+    onVideoFrame?: VideoFrameRequestCallback;
+} & Partial<Omit<HTMLVideoElement, 'children' | 'src' | 'srcObject'>>): THREE.VideoTexture;
+type UseVideoTextureParams = Parameters<typeof useVideoTexture>;
+type VideoTexture = ReturnType<typeof useVideoTexture>;
+export type VideoTextureProps = {
+    children?: (texture: VideoTexture) => React.ReactNode;
+    src: UseVideoTextureParams[0];
+} & UseVideoTextureParams[1];
+export declare const VideoTexture: React.ForwardRefExoticComponent<{
+    children?: (texture: VideoTexture) => React.ReactNode;
+    src: UseVideoTextureParams[0];
+} & {
+    unsuspend?: keyof HTMLVideoElementEventMap;
+    start?: boolean;
+    hls?: Parameters<typeof getHls>[0];
+    onVideoFrame?: VideoFrameRequestCallback;
+} & Partial<Omit<HTMLVideoElement, "children" | "src" | "srcObject">> & React.RefAttributes<THREE.VideoTexture>>;
+export {};