@react-three/drei 9.30.3 → 9.31.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/index.cjs.js +1 -1
- package/core/index.js +2 -2
- package/core/pivotControls/AxisArrow.cjs.js +1 -1
- package/core/pivotControls/AxisArrow.js +50 -4
- package/core/pivotControls/AxisRotator.cjs.js +1 -1
- package/core/pivotControls/AxisRotator.js +18 -5
- package/core/pivotControls/PlaneSlider.cjs.js +1 -1
- package/core/pivotControls/PlaneSlider.js +85 -3
- package/core/pivotControls/context.d.ts +5 -0
- package/core/pivotControls/index.cjs.js +1 -1
- package/core/pivotControls/index.d.ts +2 -0
- package/core/pivotControls/index.js +7 -1
- package/index.cjs.js +1 -1
- package/materials/MeshRefractionMaterial.cjs.js +1 -1
- package/materials/MeshRefractionMaterial.js +12 -3
- package/native/index.cjs.js +1 -1
- package/native/index.js +2 -2
- package/package.json +1 -1
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"),f=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),g=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"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),F=require("./useFBX.cjs.js"),G=require("./useGLTF.cjs.js"),z=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),V=require("./useVideoTexture.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),Q=require("./useAspect.cjs.js"),X=require("./useCamera.cjs.js"),K=require("./useDetectGPU.cjs.js"),W=require("./useHelper.cjs.js"),N=require("./useBVH.cjs.js"),U=require("./useContextBridge.cjs.js"),_=require("./useAnimations.cjs.js"),J=require("./useFBO.cjs.js"),Y=require("./useIntersect.cjs.js"),Z=require("./useBoxProjectedEnv.cjs.js"),$=require("./BBAnchor.cjs.js"),ee=require("./CurveModifier.cjs.js"),re=require("./MeshDistortMaterial.cjs.js"),se=require("./MeshWobbleMaterial.cjs.js"),te=require("./MeshReflectorMaterial.cjs.js"),oe=require("./MeshRefractionMaterial.cjs.js"),ie=require("./PointMaterial.cjs.js"),ue=require("./shaderMaterial.cjs.js"),ae=require("./softShadows.cjs.js"),ce=require("./shapes.cjs.js"),ne=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./Center.cjs.js"),le=require("./Bounds.cjs.js"),xe=require("./CameraShake.cjs.js"),qe=require("./Float.cjs.js"),de=require("./Stage.cjs.js"),me=require("./Backdrop.cjs.js"),Ce=require("./Shadow.cjs.js"),he=require("./ContactShadows.cjs.js"),Me=require("./AccumulativeShadows.cjs.js"),Se=require("./Reflector.cjs.js"),be=require("./SpotLight.cjs.js"),Pe=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),fe=require("./Sky.cjs.js"),Te=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),Ae=require("./useMatcapTexture.cjs.js"),Le=require("./useNormalTexture.cjs.js"),ke=require("./Points.cjs.js"),De=require("./Instances.cjs.js"),Ee=require("./Segments.cjs.js"),Re=require("./Detailed.cjs.js"),we=require("./Preload.cjs.js"),Fe=require("./BakeShadows.cjs.js"),Ge=require("./meshBounds.cjs.js"),ze=require("./AdaptiveDpr.cjs.js"),Oe=require("./AdaptiveEvents.cjs.js"),Ie=require("./PerformanceMonitor.cjs.js"),Ve=require("./RenderTexture.cjs.js"),ye=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("
|
|
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"),f=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),v=require("./ArcballControls.cjs.js"),g=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"),R=require("./GizmoViewport.cjs.js"),w=require("./useCubeTexture.cjs.js"),F=require("./useFBX.cjs.js"),G=require("./useGLTF.cjs.js"),z=require("./useKTX2.cjs.js"),O=require("./useProgress.cjs.js"),I=require("./useTexture.cjs.js"),V=require("./useVideoTexture.cjs.js"),y=require("./Stats.cjs.js"),H=require("./useDepthBuffer.cjs.js"),Q=require("./useAspect.cjs.js"),X=require("./useCamera.cjs.js"),K=require("./useDetectGPU.cjs.js"),W=require("./useHelper.cjs.js"),N=require("./useBVH.cjs.js"),U=require("./useContextBridge.cjs.js"),_=require("./useAnimations.cjs.js"),J=require("./useFBO.cjs.js"),Y=require("./useIntersect.cjs.js"),Z=require("./useBoxProjectedEnv.cjs.js"),$=require("./BBAnchor.cjs.js"),ee=require("./CurveModifier.cjs.js"),re=require("./MeshDistortMaterial.cjs.js"),se=require("./MeshWobbleMaterial.cjs.js"),te=require("./MeshReflectorMaterial.cjs.js"),oe=require("./MeshRefractionMaterial.cjs.js"),ie=require("./PointMaterial.cjs.js"),ue=require("./shaderMaterial.cjs.js"),ae=require("./softShadows.cjs.js"),ce=require("./shapes.cjs.js"),ne=require("./RoundedBox.cjs.js"),je=require("./ScreenQuad.cjs.js"),pe=require("./Center.cjs.js"),le=require("./Bounds.cjs.js"),xe=require("./CameraShake.cjs.js"),qe=require("./Float.cjs.js"),de=require("./Stage.cjs.js"),me=require("./Backdrop.cjs.js"),Ce=require("./Shadow.cjs.js"),he=require("./ContactShadows.cjs.js"),Me=require("./AccumulativeShadows.cjs.js"),Se=require("./Reflector.cjs.js"),be=require("./SpotLight.cjs.js"),Pe=require("./Environment.cjs.js"),Be=require("./Lightformer.cjs.js"),fe=require("./Sky.cjs.js"),Te=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),Ae=require("./useMatcapTexture.cjs.js"),Le=require("./useNormalTexture.cjs.js"),ke=require("./Points.cjs.js"),De=require("./Instances.cjs.js"),Ee=require("./Segments.cjs.js"),Re=require("./Detailed.cjs.js"),we=require("./Preload.cjs.js"),Fe=require("./BakeShadows.cjs.js"),Ge=require("./meshBounds.cjs.js"),ze=require("./AdaptiveDpr.cjs.js"),Oe=require("./AdaptiveEvents.cjs.js"),Ie=require("./PerformanceMonitor.cjs.js"),Ve=require("./RenderTexture.cjs.js"),ye=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("../web/Html.cjs.js"),require("react-dom/client"),require("./pivotControls/context.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),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("../materials/MeshRefractionMaterial.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=f.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=v.ArcballControls,exports.TransformControls=g.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=R.GizmoViewport,exports.useCubeTexture=w.useCubeTexture,exports.useFBX=F.useFBX,exports.useGLTF=G.useGLTF,exports.useKTX2=z.useKTX2,exports.useProgress=O.useProgress,exports.IsObject=I.IsObject,exports.useTexture=I.useTexture,exports.useVideoTexture=V.useVideoTexture,exports.Stats=y.Stats,exports.useDepthBuffer=H.useDepthBuffer,exports.useAspect=Q.useAspect,exports.useCamera=X.useCamera,exports.useDetectGPU=K.useDetectGPU,exports.useHelper=W.useHelper,exports.useBVH=N.useBVH,exports.useContextBridge=U.useContextBridge,exports.useAnimations=_.useAnimations,exports.useFBO=J.useFBO,exports.useIntersect=Y.useIntersect,exports.useBoxProjectedEnv=Z.useBoxProjectedEnv,exports.BBAnchor=$.BBAnchor,exports.CurveModifier=ee.CurveModifier,exports.MeshDistortMaterial=re.MeshDistortMaterial,exports.MeshWobbleMaterial=se.MeshWobbleMaterial,exports.MeshReflectorMaterial=te.MeshReflectorMaterial,exports.MeshRefractionMaterial=oe.MeshRefractionMaterial,exports.PointMaterial=ie.PointMaterial,exports.PointMaterialImpl=ie.PointMaterialImpl,exports.shaderMaterial=ue.shaderMaterial,exports.softShadows=ae.softShadows,exports.Box=ce.Box,exports.Capsule=ce.Capsule,exports.Circle=ce.Circle,exports.Cone=ce.Cone,exports.Cylinder=ce.Cylinder,exports.Dodecahedron=ce.Dodecahedron,exports.Extrude=ce.Extrude,exports.Icosahedron=ce.Icosahedron,exports.Lathe=ce.Lathe,exports.Octahedron=ce.Octahedron,exports.Plane=ce.Plane,exports.Polyhedron=ce.Polyhedron,exports.Ring=ce.Ring,exports.Sphere=ce.Sphere,exports.Tetrahedron=ce.Tetrahedron,exports.Torus=ce.Torus,exports.TorusKnot=ce.TorusKnot,exports.Tube=ce.Tube,exports.RoundedBox=ne.RoundedBox,exports.ScreenQuad=je.ScreenQuad,exports.Center=pe.Center,exports.Bounds=le.Bounds,exports.useBounds=le.useBounds,exports.CameraShake=xe.CameraShake,exports.Float=qe.Float,exports.Stage=de.Stage,exports.Backdrop=me.Backdrop,exports.Shadow=Ce.Shadow,exports.ContactShadows=he.ContactShadows,exports.AccumulativeShadows=Me.AccumulativeShadows,exports.RandomizedLight=Me.RandomizedLight,exports.accumulativeContext=Me.accumulativeContext,exports.Reflector=Se.Reflector,exports.SpotLight=be.SpotLight,exports.Environment=Pe.Environment,exports.EnvironmentCube=Pe.EnvironmentCube,exports.EnvironmentMap=Pe.EnvironmentMap,exports.EnvironmentPortal=Pe.EnvironmentPortal,exports.useEnvironment=Pe.useEnvironment,exports.Lightformer=Be.Lightformer,exports.Sky=fe.Sky,exports.calcPosFromAngles=fe.calcPosFromAngles,exports.Stars=Te.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=ge.Sparkles,exports.useMatcapTexture=Ae.useMatcapTexture,exports.useNormalTexture=Le.useNormalTexture,exports.Point=ke.Point,exports.Points=ke.Points,exports.PointsBuffer=ke.PointsBuffer,exports.Instance=De.Instance,exports.Instances=De.Instances,exports.Merged=De.Merged,exports.Segment=Ee.Segment,exports.SegmentObject=Ee.SegmentObject,exports.Segments=Ee.Segments,exports.Detailed=Re.Detailed,exports.Preload=we.Preload,exports.BakeShadows=Fe.BakeShadows,exports.meshBounds=Ge.meshBounds,exports.AdaptiveDpr=ze.AdaptiveDpr,exports.AdaptiveEvents=Oe.AdaptiveEvents,exports.PerformanceMonitor=Ie.PerformanceMonitor,exports.usePerformanceMonitor=Ie.usePerformanceMonitor,exports.RenderTexture=Ve.RenderTexture,exports.Mask=ye.Mask,exports.useMask=ye.useMask;
|
package/core/index.js
CHANGED
|
@@ -106,11 +106,11 @@ import 'meshline';
|
|
|
106
106
|
import 'lodash.pick';
|
|
107
107
|
import 'lodash.omit';
|
|
108
108
|
import './pivotControls/AxisArrow.js';
|
|
109
|
+
import '../web/Html.js';
|
|
110
|
+
import 'react-dom/client';
|
|
109
111
|
import './pivotControls/context.js';
|
|
110
112
|
import './pivotControls/PlaneSlider.js';
|
|
111
113
|
import './pivotControls/AxisRotator.js';
|
|
112
|
-
import '../web/Html.js';
|
|
113
|
-
import 'react-dom/client';
|
|
114
114
|
import 'lodash.clamp';
|
|
115
115
|
import 'zustand';
|
|
116
116
|
import 'stats.js';
|
|
@@ -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("./context.cjs.js");function
|
|
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 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,annotationsClass:u,depthTest:y,scale:f,lineWidth:x,fixed:g,axisColors:h,hoveredColor:b,displayValues:O,opacity:P,onDragStart:v,onDrag:w,onDragEnd:j,userData:E}=c.useContext(a.context),k=r.useThree((e=>e.controls)),M=c.useRef(null),C=c.useRef(null),q=c.useRef(null),L=c.useRef(0),[D,R]=c.useState(!1),T=c.useCallback((r=>{O&&(M.current.innerText=`${i.current[t].toFixed(2)}`,M.current.style.display="block"),r.stopPropagation();const n=(new l.Matrix4).extractRotation(C.current.matrixWorld),o=r.point.clone(),a=e.clone().applyMatrix4(n).normalize();q.current={clickPoint:o,dir:a},L.current=i.current[t],v(),k&&(k.enabled=!1),r.target.setPointerCapture(r.pointerId)}),[e,k,v,i,t]),F=c.useCallback((e=>{if(e.stopPropagation(),D||R(!0),q.current){const{clickPoint:r,dir:n}=q.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-L.current)),void 0!==a&&(c=Math.min(c,a-L.current)),i.current[t]=L.current+c,O&&(M.current.innerText=`${i.current[t].toFixed(2)}`),m.makeTranslation(n.x*c,n.y*c,n.z*c),w(m)}}),[w,D,i,s,t]),S=c.useCallback((e=>{O&&(M.current.style.display="none"),e.stopPropagation(),q.current=null,j(),k&&(k.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[k,j]),V=c.useCallback((e=>{e.stopPropagation(),R(!1)}),[]),{cylinderLength:W,coneWidth:z,coneLength:_,matrixL:A}=c.useMemo((()=>{const t=g?x/f*1.6:f/20,r=g?.2:f/5,n=g?1-r:f-r,o=(new l.Quaternion).setFromUnitVectors(p,e.clone().normalize());return{cylinderLength:n,coneWidth:t,coneLength:r,matrixL:(new l.Matrix4).makeRotationFromQuaternion(o)}}),[e,f,x,g]),U=D?b:h[t];return c.createElement("group",{ref:C},c.createElement("group",{matrix:A,matrixAutoUpdate:!1,onPointerDown:T,onPointerMove:F,onPointerUp:S,onPointerOut:V},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:u,ref:M})),c.createElement("mesh",{visible:!1,position:[0,(W+_)/2,0],userData:E},c.createElement("cylinderGeometry",{args:[1.4*z,1.4*z,W+_,8,1]})),c.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:y,points:[0,0,0,0,W,0],lineWidth:x,color:U,opacity:P,polygonOffset:!0,renderOrder:1,polygonOffsetFactor:-10}),c.createElement("mesh",{raycast:()=>null,position:[0,W+_/2,0],renderOrder:500},c.createElement("coneGeometry",{args:[z,_,24,1]}),c.createElement("meshBasicMaterial",{transparent:!0,depthTest:y,color:U,opacity:P,polygonOffset:!0,polygonOffsetFactor:-10}))))},exports.calculateOffset=d;
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import * as THREE from 'three';
|
|
3
3
|
import { useThree } from '@react-three/fiber';
|
|
4
4
|
import { Line } from '../Line.js';
|
|
5
|
+
import { Html } from '../../web/Html.js';
|
|
5
6
|
import { context } from './context.js';
|
|
6
7
|
|
|
7
8
|
const vec1 = new THREE.Vector3();
|
|
@@ -27,12 +28,16 @@ const AxisArrow = ({
|
|
|
27
28
|
axis
|
|
28
29
|
}) => {
|
|
29
30
|
const {
|
|
31
|
+
translation,
|
|
32
|
+
translationLimits,
|
|
33
|
+
annotationsClass,
|
|
30
34
|
depthTest,
|
|
31
35
|
scale,
|
|
32
36
|
lineWidth,
|
|
33
37
|
fixed,
|
|
34
38
|
axisColors,
|
|
35
39
|
hoveredColor,
|
|
40
|
+
displayValues,
|
|
36
41
|
opacity,
|
|
37
42
|
onDragStart,
|
|
38
43
|
onDrag,
|
|
@@ -41,10 +46,17 @@ const AxisArrow = ({
|
|
|
41
46
|
} = React.useContext(context); // @ts-expect-error new in @react-three/fiber@7.0.5
|
|
42
47
|
|
|
43
48
|
const camControls = useThree(state => state.controls);
|
|
49
|
+
const divRef = React.useRef(null);
|
|
44
50
|
const objRef = React.useRef(null);
|
|
45
51
|
const clickInfo = React.useRef(null);
|
|
52
|
+
const offset0 = React.useRef(0);
|
|
46
53
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
47
54
|
const onPointerDown = React.useCallback(e => {
|
|
55
|
+
if (displayValues) {
|
|
56
|
+
divRef.current.innerText = `${translation.current[axis].toFixed(2)}`;
|
|
57
|
+
divRef.current.style.display = 'block';
|
|
58
|
+
}
|
|
59
|
+
|
|
48
60
|
e.stopPropagation();
|
|
49
61
|
const rotation = new THREE.Matrix4().extractRotation(objRef.current.matrixWorld);
|
|
50
62
|
const clickPoint = e.point.clone();
|
|
@@ -53,11 +65,12 @@ const AxisArrow = ({
|
|
|
53
65
|
clickPoint,
|
|
54
66
|
dir
|
|
55
67
|
};
|
|
68
|
+
offset0.current = translation.current[axis];
|
|
56
69
|
onDragStart();
|
|
57
70
|
camControls && (camControls.enabled = false); // @ts-ignore - setPointerCapture is not in the type definition
|
|
58
71
|
|
|
59
72
|
e.target.setPointerCapture(e.pointerId);
|
|
60
|
-
}, [direction, camControls, onDragStart]);
|
|
73
|
+
}, [direction, camControls, onDragStart, translation, axis]);
|
|
61
74
|
const onPointerMove = React.useCallback(e => {
|
|
62
75
|
e.stopPropagation();
|
|
63
76
|
if (!isHovered) setIsHovered(true);
|
|
@@ -67,12 +80,32 @@ const AxisArrow = ({
|
|
|
67
80
|
clickPoint,
|
|
68
81
|
dir
|
|
69
82
|
} = clickInfo.current;
|
|
70
|
-
const
|
|
83
|
+
const [min, max] = (translationLimits == null ? void 0 : translationLimits[axis]) || [undefined, undefined];
|
|
84
|
+
let offset = calculateOffset(clickPoint, dir, e.ray.origin, e.ray.direction);
|
|
85
|
+
|
|
86
|
+
if (min !== undefined) {
|
|
87
|
+
offset = Math.max(offset, min - offset0.current);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
if (max !== undefined) {
|
|
91
|
+
offset = Math.min(offset, max - offset0.current);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
translation.current[axis] = offset0.current + offset;
|
|
95
|
+
|
|
96
|
+
if (displayValues) {
|
|
97
|
+
divRef.current.innerText = `${translation.current[axis].toFixed(2)}`;
|
|
98
|
+
}
|
|
99
|
+
|
|
71
100
|
offsetMatrix.makeTranslation(dir.x * offset, dir.y * offset, dir.z * offset);
|
|
72
101
|
onDrag(offsetMatrix);
|
|
73
102
|
}
|
|
74
|
-
}, [onDrag, isHovered]);
|
|
103
|
+
}, [onDrag, isHovered, translation, translationLimits, axis]);
|
|
75
104
|
const onPointerUp = React.useCallback(e => {
|
|
105
|
+
if (displayValues) {
|
|
106
|
+
divRef.current.style.display = 'none';
|
|
107
|
+
}
|
|
108
|
+
|
|
76
109
|
e.stopPropagation();
|
|
77
110
|
clickInfo.current = null;
|
|
78
111
|
onDragEnd();
|
|
@@ -112,7 +145,20 @@ const AxisArrow = ({
|
|
|
112
145
|
onPointerMove: onPointerMove,
|
|
113
146
|
onPointerUp: onPointerUp,
|
|
114
147
|
onPointerOut: onPointerOut
|
|
115
|
-
}, /*#__PURE__*/React.createElement(
|
|
148
|
+
}, /*#__PURE__*/React.createElement(Html, {
|
|
149
|
+
position: [0, -coneLength, 0]
|
|
150
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
151
|
+
style: {
|
|
152
|
+
display: 'none',
|
|
153
|
+
background: '#151520',
|
|
154
|
+
color: 'white',
|
|
155
|
+
padding: '6px 8px',
|
|
156
|
+
borderRadius: 7,
|
|
157
|
+
whiteSpace: 'nowrap'
|
|
158
|
+
},
|
|
159
|
+
className: annotationsClass,
|
|
160
|
+
ref: divRef
|
|
161
|
+
})), /*#__PURE__*/React.createElement("mesh", {
|
|
116
162
|
visible: false,
|
|
117
163
|
position: [0, (cylinderLength + coneLength) / 2.0, 0],
|
|
118
164
|
userData: userData
|
|
@@ -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("lodash.clamp"),i=require("./context.cjs.js");function
|
|
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 c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@babel/runtime/helpers/extends"),require("three-stdlib"),require("react-dom/client");var s=l(e),u=l(t),d=c(a);const p=new u.Vector3,m=new u.Vector3,h=e=>180*e/Math.PI,f=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)},P=new u.Matrix4,x=new u.Vector3,M=new u.Ray,b=new u.Vector3;exports.AxisRotator=({dir1:e,dir2:t,axis:a})=>{const{rotationLimits:c,annotationsClass:l,depthTest:y,scale:g,lineWidth:w,fixed:v,axisColors:C,hoveredColor:j,displayValues:I,opacity:k,onDragStart:q,onDrag:O,onDragEnd:V,userData:R}=s.useContext(i.context),F=r.useThree((e=>e.controls)),D=s.useRef(null),E=s.useRef(null),W=s.useRef(0),z=s.useRef(0),T=s.useRef(null),[A,L]=s.useState(!1),_=s.useCallback((e=>{I&&(D.current.innerText=`${h(z.current).toFixed(0)}º`,D.current.style.display="block"),e.stopPropagation();const t=e.point.clone(),r=(new u.Vector3).setFromMatrixPosition(E.current.matrixWorld),n=(new u.Vector3).setFromMatrixColumn(E.current.matrixWorld,0).normalize(),o=(new u.Vector3).setFromMatrixColumn(E.current.matrixWorld,1).normalize(),a=(new u.Vector3).setFromMatrixColumn(E.current.matrixWorld,2).normalize(),i=(new u.Plane).setFromNormalAndCoplanarPoint(a,r);T.current={clickPoint:t,origin:r,e1:n,e2:o,normal:a,plane:i},q(),F&&(F.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[F,q]),S=s.useCallback((e=>{if(e.stopPropagation(),A||L(!0),T.current){const{clickPoint:t,origin:r,e1:n,e2:o,normal:i,plane:l}=T.current,[s,u]=(null==c?void 0:c[a])||[void 0,void 0];M.copy(e.ray),M.intersectPlane(l,b),M.direction.negate(),M.intersectPlane(l,b);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),c=p.dot(n)/a,l=p.dot(o)/i,s=m.dot(n)/a,u=m.dot(o)/i,d=Math.atan2(l,c);return Math.atan2(u,s)-d})(t,b,r,n,o),g=h(y);e.shiftKey&&(g=10*Math.round(g/10),y=(e=>e*Math.PI/180)(g)),void 0!==s&&void 0!==u&&u-s<2*Math.PI?(y=f(y),y=y>Math.PI?y-2*Math.PI:y,y=d.default(y,s-W.current,u-W.current),z.current=W.current+y):(z.current=f(W.current+y),z.current=z.current>Math.PI?z.current-2*Math.PI:z.current),I&&(g=h(z.current),D.current.innerText=`${g.toFixed(0)}º`),P.makeRotationAxis(i,y),x.copy(r).applyMatrix4(P).sub(r).negate(),P.setPosition(x),O(P)}}),[O,A,c,a]),H=s.useCallback((e=>{I&&(D.current.style.display="none"),e.stopPropagation(),W.current=z.current,T.current=null,V(),F&&(F.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[F,V]),N=s.useCallback((e=>{e.stopPropagation(),L(!1)}),[]),U=s.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new u.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),$=v?.65:.65*g,B=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)*$,Math.sin(r)*$,0))}return e}),[$]);return s.createElement("group",{ref:E,onPointerDown:_,onPointerMove:S,onPointerUp:H,onPointerOut:N,matrix:U,matrixAutoUpdate:!1},s.createElement(o.Html,{position:[$,$,0]},s.createElement("div",{style:{display:"none",background:"#151520",color:"white",padding:"6px 8px",borderRadius:7,whiteSpace:"nowrap"},className:l,ref:D})),s.createElement(n.Line,{points:B,lineWidth:4*w,visible:!1,userData:R}),s.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:y,points:B,lineWidth:w,color:A?j:C[a],opacity:k,polygonOffset:!0,polygonOffsetFactor:-10}))};
|
|
@@ -65,6 +65,7 @@ const AxisRotator = ({
|
|
|
65
65
|
fixed,
|
|
66
66
|
axisColors,
|
|
67
67
|
hoveredColor,
|
|
68
|
+
displayValues,
|
|
68
69
|
opacity,
|
|
69
70
|
onDragStart,
|
|
70
71
|
onDrag,
|
|
@@ -80,8 +81,11 @@ const AxisRotator = ({
|
|
|
80
81
|
const clickInfo = React.useRef(null);
|
|
81
82
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
82
83
|
const onPointerDown = React.useCallback(e => {
|
|
83
|
-
|
|
84
|
-
|
|
84
|
+
if (displayValues) {
|
|
85
|
+
divRef.current.innerText = `${toDegrees(angle.current).toFixed(0)}º`;
|
|
86
|
+
divRef.current.style.display = 'block';
|
|
87
|
+
}
|
|
88
|
+
|
|
85
89
|
e.stopPropagation();
|
|
86
90
|
const clickPoint = e.point.clone();
|
|
87
91
|
const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
|
|
@@ -128,15 +132,21 @@ const AxisRotator = ({
|
|
|
128
132
|
deltaAngle = toRadians(degrees);
|
|
129
133
|
}
|
|
130
134
|
|
|
131
|
-
if (min !== undefined && max !== undefined) {
|
|
135
|
+
if (min !== undefined && max !== undefined && max - min < 2 * Math.PI) {
|
|
132
136
|
deltaAngle = minimizeAngle(deltaAngle);
|
|
133
137
|
deltaAngle = deltaAngle > Math.PI ? deltaAngle - 2 * Math.PI : deltaAngle;
|
|
134
138
|
deltaAngle = clamp(deltaAngle, min - angle0.current, max - angle0.current);
|
|
135
139
|
angle.current = angle0.current + deltaAngle;
|
|
140
|
+
} else {
|
|
141
|
+
angle.current = minimizeAngle(angle0.current + deltaAngle);
|
|
142
|
+
angle.current = angle.current > Math.PI ? angle.current - 2 * Math.PI : angle.current;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
if (displayValues) {
|
|
136
146
|
degrees = toDegrees(angle.current);
|
|
147
|
+
divRef.current.innerText = `${degrees.toFixed(0)}º`;
|
|
137
148
|
}
|
|
138
149
|
|
|
139
|
-
divRef.current.innerText = `${degrees.toFixed(0)} º`;
|
|
140
150
|
rotMatrix.makeRotationAxis(normal, deltaAngle);
|
|
141
151
|
posNew.copy(origin).applyMatrix4(rotMatrix).sub(origin).negate();
|
|
142
152
|
rotMatrix.setPosition(posNew);
|
|
@@ -144,7 +154,10 @@ const AxisRotator = ({
|
|
|
144
154
|
}
|
|
145
155
|
}, [onDrag, isHovered, rotationLimits, axis]);
|
|
146
156
|
const onPointerUp = React.useCallback(e => {
|
|
147
|
-
|
|
157
|
+
if (displayValues) {
|
|
158
|
+
divRef.current.style.display = 'none';
|
|
159
|
+
}
|
|
160
|
+
|
|
148
161
|
e.stopPropagation();
|
|
149
162
|
angle0.current = angle.current;
|
|
150
163
|
clickInfo.current = null;
|
|
@@ -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("./context.cjs.js");function
|
|
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),l=i(t);const c=new l.Ray,u=new l.Vector3,p=new l.Matrix4;exports.PlaneSlider=({dir1:e,dir2:t,axis:i})=>{const{translation:d,translationLimits:m,annotationsClass:x,depthTest:b,scale:h,lineWidth:f,fixed:g,axisColors:y,hoveredColor:M,displayValues:C,opacity:P,onDragStart:w,onDrag:v,onDragEnd:j,userData:O}=s.useContext(a.context),k=r.useThree((e=>e.controls)),F=s.useRef(null),V=s.useRef(null),z=s.useRef(null),E=s.useRef(0),q=s.useRef(0),[D,R]=s.useState(!1),T=s.useCallback((e=>{C&&(F.current.innerText=`${d.current[(i+1)%3].toFixed(2)}, ${d.current[(i+2)%3].toFixed(2)}`,F.current.style.display="block"),e.stopPropagation();const t=e.point.clone(),r=(new l.Vector3).setFromMatrixPosition(V.current.matrixWorld),n=(new l.Vector3).setFromMatrixColumn(V.current.matrixWorld,0).normalize(),o=(new l.Vector3).setFromMatrixColumn(V.current.matrixWorld,1).normalize(),a=(new l.Vector3).setFromMatrixColumn(V.current.matrixWorld,2).normalize(),s=(new l.Plane).setFromNormalAndCoplanarPoint(a,r);z.current={clickPoint:t,e1:n,e2:o,plane:s},E.current=d.current[(i+1)%3],q.current=d.current[(i+2)%3],w(),k&&(k.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[k,w]),W=s.useCallback((e=>{if(e.stopPropagation(),D||R(!0),z.current){const{clickPoint:t,e1:r,e2:n,plane:o}=z.current,[a,s]=(null==m?void 0:m[(i+1)%3])||[void 0,void 0],[l,x]=(null==m?void 0:m[(i+2)%3])||[void 0,void 0];c.copy(e.ray),c.intersectPlane(o,u),c.direction.negate(),c.intersectPlane(o,u),u.sub(t);let[b,h]=((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),l=t.getComponent(n),c=t.getComponent(a),u=r.getComponent(n),p=(r.getComponent(a)-u*(s/i))/(c-l*(s/i));return[(u-p*l)/i,p]})(r,n,u);void 0!==a&&(b=Math.max(b,a-E.current)),void 0!==s&&(b=Math.min(b,s-E.current)),void 0!==l&&(h=Math.max(h,l-q.current)),void 0!==x&&(h=Math.min(h,x-q.current)),d.current[(i+1)%3]=E.current+b,d.current[(i+2)%3]=q.current+h,C&&(F.current.innerText=`${d.current[(i+1)%3].toFixed(2)}, ${d.current[(i+2)%3].toFixed(2)}`),p.makeTranslation(b*r.x+h*n.x,b*r.y+h*n.y,b*r.z+h*n.z),v(p)}}),[v,D,d,m,i]),S=s.useCallback((e=>{C&&(F.current.style.display="none"),e.stopPropagation(),z.current=null,j(),k&&(k.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[k,j]),$=s.useCallback((e=>{e.stopPropagation(),R(!1)}),[]),_=s.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new l.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),L=g?1/7:h/7,A=g?.225:.225*h,B=D?M:y[i],H=s.useMemo((()=>[new l.Vector3(0,0,0),new l.Vector3(0,A,0),new l.Vector3(A,A,0),new l.Vector3(A,0,0),new l.Vector3(0,0,0)]),[A]);return s.createElement("group",{ref:V,matrix:_,matrixAutoUpdate:!1},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:x,ref:F})),s.createElement("group",{position:[1.7*L,1.7*L,0]},s.createElement("mesh",{visible:!0,onPointerDown:T,onPointerMove:W,onPointerUp:S,onPointerOut:$,scale:A,userData:O},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,depthTest:b,color:B,polygonOffset:!0,polygonOffsetFactor:-10,side:l.DoubleSide})),s.createElement(n.Line,{position:[-A/2,-A/2,0],transparent:!0,depthTest:b,points:H,lineWidth:f,color:B,opacity:P,polygonOffset:!0,polygonOffsetFactor:-10,userData:O})))};
|
|
@@ -2,8 +2,24 @@ import * as React from 'react';
|
|
|
2
2
|
import * as THREE from 'three';
|
|
3
3
|
import { useThree } from '@react-three/fiber';
|
|
4
4
|
import { Line } from '../Line.js';
|
|
5
|
+
import { Html } from '../../web/Html.js';
|
|
5
6
|
import { context } from './context.js';
|
|
6
7
|
|
|
8
|
+
const decomposeIntoBasis = (e1, e2, offset) => {
|
|
9
|
+
const i1 = Math.abs(e1.x) >= Math.abs(e1.y) && Math.abs(e1.x) >= Math.abs(e1.z) ? 0 : Math.abs(e1.y) >= Math.abs(e1.x) && Math.abs(e1.y) >= Math.abs(e1.z) ? 1 : 2;
|
|
10
|
+
const e2DegrowthOrder = [0, 1, 2].sort((a, b) => Math.abs(e2.getComponent(b)) - Math.abs(e2.getComponent(a)));
|
|
11
|
+
const i2 = i1 === e2DegrowthOrder[0] ? e2DegrowthOrder[1] : e2DegrowthOrder[0];
|
|
12
|
+
const a1 = e1.getComponent(i1);
|
|
13
|
+
const a2 = e1.getComponent(i2);
|
|
14
|
+
const b1 = e2.getComponent(i1);
|
|
15
|
+
const b2 = e2.getComponent(i2);
|
|
16
|
+
const c1 = offset.getComponent(i1);
|
|
17
|
+
const c2 = offset.getComponent(i2);
|
|
18
|
+
const y = (c2 - c1 * (a2 / a1)) / (b2 - b1 * (a2 / a1));
|
|
19
|
+
const x = (c1 - y * b1) / a1;
|
|
20
|
+
return [x, y];
|
|
21
|
+
};
|
|
22
|
+
|
|
7
23
|
const ray = new THREE.Ray();
|
|
8
24
|
const intersection = new THREE.Vector3();
|
|
9
25
|
const offsetMatrix = new THREE.Matrix4();
|
|
@@ -13,12 +29,16 @@ const PlaneSlider = ({
|
|
|
13
29
|
axis
|
|
14
30
|
}) => {
|
|
15
31
|
const {
|
|
32
|
+
translation,
|
|
33
|
+
translationLimits,
|
|
34
|
+
annotationsClass,
|
|
16
35
|
depthTest,
|
|
17
36
|
scale,
|
|
18
37
|
lineWidth,
|
|
19
38
|
fixed,
|
|
20
39
|
axisColors,
|
|
21
40
|
hoveredColor,
|
|
41
|
+
displayValues,
|
|
22
42
|
opacity,
|
|
23
43
|
onDragStart,
|
|
24
44
|
onDrag,
|
|
@@ -27,19 +47,33 @@ const PlaneSlider = ({
|
|
|
27
47
|
} = React.useContext(context); // @ts-expect-error new in @react-three/fiber@7.0.5
|
|
28
48
|
|
|
29
49
|
const camControls = useThree(state => state.controls);
|
|
50
|
+
const divRef = React.useRef(null);
|
|
30
51
|
const objRef = React.useRef(null);
|
|
31
52
|
const clickInfo = React.useRef(null);
|
|
53
|
+
const offsetX0 = React.useRef(0);
|
|
54
|
+
const offsetY0 = React.useRef(0);
|
|
32
55
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
33
56
|
const onPointerDown = React.useCallback(e => {
|
|
57
|
+
if (displayValues) {
|
|
58
|
+
divRef.current.innerText = `${translation.current[(axis + 1) % 3].toFixed(2)}, ${translation.current[(axis + 2) % 3].toFixed(2)}`;
|
|
59
|
+
divRef.current.style.display = 'block';
|
|
60
|
+
}
|
|
61
|
+
|
|
34
62
|
e.stopPropagation();
|
|
35
63
|
const clickPoint = e.point.clone();
|
|
36
64
|
const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
|
|
65
|
+
const e1 = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 0).normalize();
|
|
66
|
+
const e2 = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 1).normalize();
|
|
37
67
|
const normal = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 2).normalize();
|
|
38
68
|
const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, origin);
|
|
39
69
|
clickInfo.current = {
|
|
40
70
|
clickPoint,
|
|
71
|
+
e1,
|
|
72
|
+
e2,
|
|
41
73
|
plane
|
|
42
74
|
};
|
|
75
|
+
offsetX0.current = translation.current[(axis + 1) % 3];
|
|
76
|
+
offsetY0.current = translation.current[(axis + 2) % 3];
|
|
43
77
|
onDragStart();
|
|
44
78
|
camControls && (camControls.enabled = false); // @ts-ignore
|
|
45
79
|
|
|
@@ -52,18 +86,53 @@ const PlaneSlider = ({
|
|
|
52
86
|
if (clickInfo.current) {
|
|
53
87
|
const {
|
|
54
88
|
clickPoint,
|
|
89
|
+
e1,
|
|
90
|
+
e2,
|
|
55
91
|
plane
|
|
56
92
|
} = clickInfo.current;
|
|
93
|
+
const [minX, maxX] = (translationLimits == null ? void 0 : translationLimits[(axis + 1) % 3]) || [undefined, undefined];
|
|
94
|
+
const [minY, maxY] = (translationLimits == null ? void 0 : translationLimits[(axis + 2) % 3]) || [undefined, undefined];
|
|
57
95
|
ray.copy(e.ray);
|
|
58
96
|
ray.intersectPlane(plane, intersection);
|
|
59
97
|
ray.direction.negate();
|
|
60
98
|
ray.intersectPlane(plane, intersection);
|
|
61
99
|
intersection.sub(clickPoint);
|
|
62
|
-
|
|
100
|
+
let [offsetX, offsetY] = decomposeIntoBasis(e1, e2, intersection);
|
|
101
|
+
/* let offsetY = (intersection.y - (intersection.x * e1.y) / e1.x) / (e2.y - (e2.x * e1.y) / e1.x)
|
|
102
|
+
let offsetX = (intersection.x - offsetY * e2.x) / e1.x */
|
|
103
|
+
|
|
104
|
+
if (minX !== undefined) {
|
|
105
|
+
offsetX = Math.max(offsetX, minX - offsetX0.current);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
if (maxX !== undefined) {
|
|
109
|
+
offsetX = Math.min(offsetX, maxX - offsetX0.current);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
if (minY !== undefined) {
|
|
113
|
+
offsetY = Math.max(offsetY, minY - offsetY0.current);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
if (maxY !== undefined) {
|
|
117
|
+
offsetY = Math.min(offsetY, maxY - offsetY0.current);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
translation.current[(axis + 1) % 3] = offsetX0.current + offsetX;
|
|
121
|
+
translation.current[(axis + 2) % 3] = offsetY0.current + offsetY;
|
|
122
|
+
|
|
123
|
+
if (displayValues) {
|
|
124
|
+
divRef.current.innerText = `${translation.current[(axis + 1) % 3].toFixed(2)}, ${translation.current[(axis + 2) % 3].toFixed(2)}`;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
offsetMatrix.makeTranslation(offsetX * e1.x + offsetY * e2.x, offsetX * e1.y + offsetY * e2.y, offsetX * e1.z + offsetY * e2.z);
|
|
63
128
|
onDrag(offsetMatrix);
|
|
64
129
|
}
|
|
65
|
-
}, [onDrag, isHovered]);
|
|
130
|
+
}, [onDrag, isHovered, translation, translationLimits, axis]);
|
|
66
131
|
const onPointerUp = React.useCallback(e => {
|
|
132
|
+
if (displayValues) {
|
|
133
|
+
divRef.current.style.display = 'none';
|
|
134
|
+
}
|
|
135
|
+
|
|
67
136
|
e.stopPropagation();
|
|
68
137
|
clickInfo.current = null;
|
|
69
138
|
onDragEnd();
|
|
@@ -88,7 +157,20 @@ const PlaneSlider = ({
|
|
|
88
157
|
ref: objRef,
|
|
89
158
|
matrix: matrixL,
|
|
90
159
|
matrixAutoUpdate: false
|
|
91
|
-
}, /*#__PURE__*/React.createElement(
|
|
160
|
+
}, /*#__PURE__*/React.createElement(Html, {
|
|
161
|
+
position: [0, 0, 0]
|
|
162
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
163
|
+
style: {
|
|
164
|
+
display: 'none',
|
|
165
|
+
background: '#151520',
|
|
166
|
+
color: 'white',
|
|
167
|
+
padding: '6px 8px',
|
|
168
|
+
borderRadius: 7,
|
|
169
|
+
whiteSpace: 'nowrap'
|
|
170
|
+
},
|
|
171
|
+
className: annotationsClass,
|
|
172
|
+
ref: divRef
|
|
173
|
+
})), /*#__PURE__*/React.createElement("group", {
|
|
92
174
|
position: [pos1 * 1.7, pos1 * 1.7, 0]
|
|
93
175
|
}, /*#__PURE__*/React.createElement("mesh", {
|
|
94
176
|
visible: true,
|
|
@@ -4,6 +4,10 @@ export declare type PivotContext = {
|
|
|
4
4
|
onDragStart: () => void;
|
|
5
5
|
onDrag: (mdW: THREE.Matrix4) => void;
|
|
6
6
|
onDragEnd: () => void;
|
|
7
|
+
translation: {
|
|
8
|
+
current: [number, number, number];
|
|
9
|
+
};
|
|
10
|
+
translationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
|
|
7
11
|
rotationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
|
|
8
12
|
axisColors: [string | number, string | number, string | number];
|
|
9
13
|
hoveredColor: string | number;
|
|
@@ -11,6 +15,7 @@ export declare type PivotContext = {
|
|
|
11
15
|
scale: number;
|
|
12
16
|
lineWidth: number;
|
|
13
17
|
fixed: boolean;
|
|
18
|
+
displayValues: boolean;
|
|
14
19
|
depthTest: boolean;
|
|
15
20
|
userData?: {
|
|
16
21
|
[key: string]: any;
|
|
@@ -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"),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,
|
|
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,R=new s.Vector3,S=new s.Vector3,L=new s.Vector3(1,0,0),P=new s.Vector3(0,1,0),D=new s.Vector3(0,0,1),W=u.forwardRef((({matrix:e,onDragStart:r,onDrag:l,onDragEnd:d,autoTransform:x=!0,anchor:p,disableAxes:m=!1,disableSliders:W=!1,disableRotations:C=!1,activeAxes:O=[!0,!0,!0],offset:B=[0,0,0],rotation:T=[0,0,0],scale:z=1,lineWidth:_=4,fixed:k=!1,translationLimits:F,rotationLimits:H,depthTest:I=!0,axisColors:U=["#ff2060","#20df80","#2080ff"],hoveredColor:G="#ffff40",displayValues:J=!0,opacity:K=1,visible:N=!0,userData:Q,children:X},Y)=>{t.extend({MeshLine:i.MeshLine,MeshLineMaterial:i.MeshLineMaterial});const Z=t.useThree((e=>e.invalidate)),$=u.useRef(null),ee=u.useRef(null),re=u.useRef(null),te=u.useRef(null),ie=u.useRef([0,0,0]);u.useLayoutEffect((()=>{p&&(te.current.updateWorldMatrix(!0,!0),g.copy(te.current.matrixWorld).invert(),E.makeEmpty(),te.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),R.copy(V).multiply(new s.Vector3(...p)).add(q),S.set(...B).add(R),re.current.position.copy(S),Z())}));const oe=u.useMemo((()=>({onDragStart:()=>{f.copy(ee.current.matrix),w.copy(ee.current.matrixWorld),r&&r(),Z()},onDrag:e=>{h.copy($.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&&ee.current.matrix.copy(M),l&&l(M,j,v,e),Z()},onDragEnd:()=>{d&&d(),Z()},translation:ie,translationLimits:F,rotationLimits:H,axisColors:U,hoveredColor:G,opacity:K,scale:z,lineWidth:_,fixed:k,displayValues:J,depthTest:I,userData:Q})),[r,l,d,ie,F,H,I,z,_,k,...U,G,K,J,Q,x]),ne=new s.Vector3;return t.useFrame((e=>{if(k){const o=y(re.current.getWorldPosition(ne),z,e.camera,e.size);var r,t,i;if(re.current)(null==(r=re.current)?void 0:r.scale.x)===o&&(null==(t=re.current)?void 0:t.scale.y)===o&&(null==(i=re.current)?void 0:i.scale.z)===o||(re.current.scale.setScalar(o),e.invalidate())}})),u.useImperativeHandle(Y,(()=>ee.current),[]),u.createElement(c.context.Provider,{value:oe},u.createElement("group",{ref:$},u.createElement("group",{ref:ee,matrix:e,matrixAutoUpdate:!1},u.createElement("group",{visible:N,ref:re,position:B,rotation:T},!m&&O[0]&&u.createElement(o.AxisArrow,{axis:0,direction:L}),!m&&O[1]&&u.createElement(o.AxisArrow,{axis:1,direction:P}),!m&&O[2]&&u.createElement(o.AxisArrow,{axis:2,direction:D}),!W&&O[0]&&O[1]&&u.createElement(n.PlaneSlider,{axis:2,dir1:L,dir2:P}),!W&&O[0]&&O[2]&&u.createElement(n.PlaneSlider,{axis:1,dir1:D,dir2:L}),!W&&O[2]&&O[1]&&u.createElement(n.PlaneSlider,{axis:0,dir1:P,dir2:D}),!C&&O[0]&&O[1]&&u.createElement(a.AxisRotator,{axis:2,dir1:L,dir2:P}),!C&&O[0]&&O[2]&&u.createElement(a.AxisRotator,{axis:1,dir1:D,dir2:L}),!C&&O[2]&&O[1]&&u.createElement(a.AxisRotator,{axis:0,dir1:P,dir2:D})),u.createElement("group",{ref:te},X))))}));exports.PivotControls=W,exports.calculateScaleFactor=y;
|
|
@@ -15,6 +15,7 @@ declare type PivotControlsProps = {
|
|
|
15
15
|
disableAxes?: boolean;
|
|
16
16
|
disableSliders?: boolean;
|
|
17
17
|
disableRotations?: boolean;
|
|
18
|
+
translationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
|
|
18
19
|
rotationLimits?: [[number, number] | undefined, [number, number] | undefined, [number, number] | undefined];
|
|
19
20
|
axisColors?: [string | number, string | number, string | number];
|
|
20
21
|
hoveredColor?: string | number;
|
|
@@ -23,6 +24,7 @@ declare type PivotControlsProps = {
|
|
|
23
24
|
onDrag?: (l: THREE.Matrix4, deltaL: THREE.Matrix4, w: THREE.Matrix4, deltaW: THREE.Matrix4) => void;
|
|
24
25
|
onDragEnd?: () => void;
|
|
25
26
|
depthTest?: boolean;
|
|
27
|
+
displayValues?: boolean;
|
|
26
28
|
opacity?: number;
|
|
27
29
|
visible?: boolean;
|
|
28
30
|
userData?: {
|
|
@@ -72,10 +72,12 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
|
|
|
72
72
|
scale = 1,
|
|
73
73
|
lineWidth = 4,
|
|
74
74
|
fixed = false,
|
|
75
|
+
translationLimits,
|
|
75
76
|
rotationLimits,
|
|
76
77
|
depthTest = true,
|
|
77
78
|
axisColors = ['#ff2060', '#20df80', '#2080ff'],
|
|
78
79
|
hoveredColor = '#ffff40',
|
|
80
|
+
displayValues = true,
|
|
79
81
|
opacity = 1,
|
|
80
82
|
visible = true,
|
|
81
83
|
userData,
|
|
@@ -90,6 +92,7 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
|
|
|
90
92
|
const ref = React.useRef(null);
|
|
91
93
|
const gizmoRef = React.useRef(null);
|
|
92
94
|
const childrenRef = React.useRef(null);
|
|
95
|
+
const translation = React.useRef([0, 0, 0]);
|
|
93
96
|
React.useLayoutEffect(() => {
|
|
94
97
|
if (!anchor) return;
|
|
95
98
|
childrenRef.current.updateWorldMatrix(true, true);
|
|
@@ -133,6 +136,8 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
|
|
|
133
136
|
if (onDragEnd) onDragEnd();
|
|
134
137
|
invalidate();
|
|
135
138
|
},
|
|
139
|
+
translation,
|
|
140
|
+
translationLimits,
|
|
136
141
|
rotationLimits,
|
|
137
142
|
axisColors,
|
|
138
143
|
hoveredColor,
|
|
@@ -140,9 +145,10 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
|
|
|
140
145
|
scale,
|
|
141
146
|
lineWidth,
|
|
142
147
|
fixed,
|
|
148
|
+
displayValues,
|
|
143
149
|
depthTest,
|
|
144
150
|
userData
|
|
145
|
-
}), [onDragStart, onDrag, onDragEnd, rotationLimits, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, userData, autoTransform]);
|
|
151
|
+
}), [onDragStart, onDrag, onDragEnd, translation, translationLimits, rotationLimits, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, displayValues, userData, autoTransform]);
|
|
146
152
|
const vec = new THREE.Vector3();
|
|
147
153
|
useFrame(state => {
|
|
148
154
|
if (fixed) {
|