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

package/core/FlyControls.js

@@ -0,0 +1,55 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as React from 'react';
+import { FlyControls as FlyControls$1 } from 'three-stdlib';
+
+const FlyControls = /* @__PURE__ */React.forwardRef(({
+  domElement,
+  ...props
+}, fref) => {
+  const {
+    onChange,
+    makeDefault,
+    ...rest
+  } = props;
+  const invalidate = useThree(state => state.invalidate);
+  const camera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const get = useThree(state => state.get);
+  const set = useThree(state => state.set);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new FlyControls$1(camera), [camera]);
+  React.useEffect(() => {
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, controls, invalidate]);
+  React.useEffect(() => {
+    const callback = e => {
+      invalidate();
+      if (onChange) onChange(e);
+    };
+    controls.addEventListener == null || controls.addEventListener('change', callback);
+    return () => controls.removeEventListener == null ? void 0 : controls.removeEventListener('change', callback);
+  }, [onChange, invalidate]);
+  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]);
+  useFrame((_, delta) => controls.update(delta));
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: fref,
+    object: controls,
+    args: [camera, explDomElement]
+  }, rest));
+});
+
+export { FlyControls };

package/core/GizmoHelper.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),o=require("./Hud.cjs.js");function i(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)}require("@babel/runtime/helpers/extends"),require("./Fbo.cjs.js");var u=i(e);const a=u.createContext({}),c=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3,m=e=>"getTarget"in e;exports.GizmoHelper=({alignment:e="bottom-right",margin:i=[80,80],renderPriority:g=1,onUpdate:y,onTarget:b,children:j})=>{const w=r.useThree((e=>e.size)),v=r.useThree((e=>e.camera)),q=r.useThree((e=>e.controls)),x=r.useThree((e=>e.invalidate)),O=u.useRef(null),T=u.useRef(null),P=u.useRef(!1),C=u.useRef(0),R=u.useRef(new t.Vector3(0,0,0)),z=u.useRef(new t.Vector3(0,0,0));u.useEffect((()=>{z.current.copy(v.up),s.up.copy(v.up)}),[v]);const E=u.useCallback((e=>{P.current=!0,(q||b)&&(R.current=(null==b?void 0:b())||(m(q)?q.getTarget(R.current):null==q?void 0:q.target)),C.current=v.position.distanceTo(f),p.copy(v.quaternion),h.copy(e).multiplyScalar(C.current).add(f),s.lookAt(h),d.copy(s.quaternion),x()}),[q,v,b,x]);r.useFrame(((e,r)=>{if(T.current&&O.current){var t;if(P.current)if(p.angleTo(d)<.01)P.current=!1,"minPolarAngle"in q&&v.up.copy(z.current);else{const e=r*c;p.rotateTowards(d,e),v.position.set(0,0,1).applyQuaternion(p).multiplyScalar(C.current).add(R.current),v.up.set(0,1,0).applyQuaternion(p).normalize(),v.quaternion.copy(p),m(q)&&q.setPosition(v.position.x,v.position.y,v.position.z),y?y():q&&q.update(r),x()}l.copy(v.matrix).invert(),null==(t=O.current)||t.quaternion.setFromRotationMatrix(l)}}));const M=u.useMemo((()=>({tweenCamera:E})),[E]),[k,Q]=i,V=e.endsWith("-center")?0:e.endsWith("-left")?-w.width/2+k:w.width/2-k,W=e.startsWith("center-")?0:e.startsWith("top-")?w.height/2-Q:-w.height/2+Q;return u.createElement(o.Hud,{renderPriority:g},u.createElement(a.Provider,{value:M},u.createElement(n.OrthographicCamera,{makeDefault:!0,ref:T,position:[0,0,200]}),u.createElement("group",{ref:O,position:[V,W,0]},j)))},exports.useGizmoContext=()=>u.useContext(a);

package/core/GizmoHelper.d.ts

