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

package/web/index.js

@@ -0,0 +1,176 @@
+export { Html } from './Html.js';
+export { CycleRaycast } from './CycleRaycast.js';
+export { useCursor } from './useCursor.js';
+export { Loader } from './Loader.js';
+export { Scroll, ScrollControls, useScroll } from './ScrollControls.js';
+export { PresentationControls } from './PresentationControls.js';
+export { KeyboardControls, useKeyboardControls } from './KeyboardControls.js';
+export { Select, useSelect } from './Select.js';
+export { View } from './View.js';
+export { PivotControls } from './pivotControls/index.js';
+export { ScreenVideoTexture } from './ScreenVideoTexture.js';
+export { WebcamVideoTexture } from './WebcamVideoTexture.js';
+export { FaceControls, useFaceControls } from './FaceControls.js';
+export { DragControls } from './DragControls.js';
+export { FaceLandmarker, FaceLandmarkerDefaults, useFaceLandmarker } from './FaceLandmarker.js';
+export { Facemesh, FacemeshDatas, FacemeshEye, FacemeshEyeDefaults } from './Facemesh.js';
+export { Billboard } from '../core/Billboard.js';
+export { ScreenSpace } from '../core/ScreenSpace.js';
+export { ScreenSizer } from '../core/ScreenSizer.js';
+export { QuadraticBezierLine } from '../core/QuadraticBezierLine.js';
+export { CubicBezierLine } from '../core/CubicBezierLine.js';
+export { CatmullRomLine } from '../core/CatmullRomLine.js';
+export { Line } from '../core/Line.js';
+export { PositionalAudio } from '../core/PositionalAudio.js';
+export { Text } from '../core/Text.js';
+export { Text3D } from '../core/Text3D.js';
+export { Effects, isWebGL2Available } from '../core/Effects.js';
+export { GradientTexture, GradientType } from '../core/GradientTexture.js';
+export { Image } from '../core/Image.js';
+export { Edges } from '../core/Edges.js';
+export { Outlines } from '../core/Outlines.js';
+export { Trail, useTrail } from '../core/Trail.js';
+export { Sampler, useSurfaceSampler } from '../core/Sampler.js';
+export { ComputedAttribute } from '../core/ComputedAttribute.js';
+export { Clone } from '../core/Clone.js';
+export { MarchingCube, MarchingCubes, MarchingPlane } from '../core/MarchingCubes.js';
+export { Decal } from '../core/Decal.js';
+export { Svg } from '../core/Svg.js';
+export { Gltf, useGLTF } from '../core/Gltf.js';
+export { AsciiRenderer } from '../core/AsciiRenderer.js';
+export { Splat } from '../core/Splat.js';
+export { OrthographicCamera } from '../core/OrthographicCamera.js';
+export { PerspectiveCamera } from '../core/PerspectiveCamera.js';
+export { CubeCamera, useCubeCamera } from '../core/CubeCamera.js';
+export { DeviceOrientationControls } from '../core/DeviceOrientationControls.js';
+export { FlyControls } from '../core/FlyControls.js';
+export { MapControls } from '../core/MapControls.js';
+export { OrbitControls } from '../core/OrbitControls.js';
+export { TrackballControls } from '../core/TrackballControls.js';
+export { ArcballControls } from '../core/ArcballControls.js';
+export { TransformControls } from '../core/TransformControls.js';
+export { PointerLockControls } from '../core/PointerLockControls.js';
+export { FirstPersonControls } from '../core/FirstPersonControls.js';
+export { CameraControls } from '../core/CameraControls.js';
+export { default as CameraControlsImpl } from 'camera-controls';
+export { MotionPathControls, useMotion } from '../core/MotionPathControls.js';
+export { GizmoHelper, useGizmoContext } from '../core/GizmoHelper.js';
+export { GizmoViewcube } from '../core/GizmoViewcube.js';
+export { GizmoViewport } from '../core/GizmoViewport.js';
+export { Grid } from '../core/Grid.js';
+export { CubeTexture, useCubeTexture } from '../core/CubeTexture.js';
+export { Fbx, useFBX } from '../core/Fbx.js';
+export { Ktx2, useKTX2 } from '../core/Ktx2.js';
+export { Progress, useProgress } from '../core/Progress.js';
+export { IsObject, Texture, useTexture } from '../core/Texture.js';
+export { VideoTexture, useVideoTexture } from '../core/VideoTexture.js';
+export { useFont } from '../core/useFont.js';
+export { checkIfFrameIsEmpty, getFirstFrame, useSpriteLoader } from '../core/useSpriteLoader.js';
+export { Helper, useHelper } from '../core/Helper.js';
+export { Stats } from '../core/Stats.js';
+export { StatsGl } from '../core/StatsGl.js';
+export { useDepthBuffer } from '../core/useDepthBuffer.js';
+export { useAspect } from '../core/useAspect.js';
+export { useCamera } from '../core/useCamera.js';
+export { DetectGPU, useDetectGPU } from '../core/DetectGPU.js';
+export { Bvh, useBVH } from '../core/Bvh.js';
+export { useContextBridge } from '../core/useContextBridge.js';
+export { useAnimations } from '../core/useAnimations.js';
+export { Fbo, useFBO } from '../core/Fbo.js';
+export { useIntersect } from '../core/useIntersect.js';
+export { useBoxProjectedEnv } from '../core/useBoxProjectedEnv.js';
+export { BBAnchor } from '../core/BBAnchor.js';
+export { TrailTexture, useTrailTexture } from '../core/TrailTexture.js';
+export { Example } from '../core/Example.js';
+export { SpriteAnimator, useSpriteAnimator } from '../core/SpriteAnimator.js';
+export { CurveModifier } from '../core/CurveModifier.js';
+export { MeshDistortMaterial } from '../core/MeshDistortMaterial.js';
+export { MeshWobbleMaterial } from '../core/MeshWobbleMaterial.js';
+export { MeshReflectorMaterial } from '../core/MeshReflectorMaterial.js';
+export { MeshRefractionMaterial } from '../core/MeshRefractionMaterial.js';
+export { MeshTransmissionMaterial } from '../core/MeshTransmissionMaterial.js';
+export { MeshDiscardMaterial } from '../core/MeshDiscardMaterial.js';
+export { MultiMaterial } from '../core/MultiMaterial.js';
+export { PointMaterial, PointMaterialImpl } from '../core/PointMaterial.js';
+export { shaderMaterial } from '../core/shaderMaterial.js';
+export { SoftShadows } from '../core/softShadows.js';
+export { Box, Capsule, Circle, Cone, Cylinder, Dodecahedron, Extrude, Icosahedron, Lathe, Octahedron, Plane, Polyhedron, Ring, Shape, Sphere, Tetrahedron, Torus, TorusKnot, Tube } from '../core/shapes.js';
+export { RoundedBox, RoundedBoxGeometry } from '../core/RoundedBox.js';
+export { ScreenQuad } from '../core/ScreenQuad.js';
+export { Center } from '../core/Center.js';
+export { Resize } from '../core/Resize.js';
+export { Bounds, useBounds } from '../core/Bounds.js';
+export { CameraShake } from '../core/CameraShake.js';
+export { Float } from '../core/Float.js';
+export { Stage } from '../core/Stage.js';
+export { Backdrop } from '../core/Backdrop.js';
+export { Shadow } from '../core/Shadow.js';
+export { Caustics } from '../core/Caustics.js';
+export { ContactShadows } from '../core/ContactShadows.js';
+export { AccumulativeShadows, RandomizedLight, accumulativeContext } from '../core/AccumulativeShadows.js';
+export { SpotLight, SpotLightShadow } from '../core/SpotLight.js';
+export { Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal } from '../core/Environment.js';
+export { Lightformer } from '../core/Lightformer.js';
+export { Sky, calcPosFromAngles } from '../core/Sky.js';
+export { Stars } from '../core/Stars.js';
+export { Cloud, CloudInstance, Clouds } from '../core/Cloud.js';
+export { Sparkles } from '../core/Sparkles.js';
+export { useEnvironment } from '../core/useEnvironment.js';
+export { MatcapTexture, useMatcapTexture } from '../core/MatcapTexture.js';
+export { NormalTexture, useNormalTexture } from '../core/NormalTexture.js';
+export { Wireframe } from '../core/Wireframe.js';
+export { ShadowAlpha } from '../core/ShadowAlpha.js';
+export { Point, Points, PointsBuffer, PositionPoint } from '../core/Points.js';
+export { Instance, InstancedAttribute, Instances, Merged, PositionMesh, createInstances } from '../core/Instances.js';
+export { Segment, SegmentObject, Segments } from '../core/Segments.js';
+export { Detailed } from '../core/Detailed.js';
+export { Preload } from '../core/Preload.js';
+export { BakeShadows } from '../core/BakeShadows.js';
+export { meshBounds } from '../core/meshBounds.js';
+export { AdaptiveDpr } from '../core/AdaptiveDpr.js';
+export { AdaptiveEvents } from '../core/AdaptiveEvents.js';
+export { PerformanceMonitor, usePerformanceMonitor } from '../core/PerformanceMonitor.js';
+export { RenderTexture } from '../core/RenderTexture.js';
+export { RenderCubeTexture } from '../core/RenderCubeTexture.js';
+export { Mask, useMask } from '../core/Mask.js';
+export { Hud } from '../core/Hud.js';
+export { Fisheye } from '../core/Fisheye.js';
+export { MeshPortalMaterial } from '../core/MeshPortalMaterial.js';
+export { calculateScaleFactor } from '../core/calculateScaleFactor.js';
+import '@babel/runtime/helpers/esm/extends';
+import 'react';
+import 'react-dom/client';
+import 'three';
+import '@react-three/fiber';
+import 'zustand';
+import 'maath';
+import '@use-gesture/react';
+import 'zustand/middleware';
+import 'three-stdlib';
+import 'zustand/shallow';
+import 'tunnel-rat';
+import './pivotControls/AxisArrow.js';
+import './pivotControls/context.js';
+import './pivotControls/AxisRotator.js';
+import './pivotControls/PlaneSlider.js';
+import './pivotControls/ScalingSphere.js';
+import 'suspend-react';
+import 'hls.js';
+import 'troika-three-text';
+import '../helpers/constants.js';
+import 'meshline';
+import 'stats.js';
+import '../helpers/useEffectfulState.js';
+import 'stats-gl';
+import 'detect-gpu';
+import 'three-mesh-bvh';
+import '../helpers/deprecated.js';
+import '../materials/BlurPass.js';
+import '../materials/ConvolutionMaterial.js';
+import '../materials/MeshReflectorMaterial.js';
+import '../materials/MeshRefractionMaterial.js';
+import '../materials/DiscardMaterial.js';
+import '@monogrid/gainmap-js';
+import '../helpers/environment-assets.js';
+import '../materials/SpotLightMaterial.js';
+import '../materials/WireframeMaterial.js';

