@react-three/drei 9.26.2 → 9.28.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/core/Line.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import * as React from 'react';
2
- import { Vector3, Color } from 'three';
2
+ import { Vector3, Color, ColorRepresentation } from 'three';
3
3
  import { ReactThreeFiber } from '@react-three/fiber';
4
4
  import { LineMaterial, LineMaterialParameters, Line2 } from 'three-stdlib';
5
5
  export declare type LineProps = {
6
6
  points: Array<Vector3 | [number, number, number]>;
7
7
  vertexColors?: Array<Color | [number, number, number]>;
8
8
  lineWidth?: number;
9
- } & Omit<LineMaterialParameters, 'vertexColors'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'>;
9
+ } & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'> & {
10
+ color?: ColorRepresentation;
11
+ };
10
12
  export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "visible" | "attach" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "transparent" | "dashed" | "points" | "material" | "fog" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "computeLineDistances" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "opacity" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "precision" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "uniforms" | "vertexShader" | "fragmentShader" | "linewidth" | "wireframe" | "wireframeLinewidth" | "lights" | "clipping" | "derivatives" | "extensions" | "defaultAttributeValues" | "index0AttributeName" | "uniformsNeedUpdate" | "glslVersion" | "isShaderMaterial" | "dashSize" | "gapSize" | "format" | "dashScale" | "dashOffset" | "resolution" | "worldUnits" | "isLine2" | "isLineSegments2" | "isLineMaterial" | "lineWidth"> & React.RefAttributes<Line2>>;
package/core/Text.d.ts CHANGED
@@ -46,5 +46,5 @@ export declare const Text: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeF
46
46
  strokeOpacity?: number | undefined;
47
47
  fillOpacity?: number | undefined;
48
48
  debugSDF?: boolean | undefined;
49
- onSync?: ((troika: TextMeshImpl) => void) | undefined;
49
+ onSync?: ((troika: any) => void) | undefined;
50
50
  }, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "font" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "direction" | "fontSize" | "letterSpacing" | "lineHeight" | "maxWidth" | "outlineColor" | "outlineWidth" | "overflowWrap" | "textAlign" | "whiteSpace" | "fillOpacity" | "strokeOpacity" | "strokeWidth" | "anchorX" | "anchorY" | "characters" | "onSync" | "clipRect" | "depthOffset" | "outlineOffsetX" | "outlineOffsetY" | "outlineBlur" | "outlineOpacity" | "strokeColor" | "debugSDF"> & React.RefAttributes<unknown>>;