@@ -0,0 +1,16 @@
+import { ThreeElements } from '@react-three/fiber';
+import { Vector3 } from 'three';
+type GizmoHelperContext = {
+    tweenCamera: (direction: Vector3) => void;
+};
+export declare const useGizmoContext: () => GizmoHelperContext;
+export type GizmoHelperProps = ThreeElements['group'] & {
+    alignment?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center' | 'top-center';
+    margin?: [number, number];
+    renderPriority?: number;
+    autoClear?: boolean;
+    onUpdate?: () => void;
+    onTarget?: () => Vector3;
+};
+export declare const GizmoHelper: ({ alignment, margin, renderPriority, onUpdate, onTarget, children, }: GizmoHelperProps) => any;
+export {};

package/core/GizmoHelper.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { Vector3, Object3D, Matrix4, Quaternion } from 'three';
+import { OrthographicCamera } from './OrthographicCamera.js';
+import { Hud } from './Hud.js';
+
+const Context = /* @__PURE__ */React.createContext({});
+const useGizmoContext = () => {
+  return React.useContext(Context);
+};
+const turnRate = 2 * Math.PI; // turn rate in angles per second
+const dummy = /* @__PURE__ */new Object3D();
+const matrix = /* @__PURE__ */new Matrix4();
+const [q1, q2] = [/* @__PURE__ */new Quaternion(), /* @__PURE__ */new Quaternion()];
+const target = /* @__PURE__ */new Vector3();
+const targetPosition = /* @__PURE__ */new Vector3();
+const isOrbitControls = controls => {
+  return 'minPolarAngle' in controls;
+};
+const isCameraControls = controls => {
+  return 'getTarget' in controls;
+};
+const GizmoHelper = ({
+  alignment = 'bottom-right',
+  margin = [80, 80],
+  renderPriority = 1,
+  onUpdate,
+  onTarget,
+  children
+}) => {
+  const size = useThree(state => state.size);
+  const mainCamera = useThree(state => state.camera);
+  // @ts-ignore
+  const defaultControls = useThree(state => state.controls);
+  const invalidate = useThree(state => state.invalidate);
+  const gizmoRef = React.useRef(null);
+  const virtualCam = React.useRef(null);
+  const animating = React.useRef(false);
+  const radius = React.useRef(0);
+  const focusPoint = React.useRef(new Vector3(0, 0, 0));
+  const defaultUp = React.useRef(new Vector3(0, 0, 0));
+  React.useEffect(() => {
+    defaultUp.current.copy(mainCamera.up);
+    dummy.up.copy(mainCamera.up);
+  }, [mainCamera]);
+  const tweenCamera = React.useCallback(direction => {
+    animating.current = true;
+    if (defaultControls || onTarget) {
+      focusPoint.current = (onTarget == null ? void 0 : onTarget()) || (isCameraControls(defaultControls) ? defaultControls.getTarget(focusPoint.current) : defaultControls == null ? void 0 : defaultControls.target);
+    }
+    radius.current = mainCamera.position.distanceTo(target);
+
+    // Rotate from current camera orientation
+    q1.copy(mainCamera.quaternion);
+
+    // To new current camera orientation
+    targetPosition.copy(direction).multiplyScalar(radius.current).add(target);
+    dummy.lookAt(targetPosition);
+    q2.copy(dummy.quaternion);
+    invalidate();
+  }, [defaultControls, mainCamera, onTarget, invalidate]);
+  useFrame((_, delta) => {
+    if (virtualCam.current && gizmoRef.current) {
+      var _gizmoRef$current;
+      // Animate step
+      if (animating.current) {
+        if (q1.angleTo(q2) < 0.01) {
+          animating.current = false;
+          // Orbit controls uses UP vector as the orbit axes,
+          // so we need to reset it after the animation is done
+          // moving it around for the controls to work correctly
+          if (isOrbitControls(defaultControls)) {
+            mainCamera.up.copy(defaultUp.current);
+          }
+        } else {
+          const step = delta * turnRate;
+          // animate position by doing a slerp and then scaling the position on the unit sphere
+          q1.rotateTowards(q2, step);
+          // animate orientation
+          mainCamera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius.current).add(focusPoint.current);
+          mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize();
+          mainCamera.quaternion.copy(q1);
+          if (isCameraControls(defaultControls)) defaultControls.setPosition(mainCamera.position.x, mainCamera.position.y, mainCamera.position.z);
+          if (onUpdate) onUpdate();else if (defaultControls) defaultControls.update(delta);
+          invalidate();
+        }
+      }
+
+      // Sync Gizmo with main camera orientation
+      matrix.copy(mainCamera.matrix).invert();
+      (_gizmoRef$current = gizmoRef.current) == null || _gizmoRef$current.quaternion.setFromRotationMatrix(matrix);
+    }
+  });
+  const gizmoHelperContext = React.useMemo(() => ({
+    tweenCamera
+  }), [tweenCamera]);
+
+  // Position gizmo component within scene
+  const [marginX, marginY] = margin;
+  const x = alignment.endsWith('-center') ? 0 : alignment.endsWith('-left') ? -size.width / 2 + marginX : size.width / 2 - marginX;
+  const y = alignment.startsWith('center-') ? 0 : alignment.startsWith('top-') ? size.height / 2 - marginY : -size.height / 2 + marginY;
+  return /*#__PURE__*/React.createElement(Hud, {
+    renderPriority: renderPriority
+  }, /*#__PURE__*/React.createElement(Context.Provider, {
+    value: gizmoHelperContext
+  }, /*#__PURE__*/React.createElement(OrthographicCamera, {
+    makeDefault: true,
+    ref: virtualCam,
+    position: [0, 0, 200]
+  }), /*#__PURE__*/React.createElement("group", {
+    ref: gizmoRef,
+    position: [x, y, 0]
+  }, children)));
+};
+
+export { GizmoHelper, useGizmoContext };

