@react-three/drei 8.3.1 → 8.6.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/README.md +50 -1
- package/core/Edges.cjs.js +1 -0
- package/core/Edges.d.ts +8 -0
- package/core/Edges.js +35 -0
- package/core/GizmoViewcube.cjs.js +1 -1
- package/core/GizmoViewcube.js +1 -1
- package/core/Instances.d.ts +1 -1
- package/core/MeshReflectorMaterial.cjs.js +1 -1
- package/core/MeshReflectorMaterial.js +1 -1
- package/core/TransformControls.cjs.js +1 -1
- package/core/TransformControls.d.ts +2 -1
- package/core/TransformControls.js +2 -1
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +2 -0
- package/core/index.js +2 -0
- package/core/useKTX2.cjs.js +1 -0
- package/core/useKTX2.d.ts +8 -0
- package/core/useKTX2.js +39 -0
- package/index.cjs.js +1 -1
- package/index.js +3 -0
- package/native/index.cjs.js +1 -1
- package/native/index.js +2 -0
- package/package.json +1 -1
- package/web/PresentationControls.cjs.js +1 -1
- package/web/PresentationControls.d.ts +2 -1
- package/web/PresentationControls.js +5 -4
- package/web/Select.cjs.js +1 -0
- package/web/Select.d.ts +12 -0
- package/web/Select.js +170 -0
- package/web/index.cjs.js +1 -1
- package/web/index.d.ts +1 -0
- package/web/index.js +4 -0
package/native/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../core/Billboard.cjs.js"),r=require("../core/QuadraticBezierLine.cjs.js"),s=require("../core/CubicBezierLine.cjs.js"),o=require("../core/Line.cjs.js"),t=require("../core/PositionalAudio.cjs.js"),i=require("../core/Text.cjs.js"),c=require("../core/Effects.cjs.js"),u=require("../core/GradientTexture.cjs.js"),a=require("../core/Image.cjs.js"),j=require("../core/
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../core/Billboard.cjs.js"),r=require("../core/QuadraticBezierLine.cjs.js"),s=require("../core/CubicBezierLine.cjs.js"),o=require("../core/Line.cjs.js"),t=require("../core/PositionalAudio.cjs.js"),i=require("../core/Text.cjs.js"),c=require("../core/Effects.cjs.js"),u=require("../core/GradientTexture.cjs.js"),a=require("../core/Image.cjs.js"),j=require("../core/Edges.cjs.js"),n=require("../core/OrthographicCamera.cjs.js"),p=require("../core/PerspectiveCamera.cjs.js"),l=require("../core/CubeCamera.cjs.js"),x=require("../core/DeviceOrientationControls.cjs.js"),q=require("../core/FlyControls.cjs.js"),d=require("../core/MapControls.cjs.js"),C=require("../core/OrbitControls.cjs.js"),h=require("../core/TrackballControls.cjs.js"),m=require("../core/ArcballControls.cjs.js"),B=require("../core/TransformControls.cjs.js"),b=require("../core/PointerLockControls.cjs.js"),M=require("../core/FirstPersonControls.cjs.js"),P=require("../core/GizmoHelper.cjs.js"),S=require("../core/GizmoViewcube.cjs.js"),f=require("../core/GizmoViewport.cjs.js"),T=require("../core/useCubeTexture.cjs.js"),g=require("../core/useFBX.cjs.js"),v=require("../core/useGLTF.cjs.js"),L=require("../core/useProgress.cjs.js"),A=require("../core/useTexture.cjs.js"),G=require("../core/useKTX2.cjs.js"),k=require("../core/Stats.cjs.js"),D=require("../core/useDepthBuffer.cjs.js"),F=require("../core/useAspect.cjs.js"),w=require("../core/useCamera.cjs.js"),z=require("../core/useDetectGPU.cjs.js"),I=require("../core/useHelper.cjs.js"),O=require("../core/useBVH.cjs.js"),E=require("../core/useContextBridge.cjs.js"),R=require("../core/useAnimations.cjs.js"),y=require("../core/useFBO.cjs.js"),H=require("../core/useIntersect.cjs.js"),V=require("../core/CurveModifier.cjs.js"),Q=require("../core/MeshDistortMaterial.cjs.js"),X=require("../core/MeshWobbleMaterial.cjs.js"),K=require("../core/MeshReflectorMaterial.cjs.js"),W=require("../core/PointMaterial.cjs.js"),N=require("../core/shaderMaterial.cjs.js"),U=require("../core/softShadows.cjs.js"),_=require("../core/shapes.cjs.js"),J=require("../core/RoundedBox.cjs.js"),Y=require("../core/ScreenQuad.cjs.js"),Z=require("../core/Center.cjs.js"),$=require("../core/Bounds.cjs.js"),ee=require("../core/CameraShake.cjs.js"),re=require("../core/Float.cjs.js"),se=require("../core/Stage.cjs.js"),oe=require("../core/Backdrop.cjs.js"),te=require("../core/Shadow.cjs.js"),ie=require("../core/ContactShadows.cjs.js"),ce=require("../core/Reflector.cjs.js"),ue=require("../core/SpotLight.cjs.js"),ae=require("../core/Environment.cjs.js"),je=require("../core/Sky.cjs.js"),ne=require("../core/Stars.cjs.js"),pe=require("../core/Cloud.cjs.js"),le=require("../core/useMatcapTexture.cjs.js"),xe=require("../core/useNormalTexture.cjs.js"),qe=require("../core/Points.cjs.js"),de=require("../core/Instances.cjs.js"),Ce=require("../core/Segments.cjs.js"),he=require("../core/Detailed.cjs.js"),me=require("../core/Preload.cjs.js"),Be=require("../core/BakeShadows.cjs.js"),be=require("../core/meshBounds.cjs.js"),Me=require("../core/AdaptiveDpr.cjs.js"),Pe=require("../core/AdaptiveEvents.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("lodash.omit"),require("lodash.pick"),require("zustand"),require("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("use-asset"),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.Line=o.Line,exports.PositionalAudio=t.PositionalAudio,exports.Text=i.Text,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=u.GradientTexture,exports.Image=a.Image,exports.Edges=j.Edges,exports.OrthographicCamera=n.OrthographicCamera,exports.PerspectiveCamera=p.PerspectiveCamera,exports.CubeCamera=l.CubeCamera,exports.DeviceOrientationControls=x.DeviceOrientationControls,exports.FlyControls=q.FlyControls,exports.MapControls=d.MapControls,exports.OrbitControls=C.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=m.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=b.PointerLockControls,exports.FirstPersonControls=M.FirstPersonControls,exports.GizmoHelper=P.GizmoHelper,exports.useGizmoContext=P.useGizmoContext,exports.GizmoViewcube=S.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=T.useCubeTexture,exports.useFBX=g.useFBX,exports.useGLTF=v.useGLTF,exports.useProgress=L.useProgress,exports.IsObject=A.IsObject,exports.useTexture=A.useTexture,exports.useKTX2=G.useKTX2,exports.Stats=k.Stats,exports.useDepthBuffer=D.useDepthBuffer,exports.useAspect=F.useAspect,exports.useCamera=w.useCamera,exports.useDetectGPU=z.useDetectGPU,exports.useHelper=I.useHelper,exports.useBVH=O.useBVH,exports.useContextBridge=E.useContextBridge,exports.useAnimations=R.useAnimations,exports.useFBO=y.useFBO,exports.useIntersect=H.useIntersect,exports.CurveModifier=V.CurveModifier,exports.MeshDistortMaterial=Q.MeshDistortMaterial,exports.MeshWobbleMaterial=X.MeshWobbleMaterial,exports.MeshReflectorMaterial=K.MeshReflectorMaterial,exports.PointMaterial=W.PointMaterial,exports.PointMaterialImpl=W.PointMaterialImpl,exports.shaderMaterial=N.shaderMaterial,exports.softShadows=U.softShadows,exports.Box=_.Box,exports.Circle=_.Circle,exports.Cone=_.Cone,exports.Cylinder=_.Cylinder,exports.Dodecahedron=_.Dodecahedron,exports.Extrude=_.Extrude,exports.Icosahedron=_.Icosahedron,exports.Lathe=_.Lathe,exports.Octahedron=_.Octahedron,exports.Plane=_.Plane,exports.Polyhedron=_.Polyhedron,exports.Ring=_.Ring,exports.Sphere=_.Sphere,exports.Tetrahedron=_.Tetrahedron,exports.Torus=_.Torus,exports.TorusKnot=_.TorusKnot,exports.Tube=_.Tube,exports.RoundedBox=J.RoundedBox,exports.ScreenQuad=Y.ScreenQuad,exports.Center=Z.Center,exports.Bounds=$.Bounds,exports.useBounds=$.useBounds,exports.CameraShake=ee.CameraShake,exports.Float=re.Float,exports.Stage=se.Stage,exports.Backdrop=oe.Backdrop,exports.Shadow=te.Shadow,exports.ContactShadows=ie.ContactShadows,exports.Reflector=ce.Reflector,exports.SpotLight=ue.SpotLight,exports.Environment=ae.Environment,exports.Sky=je.Sky,exports.calcPosFromAngles=je.calcPosFromAngles,exports.Stars=ne.Stars,exports.Cloud=pe.Cloud,exports.useMatcapTexture=le.useMatcapTexture,exports.useNormalTexture=xe.useNormalTexture,exports.Point=qe.Point,exports.Points=qe.Points,exports.PointsBuffer=qe.PointsBuffer,exports.Instance=de.Instance,exports.Instances=de.Instances,exports.Merged=de.Merged,exports.Segment=Ce.Segment,exports.Segments=Ce.Segments,exports.Detailed=he.Detailed,exports.Preload=me.Preload,exports.BakeShadows=Be.BakeShadows,exports.meshBounds=be.meshBounds,exports.AdaptiveDpr=Me.AdaptiveDpr,exports.AdaptiveEvents=Pe.AdaptiveEvents;
|
package/native/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export { Text } from '../core/Text.js';
|
|
|
7
7
|
export { Effects, isWebGL2Available } from '../core/Effects.js';
|
|
8
8
|
export { GradientTexture } from '../core/GradientTexture.js';
|
|
9
9
|
export { Image } from '../core/Image.js';
|
|
10
|
+
export { Edges } from '../core/Edges.js';
|
|
10
11
|
export { OrthographicCamera } from '../core/OrthographicCamera.js';
|
|
11
12
|
export { PerspectiveCamera } from '../core/PerspectiveCamera.js';
|
|
12
13
|
export { CubeCamera } from '../core/CubeCamera.js';
|
|
@@ -27,6 +28,7 @@ export { useFBX } from '../core/useFBX.js';
|
|
|
27
28
|
export { useGLTF } from '../core/useGLTF.js';
|
|
28
29
|
export { useProgress } from '../core/useProgress.js';
|
|
29
30
|
export { IsObject, useTexture } from '../core/useTexture.js';
|
|
31
|
+
export { useKTX2 } from '../core/useKTX2.js';
|
|
30
32
|
export { Stats } from '../core/Stats.js';
|
|
31
33
|
export { useDepthBuffer } from '../core/useDepthBuffer.js';
|
|
32
34
|
export { useAspect } from '../core/useAspect.js';
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),o=require("@react-three/fiber"),n=require("@react-spring/three"),a=require("@use-gesture/react");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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)}var u=i(e),c=s(t);exports.PresentationControls=function({snap:e,global:t,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),o=require("@react-three/fiber"),n=require("@react-spring/three"),a=require("@use-gesture/react");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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)}var u=i(e),c=s(t);exports.PresentationControls=function({snap:e,global:t,cursor:i=!0,children:s,speed:l=1,rotation:f=[0,0,0],zoom:m=1,polar:d=[0,Math.PI/2],azimuth:g=[-1/0,1/0],config:p={mass:1,tension:170,friction:26}}){const{size:b,gl:h}=o.useThree(),M=c.useMemo((()=>[f[0]+d[0],f[0]+d[1]]),[f[0],d[0],d[1]]),y=c.useMemo((()=>[f[1]+g[0],f[1]+g[1]]),[f[1],g[0],g[1]]),E=c.useMemo((()=>[r.MathUtils.clamp(f[0],...M),r.MathUtils.clamp(f[1],...y),f[2]]),[f[0],f[1],f[2],M,y]),[v,j]=n.useSpring((()=>({scale:1,rotation:E,config:p})));c.useEffect((()=>{j.start({scale:1,rotation:E,config:p})}),[E]),c.useEffect((()=>{t&&i&&(h.domElement.style.cursor="grab")}),[t,i,h.domElement]);const O=a.useGesture({onHover:({last:e})=>{i&&!t&&(h.domElement.style.cursor=e?"auto":"grab")},onDrag:({down:t,delta:[o,n],memo:[a,s]=v.rotation.animation.to||E})=>{i&&(h.domElement.style.cursor=t?"grabbing":"grab"),o=r.MathUtils.clamp(s+o/b.width*Math.PI*l,...y),n=r.MathUtils.clamp(a+n/b.height*Math.PI*l,...M);const u=e&&!t&&"boolean"!=typeof e?e:p;return j.start({scale:t&&n>M[1]/2?m:1,rotation:e&&!t?E:[n,o,0],config:e=>"scale"===e?{...u,friction:3*u.friction}:u}),[n,o]}},{target:t?h.domElement:void 0});return c.createElement(n.a.group,u.default({},null==O?void 0:O(),v),s)};
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
declare type Props = {
|
|
3
3
|
snap?: boolean;
|
|
4
4
|
global?: boolean;
|
|
5
|
+
cursor?: boolean;
|
|
5
6
|
speed?: number;
|
|
6
7
|
zoom?: number;
|
|
7
8
|
rotation?: [number, number, number];
|
|
@@ -10,5 +11,5 @@ declare type Props = {
|
|
|
10
11
|
config?: any;
|
|
11
12
|
children?: React.ReactNode;
|
|
12
13
|
};
|
|
13
|
-
export declare function PresentationControls({ snap, global, children, speed, rotation, zoom, polar, azimuth, config, }: Props): JSX.Element;
|
|
14
|
+
export declare function PresentationControls({ snap, global, cursor, children, speed, rotation, zoom, polar, azimuth, config, }: Props): JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -8,6 +8,7 @@ import { useGesture } from '@use-gesture/react';
|
|
|
8
8
|
function PresentationControls({
|
|
9
9
|
snap,
|
|
10
10
|
global,
|
|
11
|
+
cursor = true,
|
|
11
12
|
children,
|
|
12
13
|
speed = 1,
|
|
13
14
|
rotation = [0, 0, 0],
|
|
@@ -38,20 +39,20 @@ function PresentationControls({
|
|
|
38
39
|
config
|
|
39
40
|
}), [rInitial]);
|
|
40
41
|
React.useEffect(() => {
|
|
41
|
-
if (global)
|
|
42
|
-
}, [global]);
|
|
42
|
+
if (global && cursor) gl.domElement.style.cursor = 'grab';
|
|
43
|
+
}, [global, cursor, gl.domElement]);
|
|
43
44
|
const bind = useGesture({
|
|
44
45
|
onHover: ({
|
|
45
46
|
last
|
|
46
47
|
}) => {
|
|
47
|
-
if (!global)
|
|
48
|
+
if (cursor && !global) gl.domElement.style.cursor = last ? 'auto' : 'grab';
|
|
48
49
|
},
|
|
49
50
|
onDrag: ({
|
|
50
51
|
down,
|
|
51
52
|
delta: [x, y],
|
|
52
53
|
memo: [oldY, oldX] = spring.rotation.animation.to || rInitial
|
|
53
54
|
}) => {
|
|
54
|
-
|
|
55
|
+
if (cursor) gl.domElement.style.cursor = down ? 'grabbing' : 'grab';
|
|
55
56
|
x = MathUtils.clamp(oldX + x / size.width * Math.PI * speed, ...rAzimuth);
|
|
56
57
|
y = MathUtils.clamp(oldY + y / size.height * Math.PI * speed, ...rPolar);
|
|
57
58
|
const sConfig = snap && !down && typeof snap !== 'boolean' ? snap : config;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),n=require("three"),r=require("three-stdlib"),o=require("@react-three/fiber"),i=require("zustand/shallow");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=l(e),c=s(t),a=s(n),d=l(i);const f=c.createContext([]);exports.Select=function({box:e,multiple:t,children:n,onChange:i,border:l="1px solid #55aaff",backgroundColor:s="rgba(75, 160, 255, 0.1)",...p}){const{camera:v,raycaster:b,gl:m,controls:y,size:h,get:x}=o.useThree(),[E,g]=c.useState(!1),[j,w]=c.useReducer(((e,{object:t,shift:n})=>void 0===t?[]:Array.isArray(t)?t:n?e.includes(t)?e.filter((e=>e!==t)):[t,...e]:e[0]===t?[]:[t]),[]);c.useEffect((()=>{null==i||i(j)}),[j]);const O=c.useCallback((e=>{e.stopPropagation(),w({object:e.object,shift:t&&e.shiftKey})}),[]),C=c.useCallback((e=>!E&&w({})),[E]),P=c.useRef(null);return c.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(v,P.current),o=document.createElement("div");o.style.pointerEvents="none",o.style.border=l,o.style.backgroundColor=s,o.style.position="fixed";const i=new a.Vector2,u=new a.Vector2,c=new a.Vector2,f=b.enabled,p=null==y?void 0:y.enabled;let E=!1;function g(e,t){var n;const{offsetX:r,offsetY:o}=null!==(n=null==b.computeOffsets?void 0:b.computeOffsets(e,x()))&&void 0!==n?n:e,{width:i,height:l}=h;t.set(r/i*2-1,-o/l*2+1)}function j(e){e.shiftKey&&(!function(e){var t;y&&(y.enabled=!1),b.enabled=!1,E=!0,null==(t=m.domElement.parentElement)||t.appendChild(o),o.style.left=`${e.clientX}px`,o.style.top=`${e.clientY}px`,o.style.width="0px",o.style.height="0px",i.x=e.clientX,i.y=e.clientY}(e),g(e,n.startPoint))}let O=[];function C(e){if(E){!function(e){c.x=Math.max(i.x,e.clientX),c.y=Math.max(i.y,e.clientY),u.x=Math.min(i.x,e.clientX),u.y=Math.min(i.y,e.clientY),o.style.left=`${u.x}px`,o.style.top=`${u.y}px`,o.style.width=c.x-u.x+"px",o.style.height=c.y-u.y+"px"}(e),g(e,n.endPoint);const t=n.select().sort((e=>e.uuid)).filter((e=>e.isMesh));d.default(t,O)||(O=t,w({object:t}))}}function M(e){var t;E&&E&&(y&&(y.enabled=p),b.enabled=f,E=!1,null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",j,{passive:!0}),document.addEventListener("pointermove",C,{passive:!0,capture:!0}),document.addEventListener("pointerup",M,{passive:!0}),()=>{document.removeEventListener("pointerdown",j),document.removeEventListener("pointermove",C),document.removeEventListener("pointerup",M)}}),[h,b,v,y,m]),c.createElement("group",u.default({ref:P,onClick:O,onPointerOver:()=>g(!0),onPointerOut:()=>g(!1),onPointerMissed:C},p),c.createElement(f.Provider,{value:j},n))},exports.useSelect=function(){return c.useContext(f)};
|
package/web/Select.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import * as THREE from 'three';
|
|
3
|
+
declare type Props = JSX.IntrinsicElements['group'] & {
|
|
4
|
+
multiple?: boolean;
|
|
5
|
+
box?: boolean;
|
|
6
|
+
border?: string;
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
onChange?: (selected: THREE.Object3D[]) => void;
|
|
9
|
+
};
|
|
10
|
+
export declare function Select({ box, multiple, children, onChange, border, backgroundColor, ...props }: Props): JSX.Element;
|
|
11
|
+
export declare function useSelect(): THREE.Object3D<THREE.Event>[];
|
|
12
|
+
export {};
|
package/web/Select.js
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as THREE from 'three';
|
|
4
|
+
import { SelectionBox } from 'three-stdlib';
|
|
5
|
+
import { useThree } from '@react-three/fiber';
|
|
6
|
+
import shallow from 'zustand/shallow';
|
|
7
|
+
|
|
8
|
+
const context = /*#__PURE__*/React.createContext([]);
|
|
9
|
+
function Select({
|
|
10
|
+
box,
|
|
11
|
+
multiple,
|
|
12
|
+
children,
|
|
13
|
+
onChange,
|
|
14
|
+
border = '1px solid #55aaff',
|
|
15
|
+
backgroundColor = 'rgba(75, 160, 255, 0.1)',
|
|
16
|
+
...props
|
|
17
|
+
}) {
|
|
18
|
+
// @ts-expect-error new in @react-three/fiber@7.0.5
|
|
19
|
+
const {
|
|
20
|
+
camera,
|
|
21
|
+
raycaster,
|
|
22
|
+
gl,
|
|
23
|
+
controls,
|
|
24
|
+
size,
|
|
25
|
+
get
|
|
26
|
+
} = useThree();
|
|
27
|
+
const [hovered, hover] = React.useState(false);
|
|
28
|
+
const [active, dispatch] = React.useReducer((state, {
|
|
29
|
+
object,
|
|
30
|
+
shift
|
|
31
|
+
}) => {
|
|
32
|
+
if (object === undefined) return [];else if (Array.isArray(object)) return object;else if (!shift) return state[0] === object ? [] : [object];else if (state.includes(object)) return state.filter(o => o !== object);else return [object, ...state];
|
|
33
|
+
}, []);
|
|
34
|
+
React.useEffect(() => void (onChange == null ? void 0 : onChange(active)), [active]);
|
|
35
|
+
const onClick = React.useCallback(e => {
|
|
36
|
+
e.stopPropagation();
|
|
37
|
+
dispatch({
|
|
38
|
+
object: e.object,
|
|
39
|
+
shift: multiple && e.shiftKey
|
|
40
|
+
});
|
|
41
|
+
}, []);
|
|
42
|
+
const onPointerMissed = React.useCallback(e => !hovered && dispatch({}), [hovered]);
|
|
43
|
+
const ref = React.useRef(null);
|
|
44
|
+
React.useEffect(() => {
|
|
45
|
+
if (!box || !multiple) return;
|
|
46
|
+
const selBox = new SelectionBox(camera, ref.current);
|
|
47
|
+
const element = document.createElement('div');
|
|
48
|
+
element.style.pointerEvents = 'none';
|
|
49
|
+
element.style.border = border;
|
|
50
|
+
element.style.backgroundColor = backgroundColor;
|
|
51
|
+
element.style.position = 'fixed';
|
|
52
|
+
const startPoint = new THREE.Vector2();
|
|
53
|
+
const pointTopLeft = new THREE.Vector2();
|
|
54
|
+
const pointBottomRight = new THREE.Vector2();
|
|
55
|
+
const oldRaycasterEnabled = raycaster.enabled;
|
|
56
|
+
const oldControlsEnabled = controls == null ? void 0 : controls.enabled;
|
|
57
|
+
let isDown = false;
|
|
58
|
+
|
|
59
|
+
function prepareRay(event, vec) {
|
|
60
|
+
var _raycaster$computeOff;
|
|
61
|
+
|
|
62
|
+
// https://github.com/pmndrs/react-three-fiber/pull/782
|
|
63
|
+
// Events trigger outside of canvas when moved
|
|
64
|
+
const {
|
|
65
|
+
offsetX,
|
|
66
|
+
offsetY
|
|
67
|
+
} = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, get())) !== null && _raycaster$computeOff !== void 0 ? _raycaster$computeOff : event;
|
|
68
|
+
const {
|
|
69
|
+
width,
|
|
70
|
+
height
|
|
71
|
+
} = size;
|
|
72
|
+
vec.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function onSelectStart(event) {
|
|
76
|
+
var _gl$domElement$parent;
|
|
77
|
+
|
|
78
|
+
if (controls) controls.enabled = false;
|
|
79
|
+
raycaster.enabled = false;
|
|
80
|
+
isDown = true;
|
|
81
|
+
(_gl$domElement$parent = gl.domElement.parentElement) == null ? void 0 : _gl$domElement$parent.appendChild(element);
|
|
82
|
+
element.style.left = `${event.clientX}px`;
|
|
83
|
+
element.style.top = `${event.clientY}px`;
|
|
84
|
+
element.style.width = '0px';
|
|
85
|
+
element.style.height = '0px';
|
|
86
|
+
startPoint.x = event.clientX;
|
|
87
|
+
startPoint.y = event.clientY;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
function onSelectMove(event) {
|
|
91
|
+
pointBottomRight.x = Math.max(startPoint.x, event.clientX);
|
|
92
|
+
pointBottomRight.y = Math.max(startPoint.y, event.clientY);
|
|
93
|
+
pointTopLeft.x = Math.min(startPoint.x, event.clientX);
|
|
94
|
+
pointTopLeft.y = Math.min(startPoint.y, event.clientY);
|
|
95
|
+
element.style.left = `${pointTopLeft.x}px`;
|
|
96
|
+
element.style.top = `${pointTopLeft.y}px`;
|
|
97
|
+
element.style.width = `${pointBottomRight.x - pointTopLeft.x}px`;
|
|
98
|
+
element.style.height = `${pointBottomRight.y - pointTopLeft.y}px`;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
function onSelectOver() {
|
|
102
|
+
if (isDown) {
|
|
103
|
+
var _element$parentElemen;
|
|
104
|
+
|
|
105
|
+
if (controls) controls.enabled = oldControlsEnabled;
|
|
106
|
+
raycaster.enabled = oldRaycasterEnabled;
|
|
107
|
+
isDown = false;
|
|
108
|
+
(_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.removeChild(element);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
function pointerDown(event) {
|
|
113
|
+
if (event.shiftKey) {
|
|
114
|
+
onSelectStart(event);
|
|
115
|
+
prepareRay(event, selBox.startPoint);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
let previous = [];
|
|
120
|
+
|
|
121
|
+
function pointerMove(event) {
|
|
122
|
+
if (isDown) {
|
|
123
|
+
onSelectMove(event);
|
|
124
|
+
prepareRay(event, selBox.endPoint);
|
|
125
|
+
const allSelected = selBox.select().sort(o => o.uuid).filter(o => o.isMesh);
|
|
126
|
+
|
|
127
|
+
if (!shallow(allSelected, previous)) {
|
|
128
|
+
previous = allSelected;
|
|
129
|
+
dispatch({
|
|
130
|
+
object: allSelected
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
function pointerUp(event) {
|
|
137
|
+
if (isDown) onSelectOver();
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
document.addEventListener('pointerdown', pointerDown, {
|
|
141
|
+
passive: true
|
|
142
|
+
});
|
|
143
|
+
document.addEventListener('pointermove', pointerMove, {
|
|
144
|
+
passive: true,
|
|
145
|
+
capture: true
|
|
146
|
+
});
|
|
147
|
+
document.addEventListener('pointerup', pointerUp, {
|
|
148
|
+
passive: true
|
|
149
|
+
});
|
|
150
|
+
return () => {
|
|
151
|
+
document.removeEventListener('pointerdown', pointerDown);
|
|
152
|
+
document.removeEventListener('pointermove', pointerMove);
|
|
153
|
+
document.removeEventListener('pointerup', pointerUp);
|
|
154
|
+
};
|
|
155
|
+
}, [size, raycaster, camera, controls, gl]);
|
|
156
|
+
return /*#__PURE__*/React.createElement("group", _extends({
|
|
157
|
+
ref: ref,
|
|
158
|
+
onClick: onClick,
|
|
159
|
+
onPointerOver: () => hover(true),
|
|
160
|
+
onPointerOut: () => hover(false),
|
|
161
|
+
onPointerMissed: onPointerMissed
|
|
162
|
+
}, props), /*#__PURE__*/React.createElement(context.Provider, {
|
|
163
|
+
value: active
|
|
164
|
+
}, children));
|
|
165
|
+
}
|
|
166
|
+
function useSelect() {
|
|
167
|
+
return React.useContext(context);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
export { Select, useSelect };
|
package/web/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Html.cjs.js"),r=require("./CycleRaycast.cjs.js"),s=require("./useCursor.cjs.js"),o=require("./Loader.cjs.js"),t=require("./ScrollControls.cjs.js"),i=require("./PresentationControls.cjs.js"),c=require("../core/Billboard.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Html.cjs.js"),r=require("./CycleRaycast.cjs.js"),s=require("./useCursor.cjs.js"),o=require("./Loader.cjs.js"),t=require("./ScrollControls.cjs.js"),i=require("./PresentationControls.cjs.js"),c=require("./Select.cjs.js"),u=require("../core/Billboard.cjs.js"),a=require("../core/QuadraticBezierLine.cjs.js"),j=require("../core/CubicBezierLine.cjs.js"),n=require("../core/Line.cjs.js"),p=require("../core/PositionalAudio.cjs.js"),l=require("../core/Text.cjs.js"),x=require("../core/Effects.cjs.js"),q=require("../core/GradientTexture.cjs.js"),d=require("../core/Image.cjs.js"),C=require("../core/Edges.cjs.js"),h=require("../core/OrthographicCamera.cjs.js"),m=require("../core/PerspectiveCamera.cjs.js"),S=require("../core/CubeCamera.cjs.js"),B=require("../core/DeviceOrientationControls.cjs.js"),b=require("../core/FlyControls.cjs.js"),P=require("../core/MapControls.cjs.js"),M=require("../core/OrbitControls.cjs.js"),f=require("../core/TrackballControls.cjs.js"),T=require("../core/ArcballControls.cjs.js"),g=require("../core/TransformControls.cjs.js"),v=require("../core/PointerLockControls.cjs.js"),L=require("../core/FirstPersonControls.cjs.js"),A=require("../core/GizmoHelper.cjs.js"),G=require("../core/GizmoViewcube.cjs.js"),k=require("../core/GizmoViewport.cjs.js"),D=require("../core/useCubeTexture.cjs.js"),F=require("../core/useFBX.cjs.js"),w=require("../core/useGLTF.cjs.js"),z=require("../core/useProgress.cjs.js"),y=require("../core/useTexture.cjs.js"),I=require("../core/useKTX2.cjs.js"),O=require("../core/Stats.cjs.js"),E=require("../core/useDepthBuffer.cjs.js"),R=require("../core/useAspect.cjs.js"),H=require("../core/useCamera.cjs.js"),V=require("../core/useDetectGPU.cjs.js"),Q=require("../core/useHelper.cjs.js"),X=require("../core/useBVH.cjs.js"),K=require("../core/useContextBridge.cjs.js"),W=require("../core/useAnimations.cjs.js"),N=require("../core/useFBO.cjs.js"),U=require("../core/useIntersect.cjs.js"),_=require("../core/CurveModifier.cjs.js"),J=require("../core/MeshDistortMaterial.cjs.js"),Y=require("../core/MeshWobbleMaterial.cjs.js"),Z=require("../core/MeshReflectorMaterial.cjs.js"),$=require("../core/PointMaterial.cjs.js"),ee=require("../core/shaderMaterial.cjs.js"),re=require("../core/softShadows.cjs.js"),se=require("../core/shapes.cjs.js"),oe=require("../core/RoundedBox.cjs.js"),te=require("../core/ScreenQuad.cjs.js"),ie=require("../core/Center.cjs.js"),ce=require("../core/Bounds.cjs.js"),ue=require("../core/CameraShake.cjs.js"),ae=require("../core/Float.cjs.js"),je=require("../core/Stage.cjs.js"),ne=require("../core/Backdrop.cjs.js"),pe=require("../core/Shadow.cjs.js"),le=require("../core/ContactShadows.cjs.js"),xe=require("../core/Reflector.cjs.js"),qe=require("../core/SpotLight.cjs.js"),de=require("../core/Environment.cjs.js"),Ce=require("../core/Sky.cjs.js"),he=require("../core/Stars.cjs.js"),me=require("../core/Cloud.cjs.js"),Se=require("../core/useMatcapTexture.cjs.js"),Be=require("../core/useNormalTexture.cjs.js"),be=require("../core/Points.cjs.js"),Pe=require("../core/Instances.cjs.js"),Me=require("../core/Segments.cjs.js"),fe=require("../core/Detailed.cjs.js"),Te=require("../core/Preload.cjs.js"),ge=require("../core/BakeShadows.cjs.js"),ve=require("../core/meshBounds.cjs.js"),Le=require("../core/AdaptiveDpr.cjs.js"),Ae=require("../core/AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("react-dom"),require("three"),require("@react-three/fiber"),require("zustand"),require("react-merge-refs"),require("@react-spring/three"),require("@use-gesture/react"),require("three-stdlib"),require("zustand/shallow"),require("troika-three-text"),require("lodash.omit"),require("lodash.pick"),require("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("use-asset"),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.Html=e.Html,exports.CycleRaycast=r.CycleRaycast,exports.useCursor=s.useCursor,exports.Loader=o.Loader,exports.Scroll=t.Scroll,exports.ScrollControls=t.ScrollControls,exports.useScroll=t.useScroll,exports.PresentationControls=i.PresentationControls,exports.Select=c.Select,exports.useSelect=c.useSelect,exports.Billboard=u.Billboard,exports.QuadraticBezierLine=a.QuadraticBezierLine,exports.CubicBezierLine=j.CubicBezierLine,exports.Line=n.Line,exports.PositionalAudio=p.PositionalAudio,exports.Text=l.Text,exports.Effects=x.Effects,exports.isWebGL2Available=x.isWebGL2Available,exports.GradientTexture=q.GradientTexture,exports.Image=d.Image,exports.Edges=C.Edges,exports.OrthographicCamera=h.OrthographicCamera,exports.PerspectiveCamera=m.PerspectiveCamera,exports.CubeCamera=S.CubeCamera,exports.DeviceOrientationControls=B.DeviceOrientationControls,exports.FlyControls=b.FlyControls,exports.MapControls=P.MapControls,exports.OrbitControls=M.OrbitControls,exports.TrackballControls=f.TrackballControls,exports.ArcballControls=T.ArcballControls,exports.TransformControls=g.TransformControls,exports.PointerLockControls=v.PointerLockControls,exports.FirstPersonControls=L.FirstPersonControls,exports.GizmoHelper=A.GizmoHelper,exports.useGizmoContext=A.useGizmoContext,exports.GizmoViewcube=G.GizmoViewcube,exports.GizmoViewport=k.GizmoViewport,exports.useCubeTexture=D.useCubeTexture,exports.useFBX=F.useFBX,exports.useGLTF=w.useGLTF,exports.useProgress=z.useProgress,exports.IsObject=y.IsObject,exports.useTexture=y.useTexture,exports.useKTX2=I.useKTX2,exports.Stats=O.Stats,exports.useDepthBuffer=E.useDepthBuffer,exports.useAspect=R.useAspect,exports.useCamera=H.useCamera,exports.useDetectGPU=V.useDetectGPU,exports.useHelper=Q.useHelper,exports.useBVH=X.useBVH,exports.useContextBridge=K.useContextBridge,exports.useAnimations=W.useAnimations,exports.useFBO=N.useFBO,exports.useIntersect=U.useIntersect,exports.CurveModifier=_.CurveModifier,exports.MeshDistortMaterial=J.MeshDistortMaterial,exports.MeshWobbleMaterial=Y.MeshWobbleMaterial,exports.MeshReflectorMaterial=Z.MeshReflectorMaterial,exports.PointMaterial=$.PointMaterial,exports.PointMaterialImpl=$.PointMaterialImpl,exports.shaderMaterial=ee.shaderMaterial,exports.softShadows=re.softShadows,exports.Box=se.Box,exports.Circle=se.Circle,exports.Cone=se.Cone,exports.Cylinder=se.Cylinder,exports.Dodecahedron=se.Dodecahedron,exports.Extrude=se.Extrude,exports.Icosahedron=se.Icosahedron,exports.Lathe=se.Lathe,exports.Octahedron=se.Octahedron,exports.Plane=se.Plane,exports.Polyhedron=se.Polyhedron,exports.Ring=se.Ring,exports.Sphere=se.Sphere,exports.Tetrahedron=se.Tetrahedron,exports.Torus=se.Torus,exports.TorusKnot=se.TorusKnot,exports.Tube=se.Tube,exports.RoundedBox=oe.RoundedBox,exports.ScreenQuad=te.ScreenQuad,exports.Center=ie.Center,exports.Bounds=ce.Bounds,exports.useBounds=ce.useBounds,exports.CameraShake=ue.CameraShake,exports.Float=ae.Float,exports.Stage=je.Stage,exports.Backdrop=ne.Backdrop,exports.Shadow=pe.Shadow,exports.ContactShadows=le.ContactShadows,exports.Reflector=xe.Reflector,exports.SpotLight=qe.SpotLight,exports.Environment=de.Environment,exports.Sky=Ce.Sky,exports.calcPosFromAngles=Ce.calcPosFromAngles,exports.Stars=he.Stars,exports.Cloud=me.Cloud,exports.useMatcapTexture=Se.useMatcapTexture,exports.useNormalTexture=Be.useNormalTexture,exports.Point=be.Point,exports.Points=be.Points,exports.PointsBuffer=be.PointsBuffer,exports.Instance=Pe.Instance,exports.Instances=Pe.Instances,exports.Merged=Pe.Merged,exports.Segment=Me.Segment,exports.Segments=Me.Segments,exports.Detailed=fe.Detailed,exports.Preload=Te.Preload,exports.BakeShadows=ge.BakeShadows,exports.meshBounds=ve.meshBounds,exports.AdaptiveDpr=Le.AdaptiveDpr,exports.AdaptiveEvents=Ae.AdaptiveEvents;
|
package/web/index.d.ts
CHANGED
package/web/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export { useCursor } from './useCursor.js';
|
|
|
4
4
|
export { Loader } from './Loader.js';
|
|
5
5
|
export { Scroll, ScrollControls, useScroll } from './ScrollControls.js';
|
|
6
6
|
export { PresentationControls } from './PresentationControls.js';
|
|
7
|
+
export { Select, useSelect } from './Select.js';
|
|
7
8
|
export { Billboard } from '../core/Billboard.js';
|
|
8
9
|
export { QuadraticBezierLine } from '../core/QuadraticBezierLine.js';
|
|
9
10
|
export { CubicBezierLine } from '../core/CubicBezierLine.js';
|
|
@@ -13,6 +14,7 @@ export { Text } from '../core/Text.js';
|
|
|
13
14
|
export { Effects, isWebGL2Available } from '../core/Effects.js';
|
|
14
15
|
export { GradientTexture } from '../core/GradientTexture.js';
|
|
15
16
|
export { Image } from '../core/Image.js';
|
|
17
|
+
export { Edges } from '../core/Edges.js';
|
|
16
18
|
export { OrthographicCamera } from '../core/OrthographicCamera.js';
|
|
17
19
|
export { PerspectiveCamera } from '../core/PerspectiveCamera.js';
|
|
18
20
|
export { CubeCamera } from '../core/CubeCamera.js';
|
|
@@ -33,6 +35,7 @@ export { useFBX } from '../core/useFBX.js';
|
|
|
33
35
|
export { useGLTF } from '../core/useGLTF.js';
|
|
34
36
|
export { useProgress } from '../core/useProgress.js';
|
|
35
37
|
export { IsObject, useTexture } from '../core/useTexture.js';
|
|
38
|
+
export { useKTX2 } from '../core/useKTX2.js';
|
|
36
39
|
export { Stats } from '../core/Stats.js';
|
|
37
40
|
export { useDepthBuffer } from '../core/useDepthBuffer.js';
|
|
38
41
|
export { useAspect } from '../core/useAspect.js';
|
|
@@ -89,6 +92,7 @@ import 'react-merge-refs';
|
|
|
89
92
|
import '@react-spring/three';
|
|
90
93
|
import '@use-gesture/react';
|
|
91
94
|
import 'three-stdlib';
|
|
95
|
+
import 'zustand/shallow';
|
|
92
96
|
import 'troika-three-text';
|
|
93
97
|
import 'lodash.omit';
|
|
94
98
|
import 'lodash.pick';
|