package/web/pivotControls/AxisArrow.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../../core/Line.cjs.js"),o=require("../Html.cjs.js"),a=require("./context.cjs.js");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 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("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var c=i(e),l=i(t);const s=new l.Vector3,u=new l.Vector3,d=(e,t,r,n)=>{const o=t.dot(t),a=t.dot(e)-t.dot(r),i=t.dot(n);if(0===i)return-a/o;s.copy(n).multiplyScalar(o/i).sub(t),u.copy(n).multiplyScalar(a/i).add(r).sub(e);return-s.dot(u)/s.dot(s)},p=new l.Vector3(0,1,0),m=new l.Matrix4;exports.AxisArrow=({direction:e,axis:t})=>{const{translation:i,translationLimits:s,annotations:u,annotationsClass:f,depthTest:x,scale:y,lineWidth:g,fixed:h,axisColors:b,hoveredColor:O,opacity:P,renderOrder:w,onDragStart:v,onDrag:j,onDragEnd:E,userData:M}=c.useContext(a.context),k=r.useThree((e=>e.controls)),C=c.useRef(null),q=c.useRef(null),L=c.useRef(null),D=c.useRef(0),[F,R]=c.useState(!1),T=c.useCallback((r=>{u&&(C.current.innerText=`${i.current[t].toFixed(2)}`,C.current.style.display="block"),r.stopPropagation();const n=(new l.Matrix4).extractRotation(q.current.matrixWorld),o=r.point.clone(),a=(new l.Vector3).setFromMatrixPosition(q.current.matrixWorld),c=e.clone().applyMatrix4(n).normalize();L.current={clickPoint:o,dir:c},D.current=i.current[t],v({component:"Arrow",axis:t,origin:a,directions:[c]}),k&&(k.enabled=!1),r.target.setPointerCapture(r.pointerId)}),[u,e,k,v,i,t]),S=c.useCallback((e=>{if(e.stopPropagation(),F||R(!0),L.current){const{clickPoint:r,dir:n}=L.current,[o,a]=(null==s?void 0:s[t])||[void 0,void 0];let c=d(r,n,e.ray.origin,e.ray.direction);void 0!==o&&(c=Math.max(c,o-D.current)),void 0!==a&&(c=Math.min(c,a-D.current)),i.current[t]=D.current+c,u&&(C.current.innerText=`${i.current[t].toFixed(2)}`),m.makeTranslation(n.x*c,n.y*c,n.z*c),j(m)}}),[u,j,F,i,s,t]),W=c.useCallback((e=>{u&&(C.current.style.display="none"),e.stopPropagation(),L.current=null,E(),k&&(k.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[u,k,E]),V=c.useCallback((e=>{e.stopPropagation(),R(!1)}),[]),{cylinderLength:z,coneWidth:A,coneLength:_,matrixL:U}=c.useMemo((()=>{const t=h?g/y*1.6:y/20,r=h?.2:y/5,n=h?1-r:y-r,o=(new l.Quaternion).setFromUnitVectors(p,e.clone().normalize());return{cylinderLength:n,coneWidth:t,coneLength:r,matrixL:(new l.Matrix4).makeRotationFromQuaternion(o)}}),[e,y,g,h]),G=F?O:b[t];return c.createElement("group",{ref:q},c.createElement("group",{matrix:U,matrixAutoUpdate:!1,onPointerDown:T,onPointerMove:S,onPointerUp:W,onPointerOut:V},u&&c.createElement(o.Html,{position:[0,-_,0]},c.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:f,ref:C})),c.createElement("mesh",{visible:!1,position:[0,(z+_)/2,0],userData:M},c.createElement("cylinderGeometry",{args:[1.4*A,1.4*A,z+_,8,1]})),c.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:x,points:[0,0,0,0,z,0],lineWidth:g,side:l.DoubleSide,color:G,opacity:P,polygonOffset:!0,renderOrder:w,polygonOffsetFactor:-10,fog:!1}),c.createElement("mesh",{raycast:()=>null,position:[0,z+_/2,0],renderOrder:w},c.createElement("coneGeometry",{args:[A,_,24,1]}),c.createElement("meshBasicMaterial",{transparent:!0,depthTest:x,color:G,opacity:P,polygonOffset:!0,polygonOffsetFactor:-10,fog:!1}))))},exports.calculateOffset=d;