package/core/GizmoViewcube.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"),o=require("./GizmoHelper.cjs.js"),a=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("./Fbo.cjs.js"),require("./Hud.cjs.js");var l=n(e),s=i(t);const c="#f0f0f0",u="#999",p="black",m="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new a.Vector3(...e).multiplyScalar(.38),d=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),y=[.25,.25,.25],g=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=g.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:n=f,color:i=c,hoverColor:l=u,textColor:h=p,strokeColor:d=m,opacity:y=1})=>{const g=r.useThree((e=>e.gl)),b=s.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=d,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(n[t].toUpperCase(),64,76),new a.CanvasTexture(e)}),[t,n,o,i,h,d]);return s.createElement("meshBasicMaterial",{map:b,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,attach:`material-${t}`,color:e?l:"white",transparent:!0,opacity:y})},C=e=>{const{tweenCamera:t}=o.useGizmoContext(),[r,a]=s.useState(null);return s.createElement("mesh",{onPointerOut:e=>{e.stopPropagation(),a(null)},onPointerMove:e=>{e.stopPropagation(),a(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,o)=>s.createElement(x,l.default({key:o,index:o,hover:r===o},e)))),s.createElement("boxGeometry",null))},j=({onClick:e,dimensions:t,position:r,hoverColor:a=u})=>{const{tweenCamera:n}=o.useGizmoContext(),[i,l]=s.useState(!1);return s.createElement("mesh",{scale:1.01,position:r,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),n(r)})},s.createElement("meshBasicMaterial",{color:i?a:"white",transparent:!0,opacity:.6,visible:i}),s.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>s.createElement("group",{scale:[60,60,60]},s.createElement(C,e),g.map(((t,r)=>s.createElement(j,l.default({key:r,position:t,dimensions:b[r]},e)))),d.map(((t,r)=>s.createElement(j,l.default({key:r,position:t,dimensions:y},e)))));

package/core/GizmoViewcube.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ThreeEvent } from '@react-three/fiber';
+type GenericProps = {
+    font?: string;
+    opacity?: number;
+    color?: string;
+    hoverColor?: string;
+    textColor?: string;
+    strokeColor?: string;
+    onClick?: (e: ThreeEvent<MouseEvent>) => null;
+    faces?: string[];
+};
+export declare const GizmoViewcube: (props: GenericProps) => React.JSX.Element;
+export {};