package/core/index.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),c=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=require("./OrthographicCamera.cjs.js"),M=require("./PerspectiveCamera.cjs.js"),S=require("./CubeCamera.cjs.js"),b=require("./DeviceOrientationControls.cjs.js"),P=require("./FlyControls.cjs.js"),B=require("./MapControls.cjs.js"),v=require("./OrbitControls.cjs.js"),g=require("./TrackballControls.cjs.js"),T=require("./ArcballControls.cjs.js"),f=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),L=require("./FirstPersonControls.cjs.js"),k=require("./pivotControls/index.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),w=require("./GizmoViewport.cjs.js"),F=require("./useCubeTexture.cjs.js"),G=require("./useFBX.cjs.js"),R=require("./useGLTF.cjs.js"),z=require("./useProgress.cjs.js"),O=require("./useTexture.cjs.js"),I=require("./useKTX2.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),V=require("./useAspect.cjs.js"),Q=require("./useCamera.cjs.js"),X=require("./useDetectGPU.cjs.js"),K=require("./useHelper.cjs.js"),W=require("./useBVH.cjs.js"),N=require("./useContextBridge.cjs.js"),U=require("./useAnimations.cjs.js"),_=require("./useFBO.cjs.js"),J=require("./useIntersect.cjs.js"),Y=require("./useBoxProjectedEnv.cjs.js"),Z=require("./BBAnchor.cjs.js"),$=require("./CurveModifier.cjs.js"),ee=require("./MeshDistortMaterial.cjs.js"),re=require("./MeshWobbleMaterial.cjs.js"),se=require("./MeshReflectorMaterial.cjs.js"),te=require("./PointMaterial.cjs.js"),oe=require("./shaderMaterial.cjs.js"),ie=require("./softShadows.cjs.js"),ue=require("./shapes.cjs.js"),ae=require("./RoundedBox.cjs.js"),ce=require("./ScreenQuad.cjs.js"),ne=require("./Center.cjs.js"),je=require("./Bounds.cjs.js"),pe=require("./CameraShake.cjs.js"),le=require("./Float.cjs.js"),xe=require("./Stage.cjs.js"),qe=require("./Backdrop.cjs.js"),de=require("./Shadow.cjs.js"),me=require("./ContactShadows.cjs.js"),Ce=require("./AccumulativeShadows.cjs.js"),he=require("./Reflector.cjs.js"),Me=require("./SpotLight.cjs.js"),Se=require("./Environment.cjs.js"),be=require("./Lightformer.cjs.js"),Pe=require("./Sky.cjs.js"),Be=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),Te=require("./useMatcapTexture.cjs.js"),fe=require("./useNormalTexture.cjs.js"),Ae=require("./Points.cjs.js"),Le=require("./Instances.cjs.js"),ke=require("./Segments.cjs.js"),De=require("./Detailed.cjs.js"),Ee=require("./Preload.cjs.js"),we=require("./BakeShadows.cjs.js"),Fe=require("./meshBounds.cjs.js"),Ge=require("./AdaptiveDpr.cjs.js"),Re=require("./AdaptiveEvents.cjs.js"),ze=require("./PerformanceMonitor.cjs.js"),Oe=require("./RenderTexture.cjs.js"),Ie=require("./Mask.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("./pivotControls/AxisArrow.cjs.js"),require("./pivotControls/context.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("../web/Html.cjs.js"),require("react-dom/client"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=x.Sampler,exports.useSurfaceSampler=x.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=C.Decal,exports.OrthographicCamera=h.OrthographicCamera,exports.PerspectiveCamera=M.PerspectiveCamera,exports.CubeCamera=S.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=P.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=v.OrbitControls,exports.TrackballControls=g.TrackballControls,exports.ArcballControls=T.ArcballControls,exports.TransformControls=f.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=L.FirstPersonControls,exports.PivotControls=k.PivotControls,exports.calculateScaleFactor=k.calculateScaleFactor,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=w.GizmoViewport,exports.useCubeTexture=F.useCubeTexture,exports.useFBX=G.useFBX,exports.useGLTF=R.useGLTF,exports.useProgress=z.useProgress,exports.IsObject=O.IsObject,exports.useTexture=O.useTexture,exports.useKTX2=I.useKTX2,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=V.useAspect,exports.useCamera=Q.useCamera,exports.useDetectGPU=X.useDetectGPU,exports.useHelper=K.useHelper,exports.useBVH=W.useBVH,exports.useContextBridge=N.useContextBridge,exports.useAnimations=U.useAnimations,exports.useFBO=_.useFBO,exports.useIntersect=J.useIntersect,exports.useBoxProjectedEnv=Y.useBoxProjectedEnv,exports.BBAnchor=Z.BBAnchor,exports.CurveModifier=$.CurveModifier,exports.MeshDistortMaterial=ee.MeshDistortMaterial,exports.MeshWobbleMaterial=re.MeshWobbleMaterial,exports.MeshReflectorMaterial=se.MeshReflectorMaterial,exports.PointMaterial=te.PointMaterial,exports.PointMaterialImpl=te.PointMaterialImpl,exports.shaderMaterial=oe.shaderMaterial,exports.softShadows=ie.softShadows,exports.Box=ue.Box,exports.Capsule=ue.Capsule,exports.Circle=ue.Circle,exports.Cone=ue.Cone,exports.Cylinder=ue.Cylinder,exports.Dodecahedron=ue.Dodecahedron,exports.Extrude=ue.Extrude,exports.Icosahedron=ue.Icosahedron,exports.Lathe=ue.Lathe,exports.Octahedron=ue.Octahedron,exports.Plane=ue.Plane,exports.Polyhedron=ue.Polyhedron,exports.Ring=ue.Ring,exports.Sphere=ue.Sphere,exports.Tetrahedron=ue.Tetrahedron,exports.Torus=ue.Torus,exports.TorusKnot=ue.TorusKnot,exports.Tube=ue.Tube,exports.RoundedBox=ae.RoundedBox,exports.ScreenQuad=ce.ScreenQuad,exports.Center=ne.Center,exports.Bounds=je.Bounds,exports.useBounds=je.useBounds,exports.CameraShake=pe.CameraShake,exports.Float=le.Float,exports.Stage=xe.Stage,exports.Backdrop=qe.Backdrop,exports.Shadow=de.Shadow,exports.ContactShadows=me.ContactShadows,exports.AccumulativeShadows=Ce.AccumulativeShadows,exports.RandomizedLight=Ce.RandomizedLight,exports.accumulativeContext=Ce.accumulativeContext,exports.Reflector=he.Reflector,exports.SpotLight=Me.SpotLight,exports.Environment=Se.Environment,exports.EnvironmentCube=Se.EnvironmentCube,exports.EnvironmentMap=Se.EnvironmentMap,exports.EnvironmentPortal=Se.EnvironmentPortal,exports.useEnvironment=Se.useEnvironment,exports.Lightformer=be.Lightformer,exports.Sky=Pe.Sky,exports.calcPosFromAngles=Pe.calcPosFromAngles,exports.Stars=Be.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=ge.Sparkles,exports.useMatcapTexture=Te.useMatcapTexture,exports.useNormalTexture=fe.useNormalTexture,exports.Point=Ae.Point,exports.Points=Ae.Points,exports.PointsBuffer=Ae.PointsBuffer,exports.Instance=Le.Instance,exports.Instances=Le.Instances,exports.Merged=Le.Merged,exports.Segment=ke.Segment,exports.SegmentObject=ke.SegmentObject,exports.Segments=ke.Segments,exports.Detailed=De.Detailed,exports.Preload=Ee.Preload,exports.BakeShadows=we.BakeShadows,exports.meshBounds=Fe.meshBounds,exports.AdaptiveDpr=Ge.AdaptiveDpr,exports.AdaptiveEvents=Re.AdaptiveEvents,exports.PerformanceMonitor=ze.PerformanceMonitor,exports.usePerformanceMonitor=ze.usePerformanceMonitor,exports.RenderTexture=Oe.RenderTexture,exports.Mask=Ie.Mask,exports.useMask=Ie.useMask;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./CatmullRomLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Text3D.cjs.js"),c=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),m=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),h=require("./OrthographicCamera.cjs.js"),M=require("./PerspectiveCamera.cjs.js"),S=require("./CubeCamera.cjs.js"),b=require("./DeviceOrientationControls.cjs.js"),P=require("./FlyControls.cjs.js"),B=require("./MapControls.cjs.js"),v=require("./OrbitControls.cjs.js"),g=require("./TrackballControls.cjs.js"),T=require("./ArcballControls.cjs.js"),f=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),L=require("./FirstPersonControls.cjs.js"),k=require("./pivotControls/index.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),w=require("./GizmoViewport.cjs.js"),F=require("./useCubeTexture.cjs.js"),G=require("./useFBX.cjs.js"),R=require("./useGLTF.cjs.js"),z=require("./useProgress.cjs.js"),O=require("./useTexture.cjs.js"),I=require("./useKTX2.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),V=require("./useAspect.cjs.js"),Q=require("./useCamera.cjs.js"),X=require("./useDetectGPU.cjs.js"),K=require("./useHelper.cjs.js"),W=require("./useBVH.cjs.js"),N=require("./useContextBridge.cjs.js"),U=require("./useAnimations.cjs.js"),_=require("./useFBO.cjs.js"),J=require("./useIntersect.cjs.js"),Y=require("./useBoxProjectedEnv.cjs.js"),Z=require("./BBAnchor.cjs.js"),$=require("./CurveModifier.cjs.js"),ee=require("./MeshDistortMaterial.cjs.js"),re=require("./MeshWobbleMaterial.cjs.js"),se=require("./MeshReflectorMaterial.cjs.js"),te=require("./PointMaterial.cjs.js"),oe=require("./shaderMaterial.cjs.js"),ie=require("./softShadows.cjs.js"),ue=require("./shapes.cjs.js"),ae=require("./RoundedBox.cjs.js"),ce=require("./ScreenQuad.cjs.js"),ne=require("./Center.cjs.js"),je=require("./Bounds.cjs.js"),pe=require("./CameraShake.cjs.js"),le=require("./Float.cjs.js"),xe=require("./Stage.cjs.js"),qe=require("./Backdrop.cjs.js"),de=require("./Shadow.cjs.js"),me=require("./ContactShadows.cjs.js"),Ce=require("./AccumulativeShadows.cjs.js"),he=require("./Reflector.cjs.js"),Me=require("./SpotLight.cjs.js"),Se=require("./Environment.cjs.js"),be=require("./Lightformer.cjs.js"),Pe=require("./Sky.cjs.js"),Be=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),Te=require("./useMatcapTexture.cjs.js"),fe=require("./useNormalTexture.cjs.js"),Ae=require("./Points.cjs.js"),Le=require("./Instances.cjs.js"),ke=require("./Segments.cjs.js"),De=require("./Detailed.cjs.js"),Ee=require("./Preload.cjs.js"),we=require("./BakeShadows.cjs.js"),Fe=require("./meshBounds.cjs.js"),Ge=require("./AdaptiveDpr.cjs.js"),Re=require("./AdaptiveEvents.cjs.js"),ze=require("./PerformanceMonitor.cjs.js"),Oe=require("./RenderTexture.cjs.js"),Ie=require("./Mask.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("./pivotControls/AxisArrow.cjs.js"),require("./pivotControls/context.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("../web/Html.cjs.js"),require("react-dom/client"),require("lodash.clamp"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=x.Sampler,exports.useSurfaceSampler=x.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=C.Decal,exports.OrthographicCamera=h.OrthographicCamera,exports.PerspectiveCamera=M.PerspectiveCamera,exports.CubeCamera=S.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=P.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=v.OrbitControls,exports.TrackballControls=g.TrackballControls,exports.ArcballControls=T.ArcballControls,exports.TransformControls=f.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=L.FirstPersonControls,exports.PivotControls=k.PivotControls,exports.calculateScaleFactor=k.calculateScaleFactor,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=w.GizmoViewport,exports.useCubeTexture=F.useCubeTexture,exports.useFBX=G.useFBX,exports.useGLTF=R.useGLTF,exports.useProgress=z.useProgress,exports.IsObject=O.IsObject,exports.useTexture=O.useTexture,exports.useKTX2=I.useKTX2,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=V.useAspect,exports.useCamera=Q.useCamera,exports.useDetectGPU=X.useDetectGPU,exports.useHelper=K.useHelper,exports.useBVH=W.useBVH,exports.useContextBridge=N.useContextBridge,exports.useAnimations=U.useAnimations,exports.useFBO=_.useFBO,exports.useIntersect=J.useIntersect,exports.useBoxProjectedEnv=Y.useBoxProjectedEnv,exports.BBAnchor=Z.BBAnchor,exports.CurveModifier=$.CurveModifier,exports.MeshDistortMaterial=ee.MeshDistortMaterial,exports.MeshWobbleMaterial=re.MeshWobbleMaterial,exports.MeshReflectorMaterial=se.MeshReflectorMaterial,exports.PointMaterial=te.PointMaterial,exports.PointMaterialImpl=te.PointMaterialImpl,exports.shaderMaterial=oe.shaderMaterial,exports.softShadows=ie.softShadows,exports.Box=ue.Box,exports.Capsule=ue.Capsule,exports.Circle=ue.Circle,exports.Cone=ue.Cone,exports.Cylinder=ue.Cylinder,exports.Dodecahedron=ue.Dodecahedron,exports.Extrude=ue.Extrude,exports.Icosahedron=ue.Icosahedron,exports.Lathe=ue.Lathe,exports.Octahedron=ue.Octahedron,exports.Plane=ue.Plane,exports.Polyhedron=ue.Polyhedron,exports.Ring=ue.Ring,exports.Sphere=ue.Sphere,exports.Tetrahedron=ue.Tetrahedron,exports.Torus=ue.Torus,exports.TorusKnot=ue.TorusKnot,exports.Tube=ue.Tube,exports.RoundedBox=ae.RoundedBox,exports.ScreenQuad=ce.ScreenQuad,exports.Center=ne.Center,exports.Bounds=je.Bounds,exports.useBounds=je.useBounds,exports.CameraShake=pe.CameraShake,exports.Float=le.Float,exports.Stage=xe.Stage,exports.Backdrop=qe.Backdrop,exports.Shadow=de.Shadow,exports.ContactShadows=me.ContactShadows,exports.AccumulativeShadows=Ce.AccumulativeShadows,exports.RandomizedLight=Ce.RandomizedLight,exports.accumulativeContext=Ce.accumulativeContext,exports.Reflector=he.Reflector,exports.SpotLight=Me.SpotLight,exports.Environment=Se.Environment,exports.EnvironmentCube=Se.EnvironmentCube,exports.EnvironmentMap=Se.EnvironmentMap,exports.EnvironmentPortal=Se.EnvironmentPortal,exports.useEnvironment=Se.useEnvironment,exports.Lightformer=be.Lightformer,exports.Sky=Pe.Sky,exports.calcPosFromAngles=Pe.calcPosFromAngles,exports.Stars=Be.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=ge.Sparkles,exports.useMatcapTexture=Te.useMatcapTexture,exports.useNormalTexture=fe.useNormalTexture,exports.Point=Ae.Point,exports.Points=Ae.Points,exports.PointsBuffer=Ae.PointsBuffer,exports.Instance=Le.Instance,exports.Instances=Le.Instances,exports.Merged=Le.Merged,exports.Segment=ke.Segment,exports.SegmentObject=ke.SegmentObject,exports.Segments=ke.Segments,exports.Detailed=De.Detailed,exports.Preload=Ee.Preload,exports.BakeShadows=we.BakeShadows,exports.meshBounds=Fe.meshBounds,exports.AdaptiveDpr=Ge.AdaptiveDpr,exports.AdaptiveEvents=Re.AdaptiveEvents,exports.PerformanceMonitor=ze.PerformanceMonitor,exports.usePerformanceMonitor=ze.usePerformanceMonitor,exports.RenderTexture=Oe.RenderTexture,exports.Mask=Ie.Mask,exports.useMask=Ie.useMask;
package/core/index.js CHANGED
@@ -109,6 +109,7 @@ import './pivotControls/PlaneSlider.js';
109
109
  import './pivotControls/AxisRotator.js';
110
110
  import '../web/Html.js';
111
111
  import 'react-dom/client';
112
+ import 'lodash.clamp';
112
113
  import 'zustand';
113
114
  import 'stats.js';
114
115
  import '../helpers/useEffectfulState.js';
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),o=require("../Line.cjs.js"),n=require("./context.cjs.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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("@babel/runtime/helpers/extends"),require("three-stdlib");var i=a(e),c=a(t);const s=new c.Vector3,l=new c.Vector3,u=(e,t,r,o)=>{const n=t.dot(t),a=t.dot(e)-t.dot(r),i=t.dot(o);s.copy(o).multiplyScalar(n/i).sub(t),l.copy(o).multiplyScalar(a/i).add(r).sub(e);return-s.dot(l)/s.dot(s)},p=new c.Vector3(0,1,0),d=new c.Matrix4;exports.AxisArrow=({direction:e,axis:t})=>{const{depthTest:a,scale:s,lineWidth:l,fixed:f,axisColors:m,hoveredColor:g,opacity:x,onDragStart:y,onDrag:h,onDragEnd:b,userData:O}=i.useContext(n.context),P=r.useThree((e=>e.controls)),j=i.useRef(null),w=i.useRef(null),[k,C]=i.useState(!1),M=i.useCallback((t=>{t.stopPropagation();const r=(new c.Matrix4).extractRotation(j.current.matrixWorld),o=t.point.clone(),n=e.clone().applyMatrix4(r).normalize();w.current={clickPoint:o,dir:n},y(),P&&(P.enabled=!1),t.target.setPointerCapture(t.pointerId)}),[e,P,y]),D=i.useCallback((e=>{if(e.stopPropagation(),k||C(!0),w.current){const{clickPoint:t,dir:r}=w.current,o=u(t,r,e.ray.origin,e.ray.direction);d.makeTranslation(r.x*o,r.y*o,r.z*o),h(d)}}),[h,k]),E=i.useCallback((e=>{e.stopPropagation(),w.current=null,b(),P&&(P.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[P,b]),L=i.useCallback((e=>{e.stopPropagation(),C(!1)}),[]),{cylinderLength:q,coneWidth:v,coneLength:T,matrixL:W}=i.useMemo((()=>{const t=f?l/s*1.6:s/20,r=f?.2:s/5,o=f?1-r:s-r,n=(new c.Quaternion).setFromUnitVectors(p,e.clone().normalize());return{cylinderLength:o,coneWidth:t,coneLength:r,matrixL:(new c.Matrix4).makeRotationFromQuaternion(n)}}),[e,s,l,f]),z=k?g:m[t];return i.createElement("group",{ref:j},i.createElement("group",{matrix:W,matrixAutoUpdate:!1,onPointerDown:M,onPointerMove:D,onPointerUp:E,onPointerOut:L},i.createElement(o.Line,{transparent:!0,depthTest:a,points:[0,0,0,0,q,0],lineWidth:l,color:z,opacity:x,polygonOffset:!0,renderOrder:1,polygonOffsetFactor:-10,userData:O}),i.createElement("mesh",{position:[0,q+T/2,0],renderOrder:500,userData:O},i.createElement("coneGeometry",{args:[v,T,24,1]}),i.createElement("meshBasicMaterial",{transparent:!0,depthTest:a,color:z,opacity:x,polygonOffset:!0,polygonOffsetFactor:-10}))))},exports.calculateOffset=u;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("./context.cjs.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@babel/runtime/helpers/extends"),require("three-stdlib");var i=a(e),c=a(t);const l=new c.Vector3,s=new c.Vector3,u=(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;l.copy(n).multiplyScalar(o/i).sub(t),s.copy(n).multiplyScalar(a/i).add(r).sub(e);return-l.dot(s)/l.dot(l)},p=new c.Vector3(0,1,0),d=new c.Matrix4;exports.AxisArrow=({direction:e,axis:t})=>{const{depthTest:a,scale:l,lineWidth:s,fixed:m,axisColors:f,hoveredColor:y,opacity:g,onDragStart:x,onDrag:h,onDragEnd:b,userData:O}=i.useContext(o.context),P=r.useThree((e=>e.controls)),j=i.useRef(null),w=i.useRef(null),[E,k]=i.useState(!1),C=i.useCallback((t=>{t.stopPropagation();const r=(new c.Matrix4).extractRotation(j.current.matrixWorld),n=t.point.clone(),o=e.clone().applyMatrix4(r).normalize();w.current={clickPoint:n,dir:o},x(),P&&(P.enabled=!1),t.target.setPointerCapture(t.pointerId)}),[e,P,x]),M=i.useCallback((e=>{if(e.stopPropagation(),E||k(!0),w.current){const{clickPoint:t,dir:r}=w.current,n=u(t,r,e.ray.origin,e.ray.direction);d.makeTranslation(r.x*n,r.y*n,r.z*n),h(d)}}),[h,E]),v=i.useCallback((e=>{e.stopPropagation(),w.current=null,b(),P&&(P.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[P,b]),L=i.useCallback((e=>{e.stopPropagation(),k(!1)}),[]),{cylinderLength:q,coneWidth:D,coneLength:T,matrixL:W}=i.useMemo((()=>{const t=m?s/l*1.6:l/20,r=m?.2:l/5,n=m?1-r:l-r,o=(new c.Quaternion).setFromUnitVectors(p,e.clone().normalize());return{cylinderLength:n,coneWidth:t,coneLength:r,matrixL:(new c.Matrix4).makeRotationFromQuaternion(o)}}),[e,l,s,m]),z=E?y:f[t];return i.createElement("group",{ref:j},i.createElement("group",{matrix:W,matrixAutoUpdate:!1,onPointerDown:C,onPointerMove:M,onPointerUp:v,onPointerOut:L},i.createElement("mesh",{visible:!1,position:[0,(q+T)/2,0],userData:O},i.createElement("cylinderGeometry",{args:[4*D,4*D,q+T,8,1]})),i.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:a,points:[0,0,0,0,q,0],lineWidth:s,color:z,opacity:g,polygonOffset:!0,renderOrder:1,polygonOffsetFactor:-10}),i.createElement("mesh",{raycast:()=>null,position:[0,q+T/2,0],renderOrder:500},i.createElement("coneGeometry",{args:[D,T,24,1]}),i.createElement("meshBasicMaterial",{transparent:!0,depthTest:a,color:z,opacity:g,polygonOffset:!0,polygonOffsetFactor:-10}))))},exports.calculateOffset=u;
@@ -10,6 +10,11 @@ const calculateOffset = (clickPoint, normal, rayStart, rayDir) => {
10
10
  const e1 = normal.dot(normal);
11
11
  const e2 = normal.dot(clickPoint) - normal.dot(rayStart);
12
12
  const e3 = normal.dot(rayDir);
13
+
14
+ if (e3 === 0) {
15
+ return -e2 / e1;
16
+ }
17
+
13
18
  vec1.copy(rayDir).multiplyScalar(e1 / e3).sub(normal);
14
19
  vec2.copy(rayDir).multiplyScalar(e2 / e3).add(rayStart).sub(clickPoint);
15
20
  const offset = -vec1.dot(vec2) / vec1.dot(vec1);
@@ -107,8 +112,15 @@ const AxisArrow = ({
107
112
  onPointerMove: onPointerMove,
108
113
  onPointerUp: onPointerUp,
109
114
  onPointerOut: onPointerOut
110
- }, /*#__PURE__*/React.createElement(Line, {
115
+ }, /*#__PURE__*/React.createElement("mesh", {
116
+ visible: false,
117
+ position: [0, (cylinderLength + coneLength) / 2.0, 0],
118
+ userData: userData
119
+ }, /*#__PURE__*/React.createElement("cylinderGeometry", {
120
+ args: [coneWidth * 4, coneWidth * 4, cylinderLength + coneLength, 8, 1]
121
+ })), /*#__PURE__*/React.createElement(Line, {
111
122
  transparent: true,
123
+ raycast: () => null,
112
124
  depthTest: depthTest,
113
125
  points: [0, 0, 0, 0, cylinderLength, 0],
114
126
  lineWidth: lineWidth,
@@ -116,12 +128,11 @@ const AxisArrow = ({
116
128
  opacity: opacity,
117
129
  polygonOffset: true,
118
130
  renderOrder: 1,
119
- polygonOffsetFactor: -10,
120
- userData: userData
131
+ polygonOffsetFactor: -10
121
132
  }), /*#__PURE__*/React.createElement("mesh", {
133
+ raycast: () => null,
122
134
  position: [0, cylinderLength + coneLength / 2.0, 0],
123
- renderOrder: 500,
124
- userData: userData
135
+ renderOrder: 500
125
136
  }, /*#__PURE__*/React.createElement("coneGeometry", {
126
137
  args: [coneWidth, coneLength, 24, 1]
127
138
  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("../../web/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.Vector3,u=new c.Vector3,p=new c.Matrix4,d=new c.Vector3,m=new c.Ray,x=new c.Vector3;exports.AxisRotator=({dir1:e,dir2:t,axis:i})=>{const{annotationsClass:f,depthTest:b,scale:P,lineWidth:h,fixed:y,axisColors:g,hoveredColor:M,opacity:w,onDragStart:C,onDrag:j,onDragEnd:k,userData:O}=s.useContext(a.context),q=r.useThree((e=>e.controls)),V=s.useRef(null),v=s.useRef(null),D=s.useRef(null),[F,R]=s.useState(!1),z=s.useCallback((e=>{V.current.innerText="0º",V.current.style.display="block",e.stopPropagation();const t=e.point.clone(),r=(new c.Vector3).setFromMatrixPosition(v.current.matrixWorld),n=(new c.Vector3).setFromMatrixColumn(v.current.matrixWorld,0).normalize(),o=(new c.Vector3).setFromMatrixColumn(v.current.matrixWorld,1).normalize(),a=(new c.Vector3).setFromMatrixColumn(v.current.matrixWorld,2).normalize(),i=(new c.Plane).setFromNormalAndCoplanarPoint(a,r);D.current={clickPoint:t,origin:r,e1:n,e2:o,normal:a,plane:i},C(),q&&(q.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[q,C]),E=s.useCallback((e=>{if(e.stopPropagation(),F||R(!0),D.current){const{clickPoint:t,origin:r,e1:n,e2:o,normal:a,plane:i}=D.current;m.copy(e.ray),m.intersectPlane(i,x),m.direction.negate(),m.intersectPlane(i,x);let s=((e,t,r,n,o)=>{l.copy(e).sub(r),u.copy(t).sub(r);const a=n.dot(n),i=o.dot(o),s=l.dot(n)/a,c=l.dot(o)/i,p=u.dot(n)/a,d=u.dot(o)/i,m=Math.atan2(c,s);return Math.atan2(d,p)-m})(t,x,r,n,o),c=180*s/Math.PI;e.shiftKey&&(c=10*Math.round(c/10),s=(e=>e*Math.PI/180)(c)),V.current.innerText=`${c.toFixed(0)} º`,p.makeRotationAxis(a,s),d.copy(r).applyMatrix4(p).sub(r).negate(),p.setPosition(d),j(p)}}),[j,F]),W=s.useCallback((e=>{V.current.style.display="none",e.stopPropagation(),D.current=null,k(),q&&(q.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[q,k]),I=s.useCallback((e=>{e.stopPropagation(),R(!1)}),[]),T=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=y?.65:.65*P,_=s.useMemo((()=>{const e=[];for(let t=0;t<=32;t++){const r=t*Math.PI/64;e.push(new c.Vector3(Math.cos(r)*A,Math.sin(r)*A,0))}return e}),[A]);return s.createElement("group",{ref:v,onPointerDown:z,onPointerMove:E,onPointerUp:W,onPointerOut:I,matrix:T,matrixAutoUpdate:!1},s.createElement(o.Html,{position:[A,A,0]},s.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:f,ref:V})),s.createElement(n.Line,{transparent:!0,depthTest:b,points:_,lineWidth:h,color:F?M:g[i],opacity:w,polygonOffset:!0,polygonOffsetFactor:-10,userData:O}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("../../web/Html.cjs.js"),a=require("lodash.clamp"),i=require("./context.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var s=c(e),u=c(t),d=l(a);const p=new u.Vector3,m=new u.Vector3,f=e=>180*e/Math.PI,h=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)},x=new u.Matrix4,P=new u.Vector3,b=new u.Ray,M=new u.Vector3;exports.AxisRotator=({dir1:e,dir2:t,axis:a})=>{const{rotationLimits:l,annotationsClass:c,depthTest:y,scale:g,lineWidth:w,fixed:v,axisColors:C,hoveredColor:j,opacity:k,onDragStart:q,onDrag:O,onDragEnd:I,userData:R}=s.useContext(i.context),V=r.useThree((e=>e.controls)),F=s.useRef(null),D=s.useRef(null),E=s.useRef(0),W=s.useRef(0),z=s.useRef(null),[T,A]=s.useState(!1),L=s.useCallback((e=>{F.current.innerText=`${f(W.current).toFixed(0)}º`,F.current.style.display="block",e.stopPropagation();const t=e.point.clone(),r=(new u.Vector3).setFromMatrixPosition(D.current.matrixWorld),n=(new u.Vector3).setFromMatrixColumn(D.current.matrixWorld,0).normalize(),o=(new u.Vector3).setFromMatrixColumn(D.current.matrixWorld,1).normalize(),a=(new u.Vector3).setFromMatrixColumn(D.current.matrixWorld,2).normalize(),i=(new u.Plane).setFromNormalAndCoplanarPoint(a,r);z.current={clickPoint:t,origin:r,e1:n,e2:o,normal:a,plane:i},q(),V&&(V.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[V,q]),_=s.useCallback((e=>{if(e.stopPropagation(),T||A(!0),z.current){const{clickPoint:t,origin:r,e1:n,e2:o,normal:i,plane:c}=z.current,[s,u]=(null==l?void 0:l[a])||[void 0,void 0];b.copy(e.ray),b.intersectPlane(c,M),b.direction.negate(),b.intersectPlane(c,M);let y=((e,t,r,n,o)=>{p.copy(e).sub(r),m.copy(t).sub(r);const a=n.dot(n),i=o.dot(o),l=p.dot(n)/a,c=p.dot(o)/i,s=m.dot(n)/a,u=m.dot(o)/i,d=Math.atan2(c,l);return Math.atan2(u,s)-d})(t,M,r,n,o),g=f(y);e.shiftKey&&(g=10*Math.round(g/10),y=(e=>e*Math.PI/180)(g)),void 0!==s&&void 0!==u&&(y=h(y),y=y>Math.PI?y-2*Math.PI:y,y=d.default(y,s-E.current,u-E.current),W.current=E.current+y,g=f(W.current)),F.current.innerText=`${g.toFixed(0)} º`,x.makeRotationAxis(i,y),P.copy(r).applyMatrix4(x).sub(r).negate(),x.setPosition(P),O(x)}}),[O,T,l,a]),S=s.useCallback((e=>{F.current.style.display="none",e.stopPropagation(),E.current=W.current,z.current=null,I(),V&&(V.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[V,I]),H=s.useCallback((e=>{e.stopPropagation(),A(!1)}),[]),N=s.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new u.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),U=v?.65:.65*g,$=s.useMemo((()=>{const e=[];for(let t=0;t<=32;t++){const r=t*(Math.PI/2)/32;e.push(new u.Vector3(Math.cos(r)*U,Math.sin(r)*U,0))}return e}),[U]);return s.createElement("group",{ref:D,onPointerDown:L,onPointerMove:_,onPointerUp:S,onPointerOut:H,matrix:N,matrixAutoUpdate:!1},s.createElement(o.Html,{position:[U,U,0]},s.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:c,ref:F})),s.createElement(n.Line,{points:$,lineWidth:4*w,visible:!1,userData:R}),s.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:y,points:$,lineWidth:w,color:T?j:C[a],opacity:k,polygonOffset:!0,polygonOffsetFactor:-10}))};
@@ -3,6 +3,7 @@ import * as THREE from 'three';
3
3
  import { useThree } from '@react-three/fiber';
4
4
  import { Line } from '../Line.js';
5
5
  import { Html } from '../../web/Html.js';
6
+ import clamp from 'lodash.clamp';
6
7
  import { context } from './context.js';
7
8
 
8
9
  const clickDir = new THREE.Vector3();
@@ -26,6 +27,26 @@ const calculateAngle = (clickPoint, intersectionPoint, origin, e1, e2) => {
26
27
  return angleIntersection - angleClick;
27
28
  };
28
29
 
30
+ const fmod = (num, denom) => {
31
+ let k = Math.floor(num / denom);
32
+ k = k < 0 ? k + 1 : k;
33
+ return num - k * denom;
34
+ };
35
+
36
+ const minimizeAngle = angle => {
37
+ let result = fmod(angle, 2 * Math.PI);
38
+
39
+ if (Math.abs(result) < 1e-6) {
40
+ return 0.0;
41
+ }
42
+
43
+ if (result < 0.0) {
44
+ result += 2 * Math.PI;
45
+ }
46
+
47
+ return result;
48
+ };
49
+
29
50
  const rotMatrix = new THREE.Matrix4();
30
51
  const posNew = new THREE.Vector3();
31
52
  const ray = new THREE.Ray();
@@ -36,6 +57,7 @@ const AxisRotator = ({
36
57
  axis
37
58
  }) => {
38
59
  const {
60
+ rotationLimits,
39
61
  annotationsClass,
40
62
  depthTest,
41
63
  scale,
@@ -53,10 +75,12 @@ const AxisRotator = ({
53
75
  const camControls = useThree(state => state.controls);
54
76
  const divRef = React.useRef(null);
55
77
  const objRef = React.useRef(null);
78
+ const angle0 = React.useRef(0);
79
+ const angle = React.useRef(0);
56
80
  const clickInfo = React.useRef(null);
57
81
  const [isHovered, setIsHovered] = React.useState(false);
58
82
  const onPointerDown = React.useCallback(e => {
59
- divRef.current.innerText = '0º';
83
+ divRef.current.innerText = `${toDegrees(angle.current).toFixed(0)}º`;
60
84
  divRef.current.style.display = 'block';
61
85
  e.stopPropagation();
62
86
  const clickPoint = e.point.clone();
@@ -91,28 +115,38 @@ const AxisRotator = ({
91
115
  normal,
92
116
  plane
93
117
  } = clickInfo.current;
118
+ const [min, max] = (rotationLimits == null ? void 0 : rotationLimits[axis]) || [undefined, undefined];
94
119
  ray.copy(e.ray);
95
120
  ray.intersectPlane(plane, intersection);
96
121
  ray.direction.negate();
97
122
  ray.intersectPlane(plane, intersection);
98
- let angle = calculateAngle(clickPoint, intersection, origin, e1, e2);
99
- let degrees = toDegrees(angle); // @ts-ignore
123
+ let deltaAngle = calculateAngle(clickPoint, intersection, origin, e1, e2);
124
+ let degrees = toDegrees(deltaAngle); // @ts-ignore
100
125
 
101
126
  if (e.shiftKey) {
102
127
  degrees = Math.round(degrees / 10) * 10;
103
- angle = toRadians(degrees);
128
+ deltaAngle = toRadians(degrees);
129
+ }
130
+
131
+ if (min !== undefined && max !== undefined) {
132
+ deltaAngle = minimizeAngle(deltaAngle);
133
+ deltaAngle = deltaAngle > Math.PI ? deltaAngle - 2 * Math.PI : deltaAngle;
134
+ deltaAngle = clamp(deltaAngle, min - angle0.current, max - angle0.current);
135
+ angle.current = angle0.current + deltaAngle;
136
+ degrees = toDegrees(angle.current);
104
137
  }
105
138
 
106
139
  divRef.current.innerText = `${degrees.toFixed(0)} º`;
107
- rotMatrix.makeRotationAxis(normal, angle);
140
+ rotMatrix.makeRotationAxis(normal, deltaAngle);
108
141
  posNew.copy(origin).applyMatrix4(rotMatrix).sub(origin).negate();
109
142
  rotMatrix.setPosition(posNew);
110
143
  onDrag(rotMatrix);
111
144
  }
112
- }, [onDrag, isHovered]);
145
+ }, [onDrag, isHovered, rotationLimits, axis]);
113
146
  const onPointerUp = React.useCallback(e => {
114
147
  divRef.current.style.display = 'none';
115
148
  e.stopPropagation();
149
+ angle0.current = angle.current;
116
150
  clickInfo.current = null;
117
151
  onDragEnd();
118
152
  camControls && (camControls.enabled = true); // @ts-ignore
@@ -134,7 +168,7 @@ const AxisRotator = ({
134
168
  const points = [];
135
169
 
136
170
  for (let j = 0; j <= segments; j++) {
137
- const angle = j * Math.PI / (2 * segments);
171
+ const angle = j * (Math.PI / 2) / segments;
138
172
  points.push(new THREE.Vector3(Math.cos(angle) * r, Math.sin(angle) * r, 0));
139
173
  }
140
174
 
@@ -162,15 +196,20 @@ const AxisRotator = ({
162
196
  className: annotationsClass,
163
197
  ref: divRef
164
198
  })), /*#__PURE__*/React.createElement(Line, {
199
+ points: arc,
200
+ lineWidth: lineWidth * 4,
201
+ visible: false,
202
+ userData: userData
203
+ }), /*#__PURE__*/React.createElement(Line, {
165
204
  transparent: true,
205
+ raycast: () => null,
166
206
  depthTest: depthTest,
167
207
  points: arc,
168
208
  lineWidth: lineWidth,
169
209
  color: isHovered ? hoveredColor : axisColors[axis],
170
210
  opacity: opacity,
171
211
  polygonOffset: true,
172
- polygonOffsetFactor: -10,
173
- userData: userData
212
+ polygonOffsetFactor: -10
174
213
  }));
175
214
  };
176
215
 
@@ -4,6 +4,7 @@ export declare type PivotContext = {
4
4
  onDragStart: () => void;
5
5
  onDrag: (mdW: THREE.Matrix4) => void;
6
6
  onDragEnd: () => void;
7
+ rotationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
7
8
  axisColors: [string | number, string | number, string | number];
8
9
  hoveredColor: string | number;
9
10
  opacity: number;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber"),i=require("meshline"),o=require("./AxisArrow.cjs.js"),n=require("./PlaneSlider.cjs.js"),a=require("./AxisRotator.cjs.js"),c=require("./context.cjs.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("../Line.cjs.js"),require("@babel/runtime/helpers/extends"),require("three-stdlib"),require("../../web/Html.cjs.js"),require("react-dom/client");var s=l(e),u=l(r);const d=new s.Vector3,x=new s.Vector3,p=new s.Vector3,m=(e,r,t,i=1)=>{const o=d.set(e.x/t.width*2-1,-e.y/t.height*2+1,i);return o.unproject(r),o},y=(e,r,t,i)=>{const o=((e,r,t)=>{const i=t.width/2,o=t.height/2;r.updateMatrixWorld(!1);const n=e.project(r);return n.x=n.x*i+i,n.y=-n.y*o+o,n})(p.copy(e),t,i);let n=0;for(let a=0;a<2;++a){const c=x.copy(o).setComponent(a,o.getComponent(a)+r),l=m(c,t,i,c.z);n=Math.max(n,e.distanceTo(l))}return n},f=new s.Matrix4,w=new s.Matrix4,h=new s.Matrix4,g=new s.Matrix4,v=new s.Matrix4,M=new s.Matrix4,j=new s.Matrix4,E=new s.Matrix4,b=new s.Box3,A=new s.Box3,q=new s.Vector3,V=new s.Vector3,P=new s.Vector3,S=new s.Vector3,D=new s.Vector3(1,0,0),R=new s.Vector3(0,1,0),W=new s.Vector3(0,0,1),C=u.forwardRef((({matrix:e,onDragStart:r,onDrag:l,onDragEnd:d,autoTransform:x=!0,anchor:p,activeAxes:m=[!0,!0,!0],offset:C=[0,0,0],rotation:O=[0,0,0],scale:B=1,lineWidth:L=4,fixed:z=!1,depthTest:T=!0,axisColors:_=["#ff2060","#20df80","#2080ff"],hoveredColor:k="#ffff40",opacity:F=1,visible:H=!0,userData:I,children:U},G)=>{t.extend({MeshLine:i.MeshLine,MeshLineMaterial:i.MeshLineMaterial});const J=u.useRef(null),K=u.useRef(null),N=u.useRef(null),Q=u.useRef(null);u.useLayoutEffect((()=>{p&&(Q.current.updateWorldMatrix(!0,!0),g.copy(Q.current.matrixWorld).invert(),b.makeEmpty(),Q.current.traverse((e=>{e.geometry&&(e.geometry.boundingBox||e.geometry.computeBoundingBox(),M.copy(e.matrixWorld).premultiply(g),A.copy(e.geometry.boundingBox),A.applyMatrix4(M),b.union(A))})),q.copy(b.max).add(b.min).multiplyScalar(.5),V.copy(b.max).sub(b.min).multiplyScalar(.5),P.copy(V).multiply(new s.Vector3(...p)).add(q),S.set(...C).add(P),N.current.position.copy(S))}));const X=u.useMemo((()=>({onDragStart:()=>{f.copy(K.current.matrix),w.copy(K.current.matrixWorld),r&&r()},onDrag:e=>{h.copy(J.current.matrixWorld),g.copy(h).invert(),v.copy(w).premultiply(e),M.copy(v).premultiply(g),j.copy(f).invert(),E.copy(M).multiply(j),x&&K.current.matrix.copy(M),l&&l(M,E,v,e)},onDragEnd:()=>d&&d(),axisColors:_,hoveredColor:k,opacity:F,scale:B,lineWidth:L,fixed:z,depthTest:T,userData:I})),[r,l,d,T,B,L,z,..._,k,F,I]),Y=new s.Vector3;return t.useFrame((e=>{if(z){const o=y(N.current.getWorldPosition(Y),B,e.camera,e.size);var r,t,i;if(N.current)(null==(r=N.current)?void 0:r.scale.x)===o&&(null==(t=N.current)?void 0:t.scale.y)===o&&(null==(i=N.current)?void 0:i.scale.z)===o||(N.current.scale.setScalar(o),e.invalidate())}})),u.useImperativeHandle(G,(()=>K.current),[]),u.createElement(c.context.Provider,{value:X},u.createElement("group",{ref:J},u.createElement("group",{ref:K,matrix:e,matrixAutoUpdate:!1},u.createElement("group",{visible:H,ref:N,position:C,rotation:O},m[0]&&u.createElement(o.AxisArrow,{axis:0,direction:D}),m[1]&&u.createElement(o.AxisArrow,{axis:1,direction:R}),m[2]&&u.createElement(o.AxisArrow,{axis:2,direction:W}),m[0]&&m[1]&&u.createElement(n.PlaneSlider,{axis:2,dir1:D,dir2:R}),m[0]&&m[2]&&u.createElement(n.PlaneSlider,{axis:1,dir1:W,dir2:D}),m[2]&&m[1]&&u.createElement(n.PlaneSlider,{axis:0,dir1:R,dir2:W}),m[0]&&m[1]&&u.createElement(a.AxisRotator,{axis:2,dir1:D,dir2:R}),m[0]&&m[2]&&u.createElement(a.AxisRotator,{axis:1,dir1:W,dir2:D}),m[2]&&m[1]&&u.createElement(a.AxisRotator,{axis:0,dir1:R,dir2:W})),u.createElement("group",{ref:Q},U))))}));exports.PivotControls=C,exports.calculateScaleFactor=y;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber"),i=require("meshline"),o=require("./AxisArrow.cjs.js"),n=require("./PlaneSlider.cjs.js"),a=require("./AxisRotator.cjs.js"),c=require("./context.cjs.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("../Line.cjs.js"),require("@babel/runtime/helpers/extends"),require("three-stdlib"),require("../../web/Html.cjs.js"),require("react-dom/client"),require("lodash.clamp");var s=l(e),u=l(r);const d=new s.Vector3,x=new s.Vector3,p=new s.Vector3,m=(e,r,t,i=1)=>{const o=d.set(e.x/t.width*2-1,-e.y/t.height*2+1,i);return o.unproject(r),o},y=(e,r,t,i)=>{const o=((e,r,t)=>{const i=t.width/2,o=t.height/2;r.updateMatrixWorld(!1);const n=e.project(r);return n.x=n.x*i+i,n.y=-n.y*o+o,n})(p.copy(e),t,i);let n=0;for(let a=0;a<2;++a){const c=x.copy(o).setComponent(a,o.getComponent(a)+r),l=m(c,t,i,c.z);n=Math.max(n,e.distanceTo(l))}return n},f=new s.Matrix4,w=new s.Matrix4,h=new s.Matrix4,g=new s.Matrix4,v=new s.Matrix4,M=new s.Matrix4,b=new s.Matrix4,j=new s.Matrix4,E=new s.Box3,A=new s.Box3,q=new s.Vector3,V=new s.Vector3,S=new s.Vector3,P=new s.Vector3,R=new s.Vector3(1,0,0),D=new s.Vector3(0,1,0),W=new s.Vector3(0,0,1),L=u.forwardRef((({matrix:e,onDragStart:r,onDrag:l,onDragEnd:d,autoTransform:x=!0,anchor:p,disableAxes:m=!1,disableSliders:L=!1,disableRotations:C=!1,activeAxes:O=[!0,!0,!0],offset:B=[0,0,0],rotation:z=[0,0,0],scale:T=1,lineWidth:_=4,fixed:k=!1,rotationLimits:F,depthTest:H=!0,axisColors:I=["#ff2060","#20df80","#2080ff"],hoveredColor:U="#ffff40",opacity:G=1,visible:J=!0,userData:K,children:N},Q)=>{t.extend({MeshLine:i.MeshLine,MeshLineMaterial:i.MeshLineMaterial});const X=u.useRef(null),Y=u.useRef(null),Z=u.useRef(null),$=u.useRef(null);u.useLayoutEffect((()=>{p&&($.current.updateWorldMatrix(!0,!0),g.copy($.current.matrixWorld).invert(),E.makeEmpty(),$.current.traverse((e=>{e.geometry&&(e.geometry.boundingBox||e.geometry.computeBoundingBox(),M.copy(e.matrixWorld).premultiply(g),A.copy(e.geometry.boundingBox),A.applyMatrix4(M),E.union(A))})),q.copy(E.max).add(E.min).multiplyScalar(.5),V.copy(E.max).sub(E.min).multiplyScalar(.5),S.copy(V).multiply(new s.Vector3(...p)).add(q),P.set(...B).add(S),Z.current.position.copy(P))}));const ee=u.useMemo((()=>({onDragStart:()=>{f.copy(Y.current.matrix),w.copy(Y.current.matrixWorld),r&&r()},onDrag:e=>{h.copy(X.current.matrixWorld),g.copy(h).invert(),v.copy(w).premultiply(e),M.copy(v).premultiply(g),b.copy(f).invert(),j.copy(M).multiply(b),x&&Y.current.matrix.copy(M),l&&l(M,j,v,e)},onDragEnd:()=>d&&d(),rotationLimits:F,axisColors:I,hoveredColor:U,opacity:G,scale:T,lineWidth:_,fixed:k,depthTest:H,userData:K})),[r,l,d,F,H,T,_,k,...I,U,G,K,x]),re=new s.Vector3;return t.useFrame((e=>{if(k){const o=y(Z.current.getWorldPosition(re),T,e.camera,e.size);var r,t,i;if(Z.current)(null==(r=Z.current)?void 0:r.scale.x)===o&&(null==(t=Z.current)?void 0:t.scale.y)===o&&(null==(i=Z.current)?void 0:i.scale.z)===o||(Z.current.scale.setScalar(o),e.invalidate())}})),u.useImperativeHandle(Q,(()=>Y.current),[]),u.createElement(c.context.Provider,{value:ee},u.createElement("group",{ref:X},u.createElement("group",{ref:Y,matrix:e,matrixAutoUpdate:!1},u.createElement("group",{visible:J,ref:Z,position:B,rotation:z},!m&&O[0]&&u.createElement(o.AxisArrow,{axis:0,direction:R}),!m&&O[1]&&u.createElement(o.AxisArrow,{axis:1,direction:D}),!m&&O[2]&&u.createElement(o.AxisArrow,{axis:2,direction:W}),!L&&O[0]&&O[1]&&u.createElement(n.PlaneSlider,{axis:2,dir1:R,dir2:D}),!L&&O[0]&&O[2]&&u.createElement(n.PlaneSlider,{axis:1,dir1:W,dir2:R}),!L&&O[2]&&O[1]&&u.createElement(n.PlaneSlider,{axis:0,dir1:D,dir2:W}),!C&&O[0]&&O[1]&&u.createElement(a.AxisRotator,{axis:2,dir1:R,dir2:D}),!C&&O[0]&&O[2]&&u.createElement(a.AxisRotator,{axis:1,dir1:W,dir2:R}),!C&&O[2]&&O[1]&&u.createElement(a.AxisRotator,{axis:0,dir1:D,dir2:W})),u.createElement("group",{ref:$},N))))}));exports.PivotControls=L,exports.calculateScaleFactor=y;
@@ -12,6 +12,10 @@ declare type PivotControlsProps = {
12
12
  anchor?: [number, number, number];
13
13
  autoTransform?: boolean;
14
14
  activeAxes?: [boolean, boolean, boolean];
15
+ disableAxes?: boolean;
16
+ disableSliders?: boolean;
17
+ disableRotations?: boolean;
18
+ rotationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
15
19
  axisColors?: [string | number, string | number, string | number];
16
20
  hoveredColor?: string | number;
17
21
  annotationsClass?: string;
@@ -63,12 +63,16 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
63
63
  onDragEnd,
64
64
  autoTransform = true,
65
65
  anchor,
66
+ disableAxes = false,
67
+ disableSliders = false,
68
+ disableRotations = false,
66
69
  activeAxes = [true, true, true],
67
70
  offset = [0, 0, 0],
68
71
  rotation = [0, 0, 0],
69
72
  scale = 1,
70
73
  lineWidth = 4,
71
74
  fixed = false,
75
+ rotationLimits,
72
76
  depthTest = true,
73
77
  axisColors = ['#ff2060', '#20df80', '#2080ff'],
74
78
  hoveredColor = '#ffff40',
@@ -122,6 +126,7 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
122
126
  onDrag && onDrag(mL, mdL, mW, mdW);
123
127
  },
124
128
  onDragEnd: () => onDragEnd && onDragEnd(),
129
+ rotationLimits,
125
130
  axisColors,
126
131
  hoveredColor,
127
132
  opacity,
@@ -130,7 +135,7 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
130
135
  fixed,
131
136
  depthTest,
132
137
  userData
133
- }), [onDragStart, onDrag, onDragEnd, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, userData]);
138
+ }), [onDragStart, onDrag, onDragEnd, rotationLimits, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, userData, autoTransform]);
134
139
  const vec = new THREE.Vector3();
135
140
  useFrame(state => {
136
141
  if (fixed) {
@@ -160,36 +165,36 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
160
165
  ref: gizmoRef,
161
166
  position: offset,
162
167
  rotation: rotation
163
- }, activeAxes[0] && /*#__PURE__*/React.createElement(AxisArrow, {
168
+ }, !disableAxes && activeAxes[0] && /*#__PURE__*/React.createElement(AxisArrow, {
164
169
  axis: 0,
165
170
  direction: xDir
166
- }), activeAxes[1] && /*#__PURE__*/React.createElement(AxisArrow, {
171
+ }), !disableAxes && activeAxes[1] && /*#__PURE__*/React.createElement(AxisArrow, {
167
172
  axis: 1,
168
173
  direction: yDir
169
- }), activeAxes[2] && /*#__PURE__*/React.createElement(AxisArrow, {
174
+ }), !disableAxes && activeAxes[2] && /*#__PURE__*/React.createElement(AxisArrow, {
170
175
  axis: 2,
171
176
  direction: zDir
172
- }), activeAxes[0] && activeAxes[1] && /*#__PURE__*/React.createElement(PlaneSlider, {
177
+ }), !disableSliders && activeAxes[0] && activeAxes[1] && /*#__PURE__*/React.createElement(PlaneSlider, {
173
178
  axis: 2,
174
179
  dir1: xDir,
175
180
  dir2: yDir
176
- }), activeAxes[0] && activeAxes[2] && /*#__PURE__*/React.createElement(PlaneSlider, {
181
+ }), !disableSliders && activeAxes[0] && activeAxes[2] && /*#__PURE__*/React.createElement(PlaneSlider, {
177
182
  axis: 1,
178
183
  dir1: zDir,
179
184
  dir2: xDir
180
- }), activeAxes[2] && activeAxes[1] && /*#__PURE__*/React.createElement(PlaneSlider, {
185
+ }), !disableSliders && activeAxes[2] && activeAxes[1] && /*#__PURE__*/React.createElement(PlaneSlider, {
181
186
  axis: 0,
182
187
  dir1: yDir,
183
188
  dir2: zDir
184
- }), activeAxes[0] && activeAxes[1] && /*#__PURE__*/React.createElement(AxisRotator, {
189
+ }), !disableRotations && activeAxes[0] && activeAxes[1] && /*#__PURE__*/React.createElement(AxisRotator, {
185
190
  axis: 2,
186
191
  dir1: xDir,
187
192
  dir2: yDir
188
- }), activeAxes[0] && activeAxes[2] && /*#__PURE__*/React.createElement(AxisRotator, {
193
+ }), !disableRotations && activeAxes[0] && activeAxes[2] && /*#__PURE__*/React.createElement(AxisRotator, {
189
194
  axis: 1,
190
195
  dir1: zDir,
191
196
  dir2: xDir
192
- }), activeAxes[2] && activeAxes[1] && /*#__PURE__*/React.createElement(AxisRotator, {
197
+ }), !disableRotations && activeAxes[2] && activeAxes[1] && /*#__PURE__*/React.createElement(AxisRotator, {
193
198
  axis: 0,
194
199
  dir1: yDir,
195
200
  dir2: zDir