package/web/pivotControls/AxisArrow.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as THREE from 'three';
+export declare const calculateOffset: (clickPoint: THREE.Vector3, normal: THREE.Vector3, rayStart: THREE.Vector3, rayDir: THREE.Vector3) => number;
+export declare const AxisArrow: React.FC<{
+    direction: THREE.Vector3;
+    axis: 0 | 1 | 2;
+}>;

package/web/pivotControls/AxisArrow.js

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { Line } from '../../core/Line.js';
+import { Html } from '../Html.js';
+import { context } from './context.js';
+
+const vec1 = /* @__PURE__ */new THREE.Vector3();
+const vec2 = /* @__PURE__ */new THREE.Vector3();
+const calculateOffset = (clickPoint, normal, rayStart, rayDir) => {
+  const e1 = normal.dot(normal);
+  const e2 = normal.dot(clickPoint) - normal.dot(rayStart);
+  const e3 = normal.dot(rayDir);
+  if (e3 === 0) {
+    return -e2 / e1;
+  }
+  vec1.copy(rayDir).multiplyScalar(e1 / e3).sub(normal);
+  vec2.copy(rayDir).multiplyScalar(e2 / e3).add(rayStart).sub(clickPoint);
+  const offset = -vec1.dot(vec2) / vec1.dot(vec1);
+  return offset;
+};
+const upV = /* @__PURE__ */new THREE.Vector3(0, 1, 0);
+const offsetMatrix = /* @__PURE__ */new THREE.Matrix4();
+const AxisArrow = ({
+  direction,
+  axis
+}) => {
+  const {
+    translation,
+    translationLimits,
+    annotations,
+    annotationsClass,
+    depthTest,
+    scale,
+    lineWidth,
+    fixed,
+    axisColors,
+    hoveredColor,
+    opacity,
+    renderOrder,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    userData
+  } = React.useContext(context);
+  const camControls = useThree(state => state.controls);
+  const divRef = React.useRef(null);
+  const objRef = React.useRef(null);
+  const clickInfo = React.useRef(null);
+  const offset0 = React.useRef(0);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const onPointerDown = React.useCallback(e => {
+    if (annotations) {
+      divRef.current.innerText = `${translation.current[axis].toFixed(2)}`;
+      divRef.current.style.display = 'block';
+    }
+    e.stopPropagation();
+    const rotation = new THREE.Matrix4().extractRotation(objRef.current.matrixWorld);
+    const clickPoint = e.point.clone();
+    const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
+    const dir = direction.clone().applyMatrix4(rotation).normalize();
+    clickInfo.current = {
+      clickPoint,
+      dir
+    };
+    offset0.current = translation.current[axis];
+    onDragStart({
+      component: 'Arrow',
+      axis,
+      origin,
+      directions: [dir]
+    });
+    camControls && (camControls.enabled = false);
+    // @ts-ignore - setPointerCapture is not in the type definition
+    e.target.setPointerCapture(e.pointerId);
+  }, [annotations, direction, camControls, onDragStart, translation, axis]);
+  const onPointerMove = React.useCallback(e => {
+    e.stopPropagation();
+    if (!isHovered) setIsHovered(true);
+    if (clickInfo.current) {
+      const {
+        clickPoint,
+        dir
+      } = clickInfo.current;
+      const [min, max] = (translationLimits == null ? void 0 : translationLimits[axis]) || [undefined, undefined];
+      let offset = calculateOffset(clickPoint, dir, e.ray.origin, e.ray.direction);
+      if (min !== undefined) {
+        offset = Math.max(offset, min - offset0.current);
+      }
+      if (max !== undefined) {
+        offset = Math.min(offset, max - offset0.current);
+      }
+      translation.current[axis] = offset0.current + offset;
+      if (annotations) {
+        divRef.current.innerText = `${translation.current[axis].toFixed(2)}`;
+      }
+      offsetMatrix.makeTranslation(dir.x * offset, dir.y * offset, dir.z * offset);
+      onDrag(offsetMatrix);
+    }
+  }, [annotations, onDrag, isHovered, translation, translationLimits, axis]);
+  const onPointerUp = React.useCallback(e => {
+    if (annotations) {
+      divRef.current.style.display = 'none';
+    }
+    e.stopPropagation();
+    clickInfo.current = null;
+    onDragEnd();
+    camControls && (camControls.enabled = true);
+    // @ts-ignore - releasePointerCapture & PointerEvent#pointerId is not in the type definition
+    e.target.releasePointerCapture(e.pointerId);
+  }, [annotations, camControls, onDragEnd]);
+  const onPointerOut = React.useCallback(e => {
+    e.stopPropagation();
+    setIsHovered(false);
+  }, []);
+  const {
+    cylinderLength,
+    coneWidth,
+    coneLength,
+    matrixL
+  } = React.useMemo(() => {
+    const coneWidth = fixed ? lineWidth / scale * 1.6 : scale / 20;
+    const coneLength = fixed ? 0.2 : scale / 5;
+    const cylinderLength = fixed ? 1 - coneLength : scale - coneLength;
+    const quaternion = new THREE.Quaternion().setFromUnitVectors(upV, direction.clone().normalize());
+    const matrixL = new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
+    return {
+      cylinderLength,
+      coneWidth,
+      coneLength,
+      matrixL
+    };
+  }, [direction, scale, lineWidth, fixed]);
+  const color_ = isHovered ? hoveredColor : axisColors[axis];
+  return /*#__PURE__*/React.createElement("group", {
+    ref: objRef
+  }, /*#__PURE__*/React.createElement("group", {
+    matrix: matrixL,
+    matrixAutoUpdate: false,
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    onPointerOut: onPointerOut
+  }, annotations && /*#__PURE__*/React.createElement(Html, {
+    position: [0, -coneLength, 0]
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none',
+      background: '#151520',
+      color: 'white',
+      padding: '6px 8px',
+      borderRadius: 7,
+      whiteSpace: 'nowrap'
+    },
+    className: annotationsClass,
+    ref: divRef
+  })), /*#__PURE__*/React.createElement("mesh", {
+    visible: false,
+    position: [0, (cylinderLength + coneLength) / 2.0, 0],
+    userData: userData
+  }, /*#__PURE__*/React.createElement("cylinderGeometry", {
+    args: [coneWidth * 1.4, coneWidth * 1.4, cylinderLength + coneLength, 8, 1]
+  })), /*#__PURE__*/React.createElement(Line, {
+    transparent: true,
+    raycast: () => null,
+    depthTest: depthTest,
+    points: [0, 0, 0, 0, cylinderLength, 0],
+    lineWidth: lineWidth,
+    side: THREE.DoubleSide,
+    color: color_,
+    opacity: opacity,
+    polygonOffset: true,
+    renderOrder: renderOrder,
+    polygonOffsetFactor: -10,
+    fog: false
+  }), /*#__PURE__*/React.createElement("mesh", {
+    raycast: () => null,
+    position: [0, cylinderLength + coneLength / 2.0, 0],
+    renderOrder: renderOrder
+  }, /*#__PURE__*/React.createElement("coneGeometry", {
+    args: [coneWidth, coneLength, 24, 1]
+  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    depthTest: depthTest,
+    color: color_,
+    opacity: opacity,
+    polygonOffset: true,
+    polygonOffsetFactor: -10,
+    fog: false
+  }))));
+};
+
+export { AxisArrow, calculateOffset };