package/core/GizmoViewcube.js

@@ -0,0 +1,133 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree } from '@react-three/fiber';
+import { useGizmoContext } from './GizmoHelper.js';
+import { Vector3, CanvasTexture } from 'three';
+
+const colors = {
+  bg: '#f0f0f0',
+  hover: '#999',
+  text: 'black',
+  stroke: 'black'
+};
+const defaultFaces = ['Right', 'Left', 'Top', 'Bottom', 'Front', 'Back'];
+const makePositionVector = xyz => new Vector3(...xyz).multiplyScalar(0.38);
+const corners = /* @__PURE__ */[[1, 1, 1], [1, 1, -1], [1, -1, 1], [1, -1, -1], [-1, 1, 1], [-1, 1, -1], [-1, -1, 1], [-1, -1, -1]].map(makePositionVector);
+const cornerDimensions = [0.25, 0.25, 0.25];
+const edges = /* @__PURE__ */[[1, 1, 0], [1, 0, 1], [1, 0, -1], [1, -1, 0], [0, 1, 1], [0, 1, -1], [0, -1, 1], [0, -1, -1], [-1, 1, 0], [-1, 0, 1], [-1, 0, -1], [-1, -1, 0]].map(makePositionVector);
+const edgeDimensions = /* @__PURE__ */edges.map(edge => edge.toArray().map(axis => axis == 0 ? 0.5 : 0.25));
+const FaceMaterial = ({
+  hover,
+  index,
+  font = '20px Inter var, Arial, sans-serif',
+  faces = defaultFaces,
+  color = colors.bg,
+  hoverColor = colors.hover,
+  textColor = colors.text,
+  strokeColor = colors.stroke,
+  opacity = 1
+}) => {
+  const gl = useThree(state => state.gl);
+  const texture = React.useMemo(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 128;
+    canvas.height = 128;
+    const context = canvas.getContext('2d');
+    context.fillStyle = color;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.strokeStyle = strokeColor;
+    context.strokeRect(0, 0, canvas.width, canvas.height);
+    context.font = font;
+    context.textAlign = 'center';
+    context.fillStyle = textColor;
+    context.fillText(faces[index].toUpperCase(), 64, 76);
+    return new CanvasTexture(canvas);
+  }, [index, faces, font, color, textColor, strokeColor]);
+  return /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    map: texture,
+    "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
+    attach: `material-${index}`,
+    color: hover ? hoverColor : 'white',
+    transparent: true,
+    opacity: opacity
+  });
+};
+const FaceCube = props => {
+  const {
+    tweenCamera
+  } = useGizmoContext();
+  const [hover, setHover] = React.useState(null);
+  const handlePointerOut = e => {
+    e.stopPropagation();
+    setHover(null);
+  };
+  const handleClick = e => {
+    e.stopPropagation();
+    tweenCamera(e.face.normal);
+  };
+  const handlePointerMove = e => {
+    e.stopPropagation();
+    setHover(Math.floor(e.faceIndex / 2));
+  };
+  return /*#__PURE__*/React.createElement("mesh", {
+    onPointerOut: handlePointerOut,
+    onPointerMove: handlePointerMove,
+    onClick: props.onClick || handleClick
+  }, [...Array(6)].map((_, index) => /*#__PURE__*/React.createElement(FaceMaterial, _extends({
+    key: index,
+    index: index,
+    hover: hover === index
+  }, props))), /*#__PURE__*/React.createElement("boxGeometry", null));
+};
+const EdgeCube = ({
+  onClick,
+  dimensions,
+  position,
+  hoverColor = colors.hover
+}) => {
+  const {
+    tweenCamera
+  } = useGizmoContext();
+  const [hover, setHover] = React.useState(false);
+  const handlePointerOut = e => {
+    e.stopPropagation();
+    setHover(false);
+  };
+  const handlePointerOver = e => {
+    e.stopPropagation();
+    setHover(true);
+  };
+  const handleClick = e => {
+    e.stopPropagation();
+    tweenCamera(position);
+  };
+  return /*#__PURE__*/React.createElement("mesh", {
+    scale: 1.01,
+    position: position,
+    onPointerOver: handlePointerOver,
+    onPointerOut: handlePointerOut,
+    onClick: onClick || handleClick
+  }, /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    color: hover ? hoverColor : 'white',
+    transparent: true,
+    opacity: 0.6,
+    visible: hover
+  }), /*#__PURE__*/React.createElement("boxGeometry", {
+    args: dimensions
+  }));
+};
+const GizmoViewcube = props => {
+  return /*#__PURE__*/React.createElement("group", {
+    scale: [60, 60, 60]
+  }, /*#__PURE__*/React.createElement(FaceCube, props), edges.map((edge, index) => /*#__PURE__*/React.createElement(EdgeCube, _extends({
+    key: index,
+    position: edge,
+    dimensions: edgeDimensions[index]
+  }, props))), corners.map((corner, index) => /*#__PURE__*/React.createElement(EdgeCube, _extends({
+    key: index,
+    position: corner,
+    dimensions: cornerDimensions
+  }, props))));
+};
+
+export { GizmoViewcube };

