@react-three/drei 9.25.1 → 9.26.0
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/README.md +278 -199
- package/core/CatmullRomLine.cjs.js +1 -1
- package/core/Center.cjs.js +1 -1
- package/core/Center.d.ts +4 -3
- package/core/Center.js +2 -1
- package/core/CubicBezierLine.cjs.js +1 -1
- package/core/GizmoViewport.cjs.js +1 -1
- package/core/GizmoViewport.js +1 -1
- package/core/Line.cjs.js +1 -1
- package/core/Line.d.ts +1 -1
- package/core/Line.js +4 -3
- package/core/MeshReflectorMaterial.d.ts +2 -1
- package/core/QuadraticBezierLine.cjs.js +1 -1
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.js +7 -0
- package/core/pivotControls/AxisArrow.cjs.js +1 -0
- package/core/pivotControls/AxisArrow.d.ts +7 -0
- package/core/pivotControls/AxisArrow.js +137 -0
- package/core/pivotControls/AxisRotator.cjs.js +1 -0
- package/core/pivotControls/AxisRotator.d.ts +7 -0
- package/core/pivotControls/AxisRotator.js +177 -0
- package/core/pivotControls/PlaneSlider.cjs.js +1 -0
- package/core/pivotControls/PlaneSlider.d.ts +7 -0
- package/core/pivotControls/PlaneSlider.js +122 -0
- package/core/pivotControls/context.cjs.js +1 -0
- package/core/pivotControls/context.d.ts +19 -0
- package/core/pivotControls/context.js +5 -0
- package/core/pivotControls/index.cjs.js +1 -0
- package/core/pivotControls/index.d.ts +30 -0
- package/core/pivotControls/index.js +201 -0
- package/core/useGLTF.d.ts +2 -2
- package/index.cjs.js +1 -1
- package/index.js +1 -0
- package/native/index.cjs.js +1 -1
- package/native/index.js +7 -0
- package/package.json +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +5 -0
|
@@ -0,0 +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 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),l=a(t);const s=new l.Ray,c=new l.Vector3,u=new l.Matrix4;exports.PlaneSlider=({dir1:e,dir2:t,axis:a})=>{const{depthTest:p,scale:d,lineWidth:m,fixed:f,axisColors:P,hoveredColor:b,opacity:g,onDragStart:x,onDrag:y,onDragEnd:h,userData:w}=i.useContext(o.context),O=r.useThree((e=>e.controls)),C=i.useRef(null),j=i.useRef(null),[M,k]=i.useState(!1),D=i.useCallback((e=>{e.stopPropagation();const t=e.point.clone(),r=(new l.Vector3).setFromMatrixPosition(C.current.matrixWorld),n=(new l.Vector3).setFromMatrixColumn(C.current.matrixWorld,2).normalize(),o=(new l.Plane).setFromNormalAndCoplanarPoint(n,r);j.current={clickPoint:t,plane:o},x(),O&&(O.enabled=!1),e.target.setPointerCapture(e.pointerId)}),[O,x]),v=i.useCallback((e=>{if(e.stopPropagation(),M||k(!0),j.current){const{clickPoint:t,plane:r}=j.current;s.copy(e.ray),s.intersectPlane(r,c),s.direction.negate(),s.intersectPlane(r,c),c.sub(t),u.makeTranslation(c.x,c.y,c.z),y(u)}}),[y,M]),E=i.useCallback((e=>{e.stopPropagation(),j.current=null,h(),O&&(O.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[O,h]),V=i.useCallback((e=>{e.stopPropagation(),k(!1)}),[]),q=i.useMemo((()=>{const r=e.clone().normalize(),n=t.clone().normalize();return(new l.Matrix4).makeBasis(r,n,r.clone().cross(n))}),[e,t]),z=f?1/7:d/7,F=f?.225:.225*d,T=M?b:P[a],S=i.useMemo((()=>[new l.Vector3(0,0,0),new l.Vector3(0,F,0),new l.Vector3(F,F,0),new l.Vector3(F,0,0),new l.Vector3(0,0,0)]),[F]);return i.createElement("group",{ref:C,matrix:q,matrixAutoUpdate:!1},i.createElement("group",{position:[1.7*z,1.7*z,0]},i.createElement("mesh",{visible:!0,onPointerDown:D,onPointerMove:v,onPointerUp:E,onPointerOut:V,scale:F,userData:w},i.createElement("planeGeometry",null),i.createElement("meshBasicMaterial",{transparent:!0,depthTest:p,color:T,polygonOffset:!0,polygonOffsetFactor:-10,side:l.DoubleSide})),i.createElement(n.Line,{position:[-F/2,-F/2,0],transparent:!0,depthTest:p,points:S,lineWidth:m,color:T,opacity:g,polygonOffset:!0,polygonOffsetFactor:-10,userData:w})))};
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as THREE from 'three';
|
|
3
|
+
import { useThree } from '@react-three/fiber';
|
|
4
|
+
import { Line } from '../Line.js';
|
|
5
|
+
import { context } from './context.js';
|
|
6
|
+
|
|
7
|
+
const ray = new THREE.Ray();
|
|
8
|
+
const intersection = new THREE.Vector3();
|
|
9
|
+
const offsetMatrix = new THREE.Matrix4();
|
|
10
|
+
const PlaneSlider = ({
|
|
11
|
+
dir1,
|
|
12
|
+
dir2,
|
|
13
|
+
axis
|
|
14
|
+
}) => {
|
|
15
|
+
const {
|
|
16
|
+
depthTest,
|
|
17
|
+
scale,
|
|
18
|
+
lineWidth,
|
|
19
|
+
fixed,
|
|
20
|
+
axisColors,
|
|
21
|
+
hoveredColor,
|
|
22
|
+
opacity,
|
|
23
|
+
onDragStart,
|
|
24
|
+
onDrag,
|
|
25
|
+
onDragEnd,
|
|
26
|
+
userData
|
|
27
|
+
} = React.useContext(context); // @ts-expect-error new in @react-three/fiber@7.0.5
|
|
28
|
+
|
|
29
|
+
const camControls = useThree(state => state.controls);
|
|
30
|
+
const objRef = React.useRef(null);
|
|
31
|
+
const clickInfo = React.useRef(null);
|
|
32
|
+
const [isHovered, setIsHovered] = React.useState(false);
|
|
33
|
+
const onPointerDown = React.useCallback(e => {
|
|
34
|
+
e.stopPropagation();
|
|
35
|
+
const clickPoint = e.point.clone();
|
|
36
|
+
const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
|
|
37
|
+
const normal = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 2).normalize();
|
|
38
|
+
const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, origin);
|
|
39
|
+
clickInfo.current = {
|
|
40
|
+
clickPoint,
|
|
41
|
+
plane
|
|
42
|
+
};
|
|
43
|
+
onDragStart();
|
|
44
|
+
camControls && (camControls.enabled = false); // @ts-ignore
|
|
45
|
+
|
|
46
|
+
e.target.setPointerCapture(e.pointerId);
|
|
47
|
+
}, [camControls, onDragStart]);
|
|
48
|
+
const onPointerMove = React.useCallback(e => {
|
|
49
|
+
e.stopPropagation();
|
|
50
|
+
if (!isHovered) setIsHovered(true);
|
|
51
|
+
|
|
52
|
+
if (clickInfo.current) {
|
|
53
|
+
const {
|
|
54
|
+
clickPoint,
|
|
55
|
+
plane
|
|
56
|
+
} = clickInfo.current;
|
|
57
|
+
ray.copy(e.ray);
|
|
58
|
+
ray.intersectPlane(plane, intersection);
|
|
59
|
+
ray.direction.negate();
|
|
60
|
+
ray.intersectPlane(plane, intersection);
|
|
61
|
+
intersection.sub(clickPoint);
|
|
62
|
+
offsetMatrix.makeTranslation(intersection.x, intersection.y, intersection.z);
|
|
63
|
+
onDrag(offsetMatrix);
|
|
64
|
+
}
|
|
65
|
+
}, [onDrag, isHovered]);
|
|
66
|
+
const onPointerUp = React.useCallback(e => {
|
|
67
|
+
e.stopPropagation();
|
|
68
|
+
clickInfo.current = null;
|
|
69
|
+
onDragEnd();
|
|
70
|
+
camControls && (camControls.enabled = true); // @ts-ignore
|
|
71
|
+
|
|
72
|
+
e.target.releasePointerCapture(e.pointerId);
|
|
73
|
+
}, [camControls, onDragEnd]);
|
|
74
|
+
const onPointerOut = React.useCallback(e => {
|
|
75
|
+
e.stopPropagation();
|
|
76
|
+
setIsHovered(false);
|
|
77
|
+
}, []);
|
|
78
|
+
const matrixL = React.useMemo(() => {
|
|
79
|
+
const dir1N = dir1.clone().normalize();
|
|
80
|
+
const dir2N = dir2.clone().normalize();
|
|
81
|
+
return new THREE.Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
|
|
82
|
+
}, [dir1, dir2]);
|
|
83
|
+
const pos1 = fixed ? 1 / 7 : scale / 7;
|
|
84
|
+
const length = fixed ? 0.225 : scale * 0.225;
|
|
85
|
+
const color = isHovered ? hoveredColor : axisColors[axis];
|
|
86
|
+
const points = React.useMemo(() => [new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, length, 0), new THREE.Vector3(length, length, 0), new THREE.Vector3(length, 0, 0), new THREE.Vector3(0, 0, 0)], [length]);
|
|
87
|
+
return /*#__PURE__*/React.createElement("group", {
|
|
88
|
+
ref: objRef,
|
|
89
|
+
matrix: matrixL,
|
|
90
|
+
matrixAutoUpdate: false
|
|
91
|
+
}, /*#__PURE__*/React.createElement("group", {
|
|
92
|
+
position: [pos1 * 1.7, pos1 * 1.7, 0]
|
|
93
|
+
}, /*#__PURE__*/React.createElement("mesh", {
|
|
94
|
+
visible: true,
|
|
95
|
+
onPointerDown: onPointerDown,
|
|
96
|
+
onPointerMove: onPointerMove,
|
|
97
|
+
onPointerUp: onPointerUp,
|
|
98
|
+
onPointerOut: onPointerOut,
|
|
99
|
+
scale: length,
|
|
100
|
+
userData: userData
|
|
101
|
+
}, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
|
|
102
|
+
transparent: true,
|
|
103
|
+
depthTest: depthTest,
|
|
104
|
+
color: color,
|
|
105
|
+
polygonOffset: true,
|
|
106
|
+
polygonOffsetFactor: -10,
|
|
107
|
+
side: THREE.DoubleSide
|
|
108
|
+
})), /*#__PURE__*/React.createElement(Line, {
|
|
109
|
+
position: [-length / 2, -length / 2, 0],
|
|
110
|
+
transparent: true,
|
|
111
|
+
depthTest: depthTest,
|
|
112
|
+
points: points,
|
|
113
|
+
lineWidth: lineWidth,
|
|
114
|
+
color: color,
|
|
115
|
+
opacity: opacity,
|
|
116
|
+
polygonOffset: true,
|
|
117
|
+
polygonOffsetFactor: -10,
|
|
118
|
+
userData: userData
|
|
119
|
+
})));
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export { PlaneSlider };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";function e(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)}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")).createContext(null);exports.context=t;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
export declare type PivotContext = {
|
|
4
|
+
onDragStart: () => void;
|
|
5
|
+
onDrag: (mdW: THREE.Matrix4) => void;
|
|
6
|
+
onDragEnd: () => void;
|
|
7
|
+
axisColors: [string | number, string | number, string | number];
|
|
8
|
+
hoveredColor: string | number;
|
|
9
|
+
opacity: number;
|
|
10
|
+
scale: number;
|
|
11
|
+
lineWidth: number;
|
|
12
|
+
fixed: boolean;
|
|
13
|
+
depthTest: boolean;
|
|
14
|
+
userData?: {
|
|
15
|
+
[key: string]: any;
|
|
16
|
+
};
|
|
17
|
+
annotationsClass?: string;
|
|
18
|
+
};
|
|
19
|
+
export declare const context: React.Context<PivotContext>;
|
|
@@ -0,0 +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;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Size } from '@react-three/fiber';
|
|
4
|
+
export declare const calculateScaleFactor: (point3: THREE.Vector3, radiusPx: number, camera: THREE.Camera, size: Size) => number;
|
|
5
|
+
declare type PivotControlsProps = {
|
|
6
|
+
scale?: number;
|
|
7
|
+
lineWidth?: number;
|
|
8
|
+
fixed?: boolean;
|
|
9
|
+
offset?: [number, number, number];
|
|
10
|
+
rotation?: [number, number, number];
|
|
11
|
+
matrix?: THREE.Matrix4;
|
|
12
|
+
anchor?: [number, number, number];
|
|
13
|
+
autoTransform?: boolean;
|
|
14
|
+
activeAxes?: [boolean, boolean, boolean];
|
|
15
|
+
axisColors?: [string | number, string | number, string | number];
|
|
16
|
+
hoveredColor?: string | number;
|
|
17
|
+
annotationsClass?: string;
|
|
18
|
+
onDragStart?: () => void;
|
|
19
|
+
onDrag?: (l: THREE.Matrix4, deltaL: THREE.Matrix4, w: THREE.Matrix4, deltaW: THREE.Matrix4) => void;
|
|
20
|
+
onDragEnd?: () => void;
|
|
21
|
+
depthTest?: boolean;
|
|
22
|
+
opacity?: number;
|
|
23
|
+
visible?: boolean;
|
|
24
|
+
userData?: {
|
|
25
|
+
[key: string]: any;
|
|
26
|
+
};
|
|
27
|
+
children?: React.ReactNode;
|
|
28
|
+
};
|
|
29
|
+
export declare const PivotControls: React.ForwardRefExoticComponent<PivotControlsProps & React.RefAttributes<THREE.Group>>;
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { extend, useFrame } from '@react-three/fiber';
|
|
4
|
+
import { MeshLine, MeshLineMaterial } from 'meshline';
|
|
5
|
+
import { AxisArrow } from './AxisArrow.js';
|
|
6
|
+
import { PlaneSlider } from './PlaneSlider.js';
|
|
7
|
+
import { AxisRotator } from './AxisRotator.js';
|
|
8
|
+
import { context } from './context.js';
|
|
9
|
+
|
|
10
|
+
const tV0 = new THREE.Vector3();
|
|
11
|
+
const tV1 = new THREE.Vector3();
|
|
12
|
+
const tV2 = new THREE.Vector3();
|
|
13
|
+
|
|
14
|
+
const getPoint2 = (point3, camera, size) => {
|
|
15
|
+
const widthHalf = size.width / 2;
|
|
16
|
+
const heightHalf = size.height / 2;
|
|
17
|
+
camera.updateMatrixWorld(false);
|
|
18
|
+
const vector = point3.project(camera);
|
|
19
|
+
vector.x = vector.x * widthHalf + widthHalf;
|
|
20
|
+
vector.y = -(vector.y * heightHalf) + heightHalf;
|
|
21
|
+
return vector;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const getPoint3 = (point2, camera, size, zValue = 1) => {
|
|
25
|
+
const vector = tV0.set(point2.x / size.width * 2 - 1, -(point2.y / size.height) * 2 + 1, zValue);
|
|
26
|
+
vector.unproject(camera);
|
|
27
|
+
return vector;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
const calculateScaleFactor = (point3, radiusPx, camera, size) => {
|
|
31
|
+
const point2 = getPoint2(tV2.copy(point3), camera, size);
|
|
32
|
+
let scale = 0;
|
|
33
|
+
|
|
34
|
+
for (let i = 0; i < 2; ++i) {
|
|
35
|
+
const point2off = tV1.copy(point2).setComponent(i, point2.getComponent(i) + radiusPx);
|
|
36
|
+
const point3off = getPoint3(point2off, camera, size, point2off.z);
|
|
37
|
+
scale = Math.max(scale, point3.distanceTo(point3off));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return scale;
|
|
41
|
+
};
|
|
42
|
+
const mL0 = new THREE.Matrix4();
|
|
43
|
+
const mW0 = new THREE.Matrix4();
|
|
44
|
+
const mP = new THREE.Matrix4();
|
|
45
|
+
const mPInv = new THREE.Matrix4();
|
|
46
|
+
const mW = new THREE.Matrix4();
|
|
47
|
+
const mL = new THREE.Matrix4();
|
|
48
|
+
const mL0Inv = new THREE.Matrix4();
|
|
49
|
+
const mdL = new THREE.Matrix4();
|
|
50
|
+
const bb = new THREE.Box3();
|
|
51
|
+
const bbObj = new THREE.Box3();
|
|
52
|
+
const vCenter = new THREE.Vector3();
|
|
53
|
+
const vSize = new THREE.Vector3();
|
|
54
|
+
const vAnchorOffset = new THREE.Vector3();
|
|
55
|
+
const vPosition = new THREE.Vector3();
|
|
56
|
+
const xDir = new THREE.Vector3(1, 0, 0);
|
|
57
|
+
const yDir = new THREE.Vector3(0, 1, 0);
|
|
58
|
+
const zDir = new THREE.Vector3(0, 0, 1);
|
|
59
|
+
const PivotControls = /*#__PURE__*/React.forwardRef(({
|
|
60
|
+
matrix,
|
|
61
|
+
onDragStart,
|
|
62
|
+
onDrag,
|
|
63
|
+
onDragEnd,
|
|
64
|
+
autoTransform = true,
|
|
65
|
+
anchor,
|
|
66
|
+
activeAxes = [true, true, true],
|
|
67
|
+
offset = [0, 0, 0],
|
|
68
|
+
rotation = [0, 0, 0],
|
|
69
|
+
scale = 1,
|
|
70
|
+
lineWidth = 4,
|
|
71
|
+
fixed = false,
|
|
72
|
+
depthTest = true,
|
|
73
|
+
axisColors = ['#ff2060', '#20df80', '#2080ff'],
|
|
74
|
+
hoveredColor = '#ffff40',
|
|
75
|
+
opacity = 1,
|
|
76
|
+
visible = true,
|
|
77
|
+
userData,
|
|
78
|
+
children
|
|
79
|
+
}, fRef) => {
|
|
80
|
+
extend({
|
|
81
|
+
MeshLine,
|
|
82
|
+
MeshLineMaterial
|
|
83
|
+
});
|
|
84
|
+
const parentRef = React.useRef(null);
|
|
85
|
+
const ref = React.useRef(null);
|
|
86
|
+
const gizmoRef = React.useRef(null);
|
|
87
|
+
const childrenRef = React.useRef(null);
|
|
88
|
+
React.useLayoutEffect(() => {
|
|
89
|
+
if (!anchor) return;
|
|
90
|
+
childrenRef.current.updateWorldMatrix(true, true);
|
|
91
|
+
mPInv.copy(childrenRef.current.matrixWorld).invert();
|
|
92
|
+
bb.makeEmpty();
|
|
93
|
+
childrenRef.current.traverse(obj => {
|
|
94
|
+
if (!obj.geometry) return;
|
|
95
|
+
if (!obj.geometry.boundingBox) obj.geometry.computeBoundingBox();
|
|
96
|
+
mL.copy(obj.matrixWorld).premultiply(mPInv);
|
|
97
|
+
bbObj.copy(obj.geometry.boundingBox);
|
|
98
|
+
bbObj.applyMatrix4(mL);
|
|
99
|
+
bb.union(bbObj);
|
|
100
|
+
});
|
|
101
|
+
vCenter.copy(bb.max).add(bb.min).multiplyScalar(0.5);
|
|
102
|
+
vSize.copy(bb.max).sub(bb.min).multiplyScalar(0.5);
|
|
103
|
+
vAnchorOffset.copy(vSize).multiply(new THREE.Vector3(...anchor)).add(vCenter);
|
|
104
|
+
vPosition.set(...offset).add(vAnchorOffset);
|
|
105
|
+
gizmoRef.current.position.copy(vPosition);
|
|
106
|
+
});
|
|
107
|
+
const config = React.useMemo(() => ({
|
|
108
|
+
onDragStart: () => {
|
|
109
|
+
mL0.copy(ref.current.matrix);
|
|
110
|
+
mW0.copy(ref.current.matrixWorld);
|
|
111
|
+
onDragStart && onDragStart();
|
|
112
|
+
},
|
|
113
|
+
onDrag: mdW => {
|
|
114
|
+
mP.copy(parentRef.current.matrixWorld);
|
|
115
|
+
mPInv.copy(mP).invert(); // After applying the delta
|
|
116
|
+
|
|
117
|
+
mW.copy(mW0).premultiply(mdW);
|
|
118
|
+
mL.copy(mW).premultiply(mPInv);
|
|
119
|
+
mL0Inv.copy(mL0).invert();
|
|
120
|
+
mdL.copy(mL).multiply(mL0Inv);
|
|
121
|
+
if (autoTransform) ref.current.matrix.copy(mL);
|
|
122
|
+
onDrag && onDrag(mL, mdL, mW, mdW);
|
|
123
|
+
},
|
|
124
|
+
onDragEnd: () => onDragEnd && onDragEnd(),
|
|
125
|
+
axisColors,
|
|
126
|
+
hoveredColor,
|
|
127
|
+
opacity,
|
|
128
|
+
scale,
|
|
129
|
+
lineWidth,
|
|
130
|
+
fixed,
|
|
131
|
+
depthTest,
|
|
132
|
+
userData
|
|
133
|
+
}), [onDragStart, onDrag, onDragEnd, depthTest, scale, lineWidth, fixed, ...axisColors, hoveredColor, opacity, userData]);
|
|
134
|
+
const vec = new THREE.Vector3();
|
|
135
|
+
useFrame(state => {
|
|
136
|
+
if (fixed) {
|
|
137
|
+
const sf = calculateScaleFactor(gizmoRef.current.getWorldPosition(vec), scale, state.camera, state.size);
|
|
138
|
+
|
|
139
|
+
if (gizmoRef.current) {
|
|
140
|
+
var _gizmoRef$current, _gizmoRef$current2, _gizmoRef$current3;
|
|
141
|
+
|
|
142
|
+
if (((_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.scale.x) !== sf || ((_gizmoRef$current2 = gizmoRef.current) == null ? void 0 : _gizmoRef$current2.scale.y) !== sf || ((_gizmoRef$current3 = gizmoRef.current) == null ? void 0 : _gizmoRef$current3.scale.z) !== sf) {
|
|
143
|
+
gizmoRef.current.scale.setScalar(sf);
|
|
144
|
+
state.invalidate();
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
React.useImperativeHandle(fRef, () => ref.current, []);
|
|
150
|
+
return /*#__PURE__*/React.createElement(context.Provider, {
|
|
151
|
+
value: config
|
|
152
|
+
}, /*#__PURE__*/React.createElement("group", {
|
|
153
|
+
ref: parentRef
|
|
154
|
+
}, /*#__PURE__*/React.createElement("group", {
|
|
155
|
+
ref: ref,
|
|
156
|
+
matrix: matrix,
|
|
157
|
+
matrixAutoUpdate: false
|
|
158
|
+
}, /*#__PURE__*/React.createElement("group", {
|
|
159
|
+
visible: visible,
|
|
160
|
+
ref: gizmoRef,
|
|
161
|
+
position: offset,
|
|
162
|
+
rotation: rotation
|
|
163
|
+
}, activeAxes[0] && /*#__PURE__*/React.createElement(AxisArrow, {
|
|
164
|
+
axis: 0,
|
|
165
|
+
direction: xDir
|
|
166
|
+
}), activeAxes[1] && /*#__PURE__*/React.createElement(AxisArrow, {
|
|
167
|
+
axis: 1,
|
|
168
|
+
direction: yDir
|
|
169
|
+
}), activeAxes[2] && /*#__PURE__*/React.createElement(AxisArrow, {
|
|
170
|
+
axis: 2,
|
|
171
|
+
direction: zDir
|
|
172
|
+
}), activeAxes[0] && activeAxes[1] && /*#__PURE__*/React.createElement(PlaneSlider, {
|
|
173
|
+
axis: 2,
|
|
174
|
+
dir1: xDir,
|
|
175
|
+
dir2: yDir
|
|
176
|
+
}), activeAxes[0] && activeAxes[2] && /*#__PURE__*/React.createElement(PlaneSlider, {
|
|
177
|
+
axis: 1,
|
|
178
|
+
dir1: zDir,
|
|
179
|
+
dir2: xDir
|
|
180
|
+
}), activeAxes[2] && activeAxes[1] && /*#__PURE__*/React.createElement(PlaneSlider, {
|
|
181
|
+
axis: 0,
|
|
182
|
+
dir1: yDir,
|
|
183
|
+
dir2: zDir
|
|
184
|
+
}), activeAxes[0] && activeAxes[1] && /*#__PURE__*/React.createElement(AxisRotator, {
|
|
185
|
+
axis: 2,
|
|
186
|
+
dir1: xDir,
|
|
187
|
+
dir2: yDir
|
|
188
|
+
}), activeAxes[0] && activeAxes[2] && /*#__PURE__*/React.createElement(AxisRotator, {
|
|
189
|
+
axis: 1,
|
|
190
|
+
dir1: zDir,
|
|
191
|
+
dir2: xDir
|
|
192
|
+
}), activeAxes[2] && activeAxes[1] && /*#__PURE__*/React.createElement(AxisRotator, {
|
|
193
|
+
axis: 0,
|
|
194
|
+
dir1: yDir,
|
|
195
|
+
dir2: zDir
|
|
196
|
+
})), /*#__PURE__*/React.createElement("group", {
|
|
197
|
+
ref: childrenRef
|
|
198
|
+
}, children))));
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
export { PivotControls, calculateScaleFactor };
|
package/core/useGLTF.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { GLTFLoader } from 'three-stdlib';
|
|
2
|
-
export declare function useGLTF<T extends string | string[]>(path: T, useDraco?: boolean | string, useMeshOpt?: boolean, extendLoader?: (loader: GLTFLoader) => void): T extends any[] ?
|
|
1
|
+
import { GLTFLoader, GLTF } from 'three-stdlib';
|
|
2
|
+
export declare function useGLTF<T extends string | string[]>(path: T, useDraco?: boolean | string, useMeshOpt?: boolean, extendLoader?: (loader: GLTFLoader) => void): T extends any[] ? GLTF[] : GLTF;
|
|
3
3
|
export declare namespace useGLTF {
|
|
4
4
|
var preload: (path: string | string[], useDraco?: string | boolean, useMeshOpt?: boolean, extendLoader?: ((loader: GLTFLoader) => void) | undefined) => undefined;
|
|
5
5
|
var clear: (input: string | string[]) => void;
|