package/web/pivotControls/AxisRotator.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../../core/Line.cjs.js"),o=require("../Html.cjs.js"),a=require("./context.cjs.js");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 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("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var c=i(e),s=i(t);const l=new s.Vector3,u=new s.Vector3,d=e=>180*e/Math.PI,p=e=>{let t=((e,t)=>{let r=Math.floor(e/t);return r=r<0?r+1:r,e-r*t})(e,2*Math.PI);return Math.abs(t)<1e-6?0:(t<0&&(t+=2*Math.PI),t)},m=new s.Matrix4,h=new s.Vector3,x=new s.Ray,P=new s.Vector3;exports.AxisRotator=({dir1:e,dir2:t,axis:i})=>{const{rotationLimits:M,annotations:f,annotationsClass:b,depthTest:g,scale:y,lineWidth:w,fixed:v,axisColors:C,hoveredColor:j,renderOrder:I,opacity:O,onDragStart:k,onDrag:R,onDragEnd:q,userData:V}=c.useContext(a.context),D=r.useThree((e=>e.controls)),F=c.useRef(null),E=c.useRef(null),W=c.useRef(0),z=c.useRef(0),T=c.useRef(null),[A,L]=c.useState(!1),S=c.useCallback((e=>{f&&(F.current.innerText=`${d(z.current).toFixed(0)}º`,F.current.style.display="block"),e.stopPropagation();const t=e.point.clone(),r=(new s.Vector3).setFromMatrixPosition(E.current.matrixWorld),n=(new s.Vector3).setFromMatrixColumn(E.current.matrixWorld,0).normalize(),o=(new s.Vector3).setFromMatrixColumn(E.current.matrixWorld,1).normalize(),a=(new s.Vector3).setFromMatrixColumn(E.current.matrixWorld,2).normalize(),c=(new s.Plane).setFromNormalAndCoplanarPoint(a,r);T.current={clickPoint:t,origin:r,e1:n,e2:o,normal:a,plane:c},k({component:"Rotator",axis:i,origin:r,directions:[n,o,a]}),D&&(D.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[f,D,k,i]),_=c.useCallback((e=>{if(e.stopPropagation(),A||L(!0),T.current){const{clickPoint:t,origin:r,e1:n,e2:o,normal:a,plane:c}=T.current,[b,g]=(null==M?void 0:M[i])||[void 0,void 0];x.copy(e.ray),x.intersectPlane(c,P),x.direction.negate(),x.intersectPlane(c,P);let y=((e,t,r,n,o)=>{l.copy(e).sub(r),u.copy(t).sub(r);const a=n.dot(n),i=o.dot(o),c=l.dot(n)/a,s=l.dot(o)/i,d=u.dot(n)/a,p=u.dot(o)/i,m=Math.atan2(s,c);return Math.atan2(p,d)-m})(t,P,r,n,o),w=d(y);e.shiftKey&&(w=10*Math.round(w/10),y=(e=>e*Math.PI/180)(w)),void 0!==b&&void 0!==g&&g-b<2*Math.PI?(y=p(y),y=y>Math.PI?y-2*Math.PI:y,y=s.MathUtils.clamp(y,b-W.current,g-W.current),z.current=W.current+y):(z.current=p(W.current+y),z.current=z.current>Math.PI?z.current-2*Math.PI:z.current),f&&(w=d(z.current),F.current.innerText=`${w.toFixed(0)}º`),m.makeRotationAxis(a,y),h.copy(r).applyMatrix4(m).sub(r).negate(),m.setPosition(h),R(m)}}),[f,R,A,M,i]),U=c.useCallback((e=>{f&&(F.current.style.display="none"),e.stopPropagation(),W.current=z.current,T.current=null,q(),D&&(D.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[f,D,q]),H=c.useCallback((e=>{e.stopPropagation(),L(!1)}),[]),N=c.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new s.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),$=v?.65:.65*y,B=c.useMemo((()=>{const e=[];for(let t=0;t<=32;t++){const r=t*(Math.PI/2)/32;e.push(new s.Vector3(Math.cos(r)*$,Math.sin(r)*$,0))}return e}),[$]);return c.createElement("group",{ref:E,onPointerDown:S,onPointerMove:_,onPointerUp:U,onPointerOut:H,matrix:N,matrixAutoUpdate:!1},f&&c.createElement(o.Html,{position:[$,$,0]},c.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:b,ref:F})),c.createElement(n.Line,{points:B,lineWidth:4*w,visible:!1,userData:V}),c.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:g,points:B,lineWidth:w,side:s.DoubleSide,color:A?j:C[i],opacity:O,polygonOffset:!0,polygonOffsetFactor:-10,renderOrder:I,fog:!1}))};

package/web/pivotControls/AxisRotator.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as THREE from 'three';
+export declare const AxisRotator: React.FC<{
+    dir1: THREE.Vector3;
+    dir2: THREE.Vector3;
+    axis: 0 | 1 | 2;
+}>;

package/web/pivotControls/AxisRotator.js

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { Line } from '../../core/Line.js';
+import { Html } from '../Html.js';
+import { context } from './context.js';
+
+const clickDir = /* @__PURE__ */new THREE.Vector3();
+const intersectionDir = /* @__PURE__ */new THREE.Vector3();
+const toDegrees = radians => radians * 180 / Math.PI;
+const toRadians = degrees => degrees * Math.PI / 180;
+const calculateAngle = (clickPoint, intersectionPoint, origin, e1, e2) => {
+  clickDir.copy(clickPoint).sub(origin);
+  intersectionDir.copy(intersectionPoint).sub(origin);
+  const dote1e1 = e1.dot(e1);
+  const dote2e2 = e2.dot(e2);
+  const uClick = clickDir.dot(e1) / dote1e1;
+  const vClick = clickDir.dot(e2) / dote2e2;
+  const uIntersection = intersectionDir.dot(e1) / dote1e1;
+  const vIntersection = intersectionDir.dot(e2) / dote2e2;
+  const angleClick = Math.atan2(vClick, uClick);
+  const angleIntersection = Math.atan2(vIntersection, uIntersection);
+  return angleIntersection - angleClick;
+};
+const fmod = (num, denom) => {
+  let k = Math.floor(num / denom);
+  k = k < 0 ? k + 1 : k;
+  return num - k * denom;
+};
+const minimizeAngle = angle => {
+  let result = fmod(angle, 2 * Math.PI);
+  if (Math.abs(result) < 1e-6) {
+    return 0.0;
+  }
+  if (result < 0.0) {
+    result += 2 * Math.PI;
+  }
+  return result;
+};
+const rotMatrix = /* @__PURE__ */new THREE.Matrix4();
+const posNew = /* @__PURE__ */new THREE.Vector3();
+const ray = /* @__PURE__ */new THREE.Ray();
+const intersection = /* @__PURE__ */new THREE.Vector3();
+const AxisRotator = ({
+  dir1,
+  dir2,
+  axis
+}) => {
+  const {
+    rotationLimits,
+    annotations,
+    annotationsClass,
+    depthTest,
+    scale,
+    lineWidth,
+    fixed,
+    axisColors,
+    hoveredColor,
+    renderOrder,
+    opacity,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    userData
+  } = React.useContext(context);
+  const camControls = useThree(state => state.controls);
+  const divRef = React.useRef(null);
+  const objRef = React.useRef(null);
+  const angle0 = React.useRef(0);
+  const angle = React.useRef(0);
+  const clickInfo = React.useRef(null);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const onPointerDown = React.useCallback(e => {
+    if (annotations) {
+      divRef.current.innerText = `${toDegrees(angle.current).toFixed(0)}º`;
+      divRef.current.style.display = 'block';
+    }
+    e.stopPropagation();
+    const clickPoint = e.point.clone();
+    const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
+    const e1 = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 0).normalize();
+    const e2 = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 1).normalize();
+    const normal = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 2).normalize();
+    const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, origin);
+    clickInfo.current = {
+      clickPoint,
+      origin,
+      e1,
+      e2,
+      normal,
+      plane
+    };
+    onDragStart({
+      component: 'Rotator',
+      axis,
+      origin,
+      directions: [e1, e2, normal]
+    });
+    camControls && (camControls.enabled = false);
+    // @ts-ignore
+    e.target.setPointerCapture(e.pointerId);
+  }, [annotations, camControls, onDragStart, axis]);
+  const onPointerMove = React.useCallback(e => {
+    e.stopPropagation();
+    if (!isHovered) setIsHovered(true);
+    if (clickInfo.current) {
+      const {
+        clickPoint,
+        origin,
+        e1,
+        e2,
+        normal,
+        plane
+      } = clickInfo.current;
+      const [min, max] = (rotationLimits == null ? void 0 : rotationLimits[axis]) || [undefined, undefined];
+      ray.copy(e.ray);
+      ray.intersectPlane(plane, intersection);
+      ray.direction.negate();
+      ray.intersectPlane(plane, intersection);
+      let deltaAngle = calculateAngle(clickPoint, intersection, origin, e1, e2);
+      let degrees = toDegrees(deltaAngle);
+
+      // @ts-ignore
+      if (e.shiftKey) {
+        degrees = Math.round(degrees / 10) * 10;
+        deltaAngle = toRadians(degrees);
+      }
+      if (min !== undefined && max !== undefined && max - min < 2 * Math.PI) {
+        deltaAngle = minimizeAngle(deltaAngle);
+        deltaAngle = deltaAngle > Math.PI ? deltaAngle - 2 * Math.PI : deltaAngle;
+        deltaAngle = THREE.MathUtils.clamp(deltaAngle, min - angle0.current, max - angle0.current);
+        angle.current = angle0.current + deltaAngle;
+      } else {
+        angle.current = minimizeAngle(angle0.current + deltaAngle);
+        angle.current = angle.current > Math.PI ? angle.current - 2 * Math.PI : angle.current;
+      }
+      if (annotations) {
+        degrees = toDegrees(angle.current);
+        divRef.current.innerText = `${degrees.toFixed(0)}º`;
+      }
+      rotMatrix.makeRotationAxis(normal, deltaAngle);
+      posNew.copy(origin).applyMatrix4(rotMatrix).sub(origin).negate();
+      rotMatrix.setPosition(posNew);
+      onDrag(rotMatrix);
+    }
+  }, [annotations, onDrag, isHovered, rotationLimits, axis]);
+  const onPointerUp = React.useCallback(e => {
+    if (annotations) {
+      divRef.current.style.display = 'none';
+    }
+    e.stopPropagation();
+    angle0.current = angle.current;
+    clickInfo.current = null;
+    onDragEnd();
+    camControls && (camControls.enabled = true);
+    // @ts-ignore
+    e.target.releasePointerCapture(e.pointerId);
+  }, [annotations, camControls, onDragEnd]);
+  const onPointerOut = React.useCallback(e => {
+    e.stopPropagation();
+    setIsHovered(false);
+  }, []);
+  const matrixL = React.useMemo(() => {
+    const dir1N = dir1.clone().normalize();
+    const dir2N = dir2.clone().normalize();
+    return new THREE.Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
+  }, [dir1, dir2]);
+  const r = fixed ? 0.65 : scale * 0.65;
+  const arc = React.useMemo(() => {
+    const segments = 32;
+    const points = [];
+    for (let j = 0; j <= segments; j++) {
+      const angle = j * (Math.PI / 2) / segments;
+      points.push(new THREE.Vector3(Math.cos(angle) * r, Math.sin(angle) * r, 0));
+    }
+    return points;
+  }, [r]);
+  return /*#__PURE__*/React.createElement("group", {
+    ref: objRef,
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    onPointerOut: onPointerOut,
+    matrix: matrixL,
+    matrixAutoUpdate: false
+  }, annotations && /*#__PURE__*/React.createElement(Html, {
+    position: [r, r, 0]
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none',
+      background: '#151520',
+      color: 'white',
+      padding: '6px 8px',
+      borderRadius: 7,
+      whiteSpace: 'nowrap'
+    },
+    className: annotationsClass,
+    ref: divRef
+  })), /*#__PURE__*/React.createElement(Line, {
+    points: arc,
+    lineWidth: lineWidth * 4,
+    visible: false,
+    userData: userData
+  }), /*#__PURE__*/React.createElement(Line, {
+    transparent: true,
+    raycast: () => null,
+    depthTest: depthTest,
+    points: arc,
+    lineWidth: lineWidth,
+    side: THREE.DoubleSide,
+    color: isHovered ? hoveredColor : axisColors[axis],
+    opacity: opacity,
+    polygonOffset: true,
+    polygonOffsetFactor: -10,
+    renderOrder: renderOrder,
+    fog: false
+  }));
+};
+
+export { AxisRotator };