package/core/GizmoViewport.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"),a=require("three"),o=require("./GizmoHelper.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(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)}require("./OrthographicCamera.cjs.js"),require("./Fbo.cjs.js"),require("./Hud.cjs.js");var i=l(e),c=n(t);function s({scale:e=[.8,.05,.05],color:t,rotation:r}){return c.createElement("group",{rotation:r},c.createElement("mesh",{position:[.4,0,0]},c.createElement("boxGeometry",{args:e}),c.createElement("meshBasicMaterial",{color:t,toneMapped:!1})))}function u({onClick:e,font:t,disabled:o,arcStyle:l,label:n,labelColor:s,axisHeadScale:u=1,...p}){const f=r.useThree((e=>e.gl)),d=c.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const r=e.getContext("2d");return r.beginPath(),r.arc(32,32,16,0,2*Math.PI),r.closePath(),r.fillStyle=l,r.fill(),n&&(r.font=t,r.textAlign="center",r.fillStyle=s,r.fillText(n,32,41)),new a.CanvasTexture(e)}),[l,n,s,t]),[m,b]=c.useState(!1),h=(n?1:.75)*(m?1.2:1)*u;return c.createElement("sprite",i.default({scale:h,onPointerOver:o?void 0:e=>{e.stopPropagation(),b(!0)},onPointerOut:o?void 0:e||(e=>{e.stopPropagation(),b(!1)})},p),c.createElement("spriteMaterial",{map:d,"map-anisotropy":f.capabilities.getMaxAnisotropy()||1,alphaTest:.3,opacity:n?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:a="18px Inter var, Arial, sans-serif",axisColors:l=["#ff2060","#20df80","#2080ff"],axisHeadScale:n=1,axisScale:p,labels:f=["X","Y","Z"],labelColor:d="#000",onClick:m,...b})=>{const[h,E,g]=l,{tweenCamera:x}=o.useGizmoContext(),y={font:a,disabled:r,labelColor:d,onClick:m,axisHeadScale:n,onPointerDown:r?void 0:e=>{x(e.object.position),e.stopPropagation()}};return c.createElement("group",i.default({scale:40},b),c.createElement(s,{color:h,rotation:[0,0,0],scale:p}),c.createElement(s,{color:E,rotation:[0,0,Math.PI/2],scale:p}),c.createElement(s,{color:g,rotation:[0,-Math.PI/2,0],scale:p}),!t&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:h,position:[1,0,0],label:f[0]},y)),c.createElement(u,i.default({arcStyle:E,position:[0,1,0],label:f[1]},y)),c.createElement(u,i.default({arcStyle:g,position:[0,0,1],label:f[2]},y)),!e&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:h,position:[-1,0,0]},y)),c.createElement(u,i.default({arcStyle:E,position:[0,-1,0]},y)),c.createElement(u,i.default({arcStyle:g,position:[0,0,-1]},y)))))};

