@react-three/drei 9.28.1 → 9.29.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 +36 -1
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +2 -1
- package/core/index.js +2 -1
- package/core/pivotControls/AxisArrow.cjs.js +1 -1
- package/core/pivotControls/AxisArrow.js +1 -1
- package/core/pivotControls/index.cjs.js +1 -1
- package/core/pivotControls/index.js +9 -2
- package/core/useVideoTexture.cjs.js +1 -0
- package/core/useVideoTexture.d.ts +10 -0
- package/core/useVideoTexture.js +37 -0
- package/index.cjs.js +1 -1
- package/index.js +2 -1
- package/native/index.cjs.js +1 -1
- package/native/index.js +2 -1
- package/package.json +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +2 -1
package/README.md
CHANGED
|
@@ -40,7 +40,6 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
40
40
|
</ul>
|
|
41
41
|
<li><a href="#controls">Controls</a></li>
|
|
42
42
|
<ul>
|
|
43
|
-
<li><a href="#controls">Controls</a></li>
|
|
44
43
|
<li><a href="#controls">FlyControls</a></li>
|
|
45
44
|
<li><a href="#controls">MapControls</a></li>
|
|
46
45
|
<li><a href="#controls">DeviceOrientationControls</a></li>
|
|
@@ -120,6 +119,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
120
119
|
<li><a href="#usetexture">useTexture</a></li>
|
|
121
120
|
<li><a href="#usektx2">useKTX2</a></li>
|
|
122
121
|
<li><a href="#usecubetexture">useCubeTexture</a></li>
|
|
122
|
+
<li><a href="#usevideotexture">useVideoTexture</a></li>
|
|
123
123
|
</ul>
|
|
124
124
|
<li><a href="#performance">Performance</a></li>
|
|
125
125
|
<ul>
|
|
@@ -1728,6 +1728,41 @@ A convenience hook that uses `useLoader` and `CubeTextureLoader`
|
|
|
1728
1728
|
const envMap = useCubeTexture(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'], { path: 'cube/' })
|
|
1729
1729
|
```
|
|
1730
1730
|
|
|
1731
|
+
#### useVideoTexture
|
|
1732
|
+
|
|
1733
|
+
<p>
|
|
1734
|
+
<a href="https://codesandbox.io/s/39hg8"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/39hg8/screenshot.png" alt="Demo"/></a>
|
|
1735
|
+
</p>
|
|
1736
|
+
|
|
1737
|
+
A convenience hook that returns a `THREE.VideoTexture` and integrates loading into suspense. By default it falls back until the `canplay` event. Then it starts playing the video, which, if the video is muted, is allowed in the browser without user interaction.
|
|
1738
|
+
|
|
1739
|
+
```tsx
|
|
1740
|
+
type VideoTextureProps = {
|
|
1741
|
+
unsuspend?: 'canplay' | 'canplaythrough'
|
|
1742
|
+
muted?: boolean
|
|
1743
|
+
loop?: boolean
|
|
1744
|
+
start?: boolean
|
|
1745
|
+
crossOrigin?: string
|
|
1746
|
+
}
|
|
1747
|
+
|
|
1748
|
+
export function useVideoTexture(src: string, props: VideoTextureProps) {
|
|
1749
|
+
const { unsuspend, start, crossOrigin, muted, loop } = {
|
|
1750
|
+
unsuspend: 'canplay',
|
|
1751
|
+
crossOrigin: 'Anonymous',
|
|
1752
|
+
muted: true,
|
|
1753
|
+
loop: true,
|
|
1754
|
+
start: true
|
|
1755
|
+
...props,
|
|
1756
|
+
}
|
|
1757
|
+
```
|
|
1758
|
+
|
|
1759
|
+
```jsx
|
|
1760
|
+
const texture = useVideoTexture("/video.mp4")
|
|
1761
|
+
return (
|
|
1762
|
+
<mesh>
|
|
1763
|
+
<meshBasicMaterial map={texture} toneMapped={false} />
|
|
1764
|
+
```
|
|
1765
|
+
|
|
1731
1766
|
# Performance
|
|
1732
1767
|
|
|
1733
1768
|
#### Instances
|
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"),
|
|
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"),T=require("./OrbitControls.cjs.js"),v=require("./TrackballControls.cjs.js"),g=require("./ArcballControls.cjs.js"),f=require("./TransformControls.cjs.js"),A=require("./PointerLockControls.cjs.js"),L=require("./FirstPersonControls.cjs.js"),k=require("./pivotControls/index.cjs.js"),D=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),w=require("./GizmoViewport.cjs.js"),F=require("./useCubeTexture.cjs.js"),G=require("./useFBX.cjs.js"),R=require("./useGLTF.cjs.js"),z=require("./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("./PointMaterial.cjs.js"),ie=require("./shaderMaterial.cjs.js"),ue=require("./softShadows.cjs.js"),ae=require("./shapes.cjs.js"),ce=require("./RoundedBox.cjs.js"),ne=require("./ScreenQuad.cjs.js"),je=require("./Center.cjs.js"),pe=require("./Bounds.cjs.js"),le=require("./CameraShake.cjs.js"),xe=require("./Float.cjs.js"),qe=require("./Stage.cjs.js"),de=require("./Backdrop.cjs.js"),me=require("./Shadow.cjs.js"),Ce=require("./ContactShadows.cjs.js"),he=require("./AccumulativeShadows.cjs.js"),Me=require("./Reflector.cjs.js"),Se=require("./SpotLight.cjs.js"),be=require("./Environment.cjs.js"),Pe=require("./Lightformer.cjs.js"),Be=require("./Sky.cjs.js"),Te=require("./Stars.cjs.js"),ve=require("./Cloud.cjs.js"),ge=require("./Sparkles.cjs.js"),fe=require("./useMatcapTexture.cjs.js"),Ae=require("./useNormalTexture.cjs.js"),Le=require("./Points.cjs.js"),ke=require("./Instances.cjs.js"),De=require("./Segments.cjs.js"),Ee=require("./Detailed.cjs.js"),we=require("./Preload.cjs.js"),Fe=require("./BakeShadows.cjs.js"),Ge=require("./meshBounds.cjs.js"),Re=require("./AdaptiveDpr.cjs.js"),ze=require("./AdaptiveEvents.cjs.js"),Oe=require("./PerformanceMonitor.cjs.js"),Ie=require("./RenderTexture.cjs.js"),Ve=require("./Mask.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("./pivotControls/AxisArrow.cjs.js"),require("./pivotControls/context.cjs.js"),require("./pivotControls/PlaneSlider.cjs.js"),require("./pivotControls/AxisRotator.cjs.js"),require("../web/Html.cjs.js"),require("react-dom/client"),require("lodash.clamp"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.CatmullRomLine=t.CatmullRomLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Text3D=a.Text3D,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=x.Sampler,exports.useSurfaceSampler=x.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=m.MarchingCube,exports.MarchingCubes=m.MarchingCubes,exports.MarchingPlane=m.MarchingPlane,exports.Decal=C.Decal,exports.OrthographicCamera=h.OrthographicCamera,exports.PerspectiveCamera=M.PerspectiveCamera,exports.CubeCamera=S.CubeCamera,exports.DeviceOrientationControls=b.DeviceOrientationControls,exports.FlyControls=P.FlyControls,exports.MapControls=B.MapControls,exports.OrbitControls=T.OrbitControls,exports.TrackballControls=v.TrackballControls,exports.ArcballControls=g.ArcballControls,exports.TransformControls=f.TransformControls,exports.PointerLockControls=A.PointerLockControls,exports.FirstPersonControls=L.FirstPersonControls,exports.PivotControls=k.PivotControls,exports.calculateScaleFactor=k.calculateScaleFactor,exports.GizmoHelper=D.GizmoHelper,exports.useGizmoContext=D.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=w.GizmoViewport,exports.useCubeTexture=F.useCubeTexture,exports.useFBX=G.useFBX,exports.useGLTF=R.useGLTF,exports.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.PointMaterial=oe.PointMaterial,exports.PointMaterialImpl=oe.PointMaterialImpl,exports.shaderMaterial=ie.shaderMaterial,exports.softShadows=ue.softShadows,exports.Box=ae.Box,exports.Capsule=ae.Capsule,exports.Circle=ae.Circle,exports.Cone=ae.Cone,exports.Cylinder=ae.Cylinder,exports.Dodecahedron=ae.Dodecahedron,exports.Extrude=ae.Extrude,exports.Icosahedron=ae.Icosahedron,exports.Lathe=ae.Lathe,exports.Octahedron=ae.Octahedron,exports.Plane=ae.Plane,exports.Polyhedron=ae.Polyhedron,exports.Ring=ae.Ring,exports.Sphere=ae.Sphere,exports.Tetrahedron=ae.Tetrahedron,exports.Torus=ae.Torus,exports.TorusKnot=ae.TorusKnot,exports.Tube=ae.Tube,exports.RoundedBox=ce.RoundedBox,exports.ScreenQuad=ne.ScreenQuad,exports.Center=je.Center,exports.Bounds=pe.Bounds,exports.useBounds=pe.useBounds,exports.CameraShake=le.CameraShake,exports.Float=xe.Float,exports.Stage=qe.Stage,exports.Backdrop=de.Backdrop,exports.Shadow=me.Shadow,exports.ContactShadows=Ce.ContactShadows,exports.AccumulativeShadows=he.AccumulativeShadows,exports.RandomizedLight=he.RandomizedLight,exports.accumulativeContext=he.accumulativeContext,exports.Reflector=Me.Reflector,exports.SpotLight=Se.SpotLight,exports.Environment=be.Environment,exports.EnvironmentCube=be.EnvironmentCube,exports.EnvironmentMap=be.EnvironmentMap,exports.EnvironmentPortal=be.EnvironmentPortal,exports.useEnvironment=be.useEnvironment,exports.Lightformer=Pe.Lightformer,exports.Sky=Be.Sky,exports.calcPosFromAngles=Be.calcPosFromAngles,exports.Stars=Te.Stars,exports.Cloud=ve.Cloud,exports.Sparkles=ge.Sparkles,exports.useMatcapTexture=fe.useMatcapTexture,exports.useNormalTexture=Ae.useNormalTexture,exports.Point=Le.Point,exports.Points=Le.Points,exports.PointsBuffer=Le.PointsBuffer,exports.Instance=ke.Instance,exports.Instances=ke.Instances,exports.Merged=ke.Merged,exports.Segment=De.Segment,exports.SegmentObject=De.SegmentObject,exports.Segments=De.Segments,exports.Detailed=Ee.Detailed,exports.Preload=we.Preload,exports.BakeShadows=Fe.BakeShadows,exports.meshBounds=Ge.meshBounds,exports.AdaptiveDpr=Re.AdaptiveDpr,exports.AdaptiveEvents=ze.AdaptiveEvents,exports.PerformanceMonitor=Oe.PerformanceMonitor,exports.usePerformanceMonitor=Oe.usePerformanceMonitor,exports.RenderTexture=Ie.RenderTexture,exports.Mask=Ve.Mask,exports.useMask=Ve.useMask;
|
package/core/index.d.ts
CHANGED
|
@@ -35,9 +35,10 @@ export * from './GizmoViewport';
|
|
|
35
35
|
export * from './useCubeTexture';
|
|
36
36
|
export * from './useFBX';
|
|
37
37
|
export * from './useGLTF';
|
|
38
|
+
export * from './useKTX2';
|
|
38
39
|
export * from './useProgress';
|
|
39
40
|
export * from './useTexture';
|
|
40
|
-
export * from './
|
|
41
|
+
export * from './useVideoTexture';
|
|
41
42
|
export * from './Stats';
|
|
42
43
|
export * from './useDepthBuffer';
|
|
43
44
|
export * from './useAspect';
|
package/core/index.js
CHANGED
|
@@ -35,9 +35,10 @@ export { GizmoViewport } from './GizmoViewport.js';
|
|
|
35
35
|
export { useCubeTexture } from './useCubeTexture.js';
|
|
36
36
|
export { useFBX } from './useFBX.js';
|
|
37
37
|
export { useGLTF } from './useGLTF.js';
|
|
38
|
+
export { useKTX2 } from './useKTX2.js';
|
|
38
39
|
export { useProgress } from './useProgress.js';
|
|
39
40
|
export { IsObject, useTexture } from './useTexture.js';
|
|
40
|
-
export {
|
|
41
|
+
export { useVideoTexture } from './useVideoTexture.js';
|
|
41
42
|
export { Stats } from './Stats.js';
|
|
42
43
|
export { useDepthBuffer } from './useDepthBuffer.js';
|
|
43
44
|
export { useAspect } from './useAspect.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 a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@babel/runtime/helpers/extends"),require("three-stdlib");var i=a(e),c=a(t);const l=new c.Vector3,s=new c.Vector3,u=(e,t,r,n)=>{const o=t.dot(t),a=t.dot(e)-t.dot(r),i=t.dot(n);if(0===i)return-a/o;l.copy(n).multiplyScalar(o/i).sub(t),s.copy(n).multiplyScalar(a/i).add(r).sub(e);return-l.dot(s)/l.dot(l)},p=new c.Vector3(0,1,0),d=new c.Matrix4;exports.AxisArrow=({direction:e,axis:t})=>{const{depthTest:a,scale:l,lineWidth:s,fixed:m,axisColors:f,hoveredColor:y,opacity:g,onDragStart:x,onDrag:h,onDragEnd:b,userData:O}=i.useContext(o.context),P=r.useThree((e=>e.controls)),j=i.useRef(null),w=i.useRef(null),[E,k]=i.useState(!1),C=i.useCallback((t=>{t.stopPropagation();const r=(new c.Matrix4).extractRotation(j.current.matrixWorld),n=t.point.clone(),o=e.clone().applyMatrix4(r).normalize();w.current={clickPoint:n,dir:o},x(),P&&(P.enabled=!1),t.target.setPointerCapture(t.pointerId)}),[e,P,x]),M=i.useCallback((e=>{if(e.stopPropagation(),E||k(!0),w.current){const{clickPoint:t,dir:r}=w.current,n=u(t,r,e.ray.origin,e.ray.direction);d.makeTranslation(r.x*n,r.y*n,r.z*n),h(d)}}),[h,E]),v=i.useCallback((e=>{e.stopPropagation(),w.current=null,b(),P&&(P.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[P,b]),L=i.useCallback((e=>{e.stopPropagation(),k(!1)}),[]),{cylinderLength:q,coneWidth:D,coneLength:T,matrixL:W}=i.useMemo((()=>{const t=m?s/l*1.6:l/20,r=m?.2:l/5,n=m?1-r:l-r,o=(new c.Quaternion).setFromUnitVectors(p,e.clone().normalize());return{cylinderLength:n,coneWidth:t,coneLength:r,matrixL:(new c.Matrix4).makeRotationFromQuaternion(o)}}),[e,l,s,m]),z=E?y:f[t];return i.createElement("group",{ref:j},i.createElement("group",{matrix:W,matrixAutoUpdate:!1,onPointerDown:C,onPointerMove:M,onPointerUp:v,onPointerOut:L},i.createElement("mesh",{visible:!1,position:[0,(q+T)/2,0],userData:O},i.createElement("cylinderGeometry",{args:[4*D,4*D,q+T,8,1]})),i.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:a,points:[0,0,0,0,q,0],lineWidth:s,color:z,opacity:g,polygonOffset:!0,renderOrder:1,polygonOffsetFactor:-10}),i.createElement("mesh",{raycast:()=>null,position:[0,q+T/2,0],renderOrder:500},i.createElement("coneGeometry",{args:[D,T,24,1]}),i.createElement("meshBasicMaterial",{transparent:!0,depthTest:a,color:z,opacity:g,polygonOffset:!0,polygonOffsetFactor:-10}))))},exports.calculateOffset=u;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("../Line.cjs.js"),o=require("./context.cjs.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@babel/runtime/helpers/extends"),require("three-stdlib");var i=a(e),c=a(t);const l=new c.Vector3,s=new c.Vector3,u=(e,t,r,n)=>{const o=t.dot(t),a=t.dot(e)-t.dot(r),i=t.dot(n);if(0===i)return-a/o;l.copy(n).multiplyScalar(o/i).sub(t),s.copy(n).multiplyScalar(a/i).add(r).sub(e);return-l.dot(s)/l.dot(l)},p=new c.Vector3(0,1,0),d=new c.Matrix4;exports.AxisArrow=({direction:e,axis:t})=>{const{depthTest:a,scale:l,lineWidth:s,fixed:m,axisColors:f,hoveredColor:y,opacity:g,onDragStart:x,onDrag:h,onDragEnd:b,userData:O}=i.useContext(o.context),P=r.useThree((e=>e.controls)),j=i.useRef(null),w=i.useRef(null),[E,k]=i.useState(!1),C=i.useCallback((t=>{t.stopPropagation();const r=(new c.Matrix4).extractRotation(j.current.matrixWorld),n=t.point.clone(),o=e.clone().applyMatrix4(r).normalize();w.current={clickPoint:n,dir:o},x(),P&&(P.enabled=!1),t.target.setPointerCapture(t.pointerId)}),[e,P,x]),M=i.useCallback((e=>{if(e.stopPropagation(),E||k(!0),w.current){const{clickPoint:t,dir:r}=w.current,n=u(t,r,e.ray.origin,e.ray.direction);d.makeTranslation(r.x*n,r.y*n,r.z*n),h(d)}}),[h,E]),v=i.useCallback((e=>{e.stopPropagation(),w.current=null,b(),P&&(P.enabled=!0),e.target.releasePointerCapture(e.pointerId)}),[P,b]),L=i.useCallback((e=>{e.stopPropagation(),k(!1)}),[]),{cylinderLength:q,coneWidth:D,coneLength:T,matrixL:W}=i.useMemo((()=>{const t=m?s/l*1.6:l/20,r=m?.2:l/5,n=m?1-r:l-r,o=(new c.Quaternion).setFromUnitVectors(p,e.clone().normalize());return{cylinderLength:n,coneWidth:t,coneLength:r,matrixL:(new c.Matrix4).makeRotationFromQuaternion(o)}}),[e,l,s,m]),z=E?y:f[t];return i.createElement("group",{ref:j},i.createElement("group",{matrix:W,matrixAutoUpdate:!1,onPointerDown:C,onPointerMove:M,onPointerUp:v,onPointerOut:L},i.createElement("mesh",{visible:!1,position:[0,(q+T)/2,0],userData:O},i.createElement("cylinderGeometry",{args:[1.4*D,1.4*D,q+T,8,1]})),i.createElement(n.Line,{transparent:!0,raycast:()=>null,depthTest:a,points:[0,0,0,0,q,0],lineWidth:s,color:z,opacity:g,polygonOffset:!0,renderOrder:1,polygonOffsetFactor:-10}),i.createElement("mesh",{raycast:()=>null,position:[0,q+T/2,0],renderOrder:500},i.createElement("coneGeometry",{args:[D,T,24,1]}),i.createElement("meshBasicMaterial",{transparent:!0,depthTest:a,color:z,opacity:g,polygonOffset:!0,polygonOffsetFactor:-10}))))},exports.calculateOffset=u;
|
|
@@ -117,7 +117,7 @@ const AxisArrow = ({
|
|
|
117
117
|
position: [0, (cylinderLength + coneLength) / 2.0, 0],
|
|
118
118
|
userData: userData
|
|
119
119
|
}, /*#__PURE__*/React.createElement("cylinderGeometry", {
|
|
120
|
-
args: [coneWidth * 4, coneWidth * 4, cylinderLength + coneLength, 8, 1]
|
|
120
|
+
args: [coneWidth * 1.4, coneWidth * 1.4, cylinderLength + coneLength, 8, 1]
|
|
121
121
|
})), /*#__PURE__*/React.createElement(Line, {
|
|
122
122
|
transparent: true,
|
|
123
123
|
raycast: () => null,
|
|
@@ -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,S=new s.Vector3,P=new s.Vector3,R=new s.Vector3(1,0,0),D=new s.Vector3(0,1,0),W=new s.Vector3(0,0,1),L=u.forwardRef((({matrix:e,onDragStart:r,onDrag:l,onDragEnd:d,autoTransform:x=!0,anchor:p,disableAxes:m=!1,disableSliders:L=!1,disableRotations:C=!1,activeAxes:O=[!0,!0,!0],offset:B=[0,0,0],rotation:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber"),i=require("meshline"),o=require("./AxisArrow.cjs.js"),n=require("./PlaneSlider.cjs.js"),a=require("./AxisRotator.cjs.js"),c=require("./context.cjs.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("../Line.cjs.js"),require("@babel/runtime/helpers/extends"),require("three-stdlib"),require("../../web/Html.cjs.js"),require("react-dom/client"),require("lodash.clamp");var s=l(e),u=l(r);const d=new s.Vector3,x=new s.Vector3,p=new s.Vector3,m=(e,r,t,i=1)=>{const o=d.set(e.x/t.width*2-1,-e.y/t.height*2+1,i);return o.unproject(r),o},y=(e,r,t,i)=>{const o=((e,r,t)=>{const i=t.width/2,o=t.height/2;r.updateMatrixWorld(!1);const n=e.project(r);return n.x=n.x*i+i,n.y=-n.y*o+o,n})(p.copy(e),t,i);let n=0;for(let a=0;a<2;++a){const c=x.copy(o).setComponent(a,o.getComponent(a)+r),l=m(c,t,i,c.z);n=Math.max(n,e.distanceTo(l))}return n},f=new s.Matrix4,w=new s.Matrix4,h=new s.Matrix4,g=new s.Matrix4,v=new s.Matrix4,M=new s.Matrix4,b=new s.Matrix4,j=new s.Matrix4,E=new s.Box3,A=new s.Box3,q=new s.Vector3,V=new s.Vector3,S=new s.Vector3,P=new s.Vector3,R=new s.Vector3(1,0,0),D=new s.Vector3(0,1,0),W=new s.Vector3(0,0,1),L=u.forwardRef((({matrix:e,onDragStart:r,onDrag:l,onDragEnd:d,autoTransform:x=!0,anchor:p,disableAxes:m=!1,disableSliders:L=!1,disableRotations:C=!1,activeAxes:O=[!0,!0,!0],offset:B=[0,0,0],rotation:T=[0,0,0],scale:z=1,lineWidth:_=4,fixed:k=!1,rotationLimits:F,depthTest:H=!0,axisColors:I=["#ff2060","#20df80","#2080ff"],hoveredColor:U="#ffff40",opacity:G=1,visible:J=!0,userData:K,children:N},Q)=>{t.extend({MeshLine:i.MeshLine,MeshLineMaterial:i.MeshLineMaterial});const X=t.useThree((e=>e.invalidate)),Y=u.useRef(null),Z=u.useRef(null),$=u.useRef(null),ee=u.useRef(null);u.useLayoutEffect((()=>{p&&(ee.current.updateWorldMatrix(!0,!0),g.copy(ee.current.matrixWorld).invert(),E.makeEmpty(),ee.current.traverse((e=>{e.geometry&&(e.geometry.boundingBox||e.geometry.computeBoundingBox(),M.copy(e.matrixWorld).premultiply(g),A.copy(e.geometry.boundingBox),A.applyMatrix4(M),E.union(A))})),q.copy(E.max).add(E.min).multiplyScalar(.5),V.copy(E.max).sub(E.min).multiplyScalar(.5),S.copy(V).multiply(new s.Vector3(...p)).add(q),P.set(...B).add(S),$.current.position.copy(P),X())}));const re=u.useMemo((()=>({onDragStart:()=>{f.copy(Z.current.matrix),w.copy(Z.current.matrixWorld),r&&r(),X()},onDrag:e=>{h.copy(Y.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&&Z.current.matrix.copy(M),l&&l(M,j,v,e),X()},onDragEnd:()=>{d&&d(),X()},rotationLimits:F,axisColors:I,hoveredColor:U,opacity:G,scale:z,lineWidth:_,fixed:k,depthTest:H,userData:K})),[r,l,d,F,H,z,_,k,...I,U,G,K,x]),te=new s.Vector3;return t.useFrame((e=>{if(k){const o=y($.current.getWorldPosition(te),z,e.camera,e.size);var r,t,i;if($.current)(null==(r=$.current)?void 0:r.scale.x)===o&&(null==(t=$.current)?void 0:t.scale.y)===o&&(null==(i=$.current)?void 0:i.scale.z)===o||($.current.scale.setScalar(o),e.invalidate())}})),u.useImperativeHandle(Q,(()=>Z.current),[]),u.createElement(c.context.Provider,{value:re},u.createElement("group",{ref:Y},u.createElement("group",{ref:Z,matrix:e,matrixAutoUpdate:!1},u.createElement("group",{visible:J,ref:$,position:B,rotation:T},!m&&O[0]&&u.createElement(o.AxisArrow,{axis:0,direction:R}),!m&&O[1]&&u.createElement(o.AxisArrow,{axis:1,direction:D}),!m&&O[2]&&u.createElement(o.AxisArrow,{axis:2,direction:W}),!L&&O[0]&&O[1]&&u.createElement(n.PlaneSlider,{axis:2,dir1:R,dir2:D}),!L&&O[0]&&O[2]&&u.createElement(n.PlaneSlider,{axis:1,dir1:W,dir2:R}),!L&&O[2]&&O[1]&&u.createElement(n.PlaneSlider,{axis:0,dir1:D,dir2:W}),!C&&O[0]&&O[1]&&u.createElement(a.AxisRotator,{axis:2,dir1:R,dir2:D}),!C&&O[0]&&O[2]&&u.createElement(a.AxisRotator,{axis:1,dir1:W,dir2:R}),!C&&O[2]&&O[1]&&u.createElement(a.AxisRotator,{axis:0,dir1:D,dir2:W})),u.createElement("group",{ref:ee},N))))}));exports.PivotControls=L,exports.calculateScaleFactor=y;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as THREE from 'three';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { extend, useFrame } from '@react-three/fiber';
|
|
3
|
+
import { extend, useThree, useFrame } from '@react-three/fiber';
|
|
4
4
|
import { MeshLine, MeshLineMaterial } from 'meshline';
|
|
5
5
|
import { AxisArrow } from './AxisArrow.js';
|
|
6
6
|
import { PlaneSlider } from './PlaneSlider.js';
|
|
@@ -85,6 +85,7 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
|
|
|
85
85
|
MeshLine,
|
|
86
86
|
MeshLineMaterial
|
|
87
87
|
});
|
|
88
|
+
const invalidate = useThree(state => state.invalidate);
|
|
88
89
|
const parentRef = React.useRef(null);
|
|
89
90
|
const ref = React.useRef(null);
|
|
90
91
|
const gizmoRef = React.useRef(null);
|
|
@@ -107,12 +108,14 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
|
|
|
107
108
|
vAnchorOffset.copy(vSize).multiply(new THREE.Vector3(...anchor)).add(vCenter);
|
|
108
109
|
vPosition.set(...offset).add(vAnchorOffset);
|
|
109
110
|
gizmoRef.current.position.copy(vPosition);
|
|
111
|
+
invalidate();
|
|
110
112
|
});
|
|
111
113
|
const config = React.useMemo(() => ({
|
|
112
114
|
onDragStart: () => {
|
|
113
115
|
mL0.copy(ref.current.matrix);
|
|
114
116
|
mW0.copy(ref.current.matrixWorld);
|
|
115
117
|
onDragStart && onDragStart();
|
|
118
|
+
invalidate();
|
|
116
119
|
},
|
|
117
120
|
onDrag: mdW => {
|
|
118
121
|
mP.copy(parentRef.current.matrixWorld);
|
|
@@ -124,8 +127,12 @@ const PivotControls = /*#__PURE__*/React.forwardRef(({
|
|
|
124
127
|
mdL.copy(mL).multiply(mL0Inv);
|
|
125
128
|
if (autoTransform) ref.current.matrix.copy(mL);
|
|
126
129
|
onDrag && onDrag(mL, mdL, mW, mdW);
|
|
130
|
+
invalidate();
|
|
131
|
+
},
|
|
132
|
+
onDragEnd: () => {
|
|
133
|
+
if (onDragEnd) onDragEnd();
|
|
134
|
+
invalidate();
|
|
127
135
|
},
|
|
128
|
-
onDragEnd: () => onDragEnd && onDragEnd(),
|
|
129
136
|
rotationLimits,
|
|
130
137
|
axisColors,
|
|
131
138
|
hoveredColor,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber"),n=require("suspend-react");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var s=u(e);exports.useVideoTexture=function(e,u){const{unsuspend:o,start:c,crossOrigin:i,muted:a,loop:d}={unsuspend:"canplay",crossOrigin:"Anonymous",muted:!0,loop:!0,start:!0,...u},p=t.useThree((e=>e.gl)),f=n.suspend((()=>new Promise(((r,t)=>{const n=Object.assign(document.createElement("video"),{src:e,crossOrigin:i,loop:d,muted:a}),u=new s.VideoTexture(n);u.encoding=p.outputEncoding,n.addEventListener(o,(()=>r(u)))}))),[e]);return r.useEffect((()=>{c&&f.image.play()}),[f]),f};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
declare type VideoTextureProps = {
|
|
3
|
+
unsuspend?: 'canplay' | 'canplaythrough';
|
|
4
|
+
muted?: boolean;
|
|
5
|
+
loop?: boolean;
|
|
6
|
+
start?: boolean;
|
|
7
|
+
crossOrigin?: string;
|
|
8
|
+
};
|
|
9
|
+
export declare function useVideoTexture(src: string, props: VideoTextureProps): THREE.VideoTexture;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
|
+
import { useThree } from '@react-three/fiber';
|
|
4
|
+
import { suspend } from 'suspend-react';
|
|
5
|
+
|
|
6
|
+
function useVideoTexture(src, props) {
|
|
7
|
+
const {
|
|
8
|
+
unsuspend,
|
|
9
|
+
start,
|
|
10
|
+
crossOrigin,
|
|
11
|
+
muted,
|
|
12
|
+
loop
|
|
13
|
+
} = {
|
|
14
|
+
unsuspend: 'canplay',
|
|
15
|
+
crossOrigin: 'Anonymous',
|
|
16
|
+
muted: true,
|
|
17
|
+
loop: true,
|
|
18
|
+
start: true,
|
|
19
|
+
...props
|
|
20
|
+
};
|
|
21
|
+
const gl = useThree(state => state.gl);
|
|
22
|
+
const texture = suspend(() => new Promise((res, rej) => {
|
|
23
|
+
const video = Object.assign(document.createElement('video'), {
|
|
24
|
+
src,
|
|
25
|
+
crossOrigin,
|
|
26
|
+
loop,
|
|
27
|
+
muted
|
|
28
|
+
});
|
|
29
|
+
const texture = new THREE.VideoTexture(video);
|
|
30
|
+
texture.encoding = gl.outputEncoding;
|
|
31
|
+
video.addEventListener(unsuspend, () => res(texture));
|
|
32
|
+
}), [src]);
|
|
33
|
+
useEffect(() => void (start && texture.image.play()), [texture]);
|
|
34
|
+
return texture;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export { useVideoTexture };
|