package/web/pivotControls/PlaneSlider.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../../core/Line.cjs.js"),o=require("../Html.cjs.js"),a=require("./context.cjs.js");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 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("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var s=i(e),c=i(t);const l=new c.Ray,u=new c.Vector3,d=new c.Matrix4;exports.PlaneSlider=({dir1:e,dir2:t,axis:i})=>{const{translation:p,translationLimits:m,annotations:x,annotationsClass:b,depthTest:g,scale:f,lineWidth:h,fixed:M,axisColors:y,hoveredColor:C,opacity:P,renderOrder:v,onDragStart:w,onDrag:O,onDragEnd:j,userData:k}=s.useContext(a.context),F=r.useThree((e=>e.controls)),z=s.useRef(null),E=s.useRef(null),V=s.useRef(null),q=s.useRef(0),D=s.useRef(0),[R,T]=s.useState(!1),S=s.useCallback((e=>{x&&(z.current.innerText=`${p.current[(i+1)%3].toFixed(2)}, ${p.current[(i+2)%3].toFixed(2)}`,z.current.style.display="block"),e.stopPropagation();const t=e.point.clone(),r=(new c.Vector3).setFromMatrixPosition(E.current.matrixWorld),n=(new c.Vector3).setFromMatrixColumn(E.current.matrixWorld,0).normalize(),o=(new c.Vector3).setFromMatrixColumn(E.current.matrixWorld,1).normalize(),a=(new c.Vector3).setFromMatrixColumn(E.current.matrixWorld,2).normalize(),s=(new c.Plane).setFromNormalAndCoplanarPoint(a,r);V.current={clickPoint:t,e1:n,e2:o,plane:s},q.current=p.current[(i+1)%3],D.current=p.current[(i+2)%3],w({component:"Slider",axis:i,origin:r,directions:[n,o,a]}),F&&(F.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[x,F,w,i]),W=s.useCallback((e=>{if(e.stopPropagation(),R||T(!0),V.current){const{clickPoint:t,e1:r,e2:n,plane:o}=V.current,[a,s]=(null==m?void 0:m[(i+1)%3])||[void 0,void 0],[c,b]=(null==m?void 0:m[(i+2)%3])||[void 0,void 0];l.copy(e.ray),l.intersectPlane(o,u),l.direction.negate(),l.intersectPlane(o,u),u.sub(t);let[g,f]=((e,t,r)=>{const n=Math.abs(e.x)>=Math.abs(e.y)&&Math.abs(e.x)>=Math.abs(e.z)?0:Math.abs(e.y)>=Math.abs(e.x)&&Math.abs(e.y)>=Math.abs(e.z)?1:2,o=[0,1,2].sort(((e,r)=>Math.abs(t.getComponent(r))-Math.abs(t.getComponent(e)))),a=n===o[0]?o[1]:o[0],i=e.getComponent(n),s=e.getComponent(a),c=t.getComponent(n),l=t.getComponent(a),u=r.getComponent(n),d=(r.getComponent(a)-u*(s/i))/(l-c*(s/i));return[(u-d*c)/i,d]})(r,n,u);void 0!==a&&(g=Math.max(g,a-q.current)),void 0!==s&&(g=Math.min(g,s-q.current)),void 0!==c&&(f=Math.max(f,c-D.current)),void 0!==b&&(f=Math.min(f,b-D.current)),p.current[(i+1)%3]=q.current+g,p.current[(i+2)%3]=D.current+f,x&&(z.current.innerText=`${p.current[(i+1)%3].toFixed(2)}, ${p.current[(i+2)%3].toFixed(2)}`),d.makeTranslation(g*r.x+f*n.x,g*r.y+f*n.y,g*r.z+f*n.z),O(d)}}),[x,O,R,p,m,i]),$=s.useCallback((e=>{x&&(z.current.style.display="none"),e.stopPropagation(),V.current=null,j(),F&&(F.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[x,F,j]),_=s.useCallback((e=>{e.stopPropagation(),T(!1)}),[]),L=s.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new c.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),A=M?1/7:f/7,B=M?.225:.225*f,H=R?C:y[i],I=s.useMemo((()=>[new c.Vector3(0,0,0),new c.Vector3(0,B,0),new c.Vector3(B,B,0),new c.Vector3(B,0,0),new c.Vector3(0,0,0)]),[B]);return s.createElement("group",{ref:E,matrix:L,matrixAutoUpdate:!1},x&&s.createElement(o.Html,{position:[0,0,0]},s.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:b,ref:z})),s.createElement("group",{position:[1.7*A,1.7*A,0]},s.createElement("mesh",{visible:!0,onPointerDown:S,onPointerMove:W,onPointerUp:$,onPointerOut:_,scale:B,userData:k,renderOrder:v},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,depthTest:g,color:H,polygonOffset:!0,polygonOffsetFactor:-10,side:c.DoubleSide,fog:!1})),s.createElement(n.Line,{position:[-B/2,-B/2,0],transparent:!0,depthTest:g,points:I,lineWidth:h,color:H,opacity:P,polygonOffset:!0,polygonOffsetFactor:-10,userData:k,fog:!1,renderOrder:v})))};

package/web/pivotControls/PlaneSlider.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as THREE from 'three';
+export declare const PlaneSlider: React.FC<{
+    dir1: THREE.Vector3;
+    dir2: THREE.Vector3;
+    axis: 0 | 1 | 2;
+}>;