package/core/GizmoViewport.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ThreeEvent, ThreeElements } from '@react-three/fiber';
+type GizmoViewportProps = ThreeElements['group'] & {
+    axisColors?: [string, string, string];
+    axisScale?: [number, number, number];
+    labels?: [string, string, string];
+    axisHeadScale?: number;
+    labelColor?: string;
+    hideNegativeAxes?: boolean;
+    hideAxisHeads?: boolean;
+    disabled?: boolean;
+    font?: string;
+    onClick?: (e: ThreeEvent<MouseEvent>) => null;
+};
+export declare const GizmoViewport: ({ hideNegativeAxes, hideAxisHeads, disabled, font, axisColors, axisHeadScale, axisScale, labels, labelColor, onClick, ...props }: GizmoViewportProps) => React.JSX.Element;
+export {};

package/core/GizmoViewport.js

@@ -0,0 +1,140 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree } from '@react-three/fiber';
+import { CanvasTexture } from 'three';
+import { useGizmoContext } from './GizmoHelper.js';
+
+function Axis({
+  scale = [0.8, 0.05, 0.05],
+  color,
+  rotation
+}) {
+  return /*#__PURE__*/React.createElement("group", {
+    rotation: rotation
+  }, /*#__PURE__*/React.createElement("mesh", {
+    position: [0.4, 0, 0]
+  }, /*#__PURE__*/React.createElement("boxGeometry", {
+    args: scale
+  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    color: color,
+    toneMapped: false
+  })));
+}
+function AxisHead({
+  onClick,
+  font,
+  disabled,
+  arcStyle,
+  label,
+  labelColor,
+  axisHeadScale = 1,
+  ...props
+}) {
+  const gl = useThree(state => state.gl);
+  const texture = React.useMemo(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 64;
+    canvas.height = 64;
+    const context = canvas.getContext('2d');
+    context.beginPath();
+    context.arc(32, 32, 16, 0, 2 * Math.PI);
+    context.closePath();
+    context.fillStyle = arcStyle;
+    context.fill();
+    if (label) {
+      context.font = font;
+      context.textAlign = 'center';
+      context.fillStyle = labelColor;
+      context.fillText(label, 32, 41);
+    }
+    return new CanvasTexture(canvas);
+  }, [arcStyle, label, labelColor, font]);
+  const [active, setActive] = React.useState(false);
+  const scale = (label ? 1 : 0.75) * (active ? 1.2 : 1) * axisHeadScale;
+  const handlePointerOver = e => {
+    e.stopPropagation();
+    setActive(true);
+  };
+  const handlePointerOut = e => {
+    e.stopPropagation();
+    setActive(false);
+  };
+  return /*#__PURE__*/React.createElement("sprite", _extends({
+    scale: scale,
+    onPointerOver: !disabled ? handlePointerOver : undefined,
+    onPointerOut: !disabled ? onClick || handlePointerOut : undefined
+  }, props), /*#__PURE__*/React.createElement("spriteMaterial", {
+    map: texture,
+    "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
+    alphaTest: 0.3,
+    opacity: label ? 1 : 0.75,
+    toneMapped: false
+  }));
+}
+const GizmoViewport = ({
+  hideNegativeAxes,
+  hideAxisHeads,
+  disabled,
+  font = '18px Inter var, Arial, sans-serif',
+  axisColors = ['#ff2060', '#20df80', '#2080ff'],
+  axisHeadScale = 1,
+  axisScale,
+  labels = ['X', 'Y', 'Z'],
+  labelColor = '#000',
+  onClick,
+  ...props
+}) => {
+  const [colorX, colorY, colorZ] = axisColors;
+  const {
+    tweenCamera
+  } = useGizmoContext();
+  const axisHeadProps = {
+    font,
+    disabled,
+    labelColor,
+    onClick,
+    axisHeadScale,
+    onPointerDown: !disabled ? e => {
+      tweenCamera(e.object.position);
+      e.stopPropagation();
+    } : undefined
+  };
+  return /*#__PURE__*/React.createElement("group", _extends({
+    scale: 40
+  }, props), /*#__PURE__*/React.createElement(Axis, {
+    color: colorX,
+    rotation: [0, 0, 0],
+    scale: axisScale
+  }), /*#__PURE__*/React.createElement(Axis, {
+    color: colorY,
+    rotation: [0, 0, Math.PI / 2],
+    scale: axisScale
+  }), /*#__PURE__*/React.createElement(Axis, {
+    color: colorZ,
+    rotation: [0, -Math.PI / 2, 0],
+    scale: axisScale
+  }), !hideAxisHeads && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorX,
+    position: [1, 0, 0],
+    label: labels[0]
+  }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorY,
+    position: [0, 1, 0],
+    label: labels[1]
+  }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorZ,
+    position: [0, 0, 1],
+    label: labels[2]
+  }, axisHeadProps)), !hideNegativeAxes && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorX,
+    position: [-1, 0, 0]
+  }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorY,
+    position: [0, -1, 0]
+  }, axisHeadProps)), /*#__PURE__*/React.createElement(AxisHead, _extends({
+    arcStyle: colorZ,
+    position: [0, 0, -1]
+  }, axisHeadProps)))));
+};
+
+export { GizmoViewport };

package/core/Gltf.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-stdlib"),o=require("@react-three/fiber"),c=require("./Clone.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var u=s(e),a=n(r);let d=null,f="https://www.gstatic.com/draco/versioned/decoders/1.5.5/";function i(e=!0,r=!0,o){return c=>{o&&o(c),e&&(d||(d=new t.DRACOLoader),d.setDecoderPath("string"==typeof e?e:f),c.setDRACOLoader(d)),r&&c.setMeshoptDecoder("function"==typeof t.MeshoptDecoder?t.MeshoptDecoder():t.MeshoptDecoder)}}const l=(e,r,c,s)=>o.useLoader(t.GLTFLoader,e,i(r,c,s));l.preload=(e,r,c,s)=>o.useLoader.preload(t.GLTFLoader,e,i(r,c,s)),l.clear=e=>o.useLoader.clear(t.GLTFLoader,e),l.setDecoderPath=e=>{f=e};const p=a.forwardRef((({src:e,useDraco:r,useMeshOpt:t,extendLoader:o,...s},n)=>{const{scene:d}=l(e,r,t,o);return a.createElement(c.Clone,u.default({ref:n},s,{object:d}))}));exports.Gltf=p,exports.useGLTF=l;

package/core/Gltf.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { GLTFLoader, GLTF } from 'three-stdlib';
+import { ObjectMap } from '@react-three/fiber';
+import { CloneProps } from './Clone';
+type Path = string | string[];
+type UseDraco = boolean | string;
+type UseMeshopt = boolean;
+type ExtendLoader = (loader: GLTFLoader) => void;
+export declare const useGLTF: {
+    <T extends Path>(path: T, useDraco?: UseDraco, useMeshopt?: UseMeshopt, extendLoader?: ExtendLoader): T extends any[] ? (GLTF & ObjectMap)[] : GLTF & ObjectMap;
+    preload(path: Path, useDraco?: UseDraco, useMeshopt?: UseMeshopt, extendLoader?: ExtendLoader): void;
+    clear(path: Path): void;
+    setDecoderPath(path: string): void;
+};
+export type GltfProps = Omit<CloneProps, 'object'> & {
+    src: string;
+    useDraco?: UseDraco;
+    useMeshOpt?: UseMeshopt;
+    extendLoader?: ExtendLoader;
+};
+export declare const Gltf: React.ForwardRefExoticComponent<Omit<CloneProps, "object"> & {
+    src: string;
+    useDraco?: UseDraco;
+    useMeshOpt?: UseMeshopt;
+    extendLoader?: ExtendLoader;
+} & React.RefAttributes<import("three").Group<import("three").Object3DEventMap>>>;
+export {};

package/core/Gltf.js

@@ -0,0 +1,52 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { GLTFLoader, DRACOLoader, MeshoptDecoder } from 'three-stdlib';
+import { useLoader } from '@react-three/fiber';
+import { Clone } from './Clone.js';
+
+let dracoLoader = null;
+let decoderPath = 'https://www.gstatic.com/draco/versioned/decoders/1.5.5/';
+function extensions(useDraco = true, useMeshopt = true, extendLoader) {
+  return loader => {
+    if (extendLoader) {
+      extendLoader(loader);
+    }
+    if (useDraco) {
+      if (!dracoLoader) {
+        dracoLoader = new DRACOLoader();
+      }
+      dracoLoader.setDecoderPath(typeof useDraco === 'string' ? useDraco : decoderPath);
+      loader.setDRACOLoader(dracoLoader);
+    }
+    if (useMeshopt) {
+      loader.setMeshoptDecoder(typeof MeshoptDecoder === 'function' ? MeshoptDecoder() : MeshoptDecoder);
+    }
+  };
+}
+const useGLTF = (path, useDraco, useMeshopt, extendLoader) => useLoader(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader));
+useGLTF.preload = (path, useDraco, useMeshopt, extendLoader) => useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader));
+useGLTF.clear = path => useLoader.clear(GLTFLoader, path);
+useGLTF.setDecoderPath = path => {
+  decoderPath = path;
+};
+
+//
+
+const Gltf = /* @__PURE__ */React.forwardRef(({
+  src,
+  useDraco,
+  useMeshOpt,
+  extendLoader,
+  ...props
+}, ref) => {
+  const {
+    scene
+  } = useGLTF(src, useDraco, useMeshOpt, extendLoader);
+  return /*#__PURE__*/React.createElement(Clone, _extends({
+    ref: ref
+  }, props, {
+    object: scene
+  }));
+});
+
+export { Gltf, useGLTF };

package/core/GradientTexture.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"),a=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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 o=n(e),u=i(t),c=i(a);let l=function(e){return e.Linear="linear",e.Radial="radial",e}({});exports.GradientTexture=function({stops:e,colors:t,size:a=1024,width:n=16,type:i=l.Linear,innerCircleRadius:s=0,outerCircleRadius:d="auto",...f}){const h=r.useThree((e=>e.gl)),p=u.useMemo((()=>{const r=document.createElement("canvas"),o=r.getContext("2d");let u;if(r.width=n,r.height=a,i===l.Linear)u=o.createLinearGradient(0,0,0,a);else{const e=r.width/2,t=r.height/2,a="auto"!==d?Math.abs(Number(d)):Math.sqrt(e**2+t**2);u=o.createRadialGradient(e,t,Math.abs(s),e,t,a)}const f=new c.Color;let h=e.length;for(;h--;)u.addColorStop(e[h],f.set(t[h]).getStyle());return o.save(),o.fillStyle=u,o.fillRect(0,0,n,a),o.restore(),r}),[e]);return u.createElement("canvasTexture",o.default({colorSpace:h.outputColorSpace,args:[p],attach:"map"},f))},exports.GradientType=l;

package/core/GradientTexture.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ThreeElements } from '@react-three/fiber';
+import * as THREE from 'three';
+export declare enum GradientType {
+    Linear = "linear",
+    Radial = "radial"
+}
+export type GradientTextureProps = {
+    stops: Array<number>;
+    colors: Array<THREE.ColorRepresentation>;
+    attach?: string;
+    size?: number;
+    width?: number;
+    type?: GradientType;
+    innerCircleRadius?: number;
+    outerCircleRadius?: string | number;
+} & Omit<ThreeElements['texture'], 'args' | 'type'>;
+export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: GradientTextureProps): React.JSX.Element;