@react-three/drei 7.19.6 → 7.20.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/core/Segments.cjs.js +1 -0
- package/core/Segments.d.ts +16 -0
- package/core/Segments.js +101 -0
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +1 -0
- package/core/index.js +1 -0
- package/index.cjs.js +1 -1
- package/index.js +1 -0
- package/native/index.cjs.js +1 -1
- package/native/index.js +1 -0
- package/package.json +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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)}var i=s(e),c=a(t),u=a(r);const l=u.createContext(null),f=e=>e instanceof c.Vector3?e.toArray():e,d=u.forwardRef(((e,t)=>{const{limit:r=1e3,lineWidth:s=1,children:a,...d}=e,[m,b]=u.useState([]),[g]=u.useState((()=>new o.Line2)),[h]=u.useState((()=>new o.LineMaterial)),[p]=u.useState((()=>new o.LineSegmentsGeometry)),[v]=u.useState((()=>new c.Vector2(512,512))),[j]=u.useState((()=>Array(r).fill(0))),[y]=u.useState((()=>Array(r).fill(1))),S=u.useMemo((()=>({subscribe:e=>(b((t=>[...t,e])),()=>b((t=>t.filter((t=>t.current!==e.current)))))})),[]);return n.useFrame((()=>{j.length=6*m.length,y.length=6*m.length,m.forEach(((e,t)=>{const r=e.current;if(r){const e=f(r.start),s=f(r.end),a=(o=r.color)instanceof c.Color?o.toArray():o;for(var n=0;n<3;n++)j[6*t+n]=e[n],j[6*t+n+3]=s[n],y[6*t+n]=a[n],y[6*t+n+3]=a[n]}var o})),p.setColors(y),p.setPositions(j),g.computeLineDistances()})),u.createElement("primitive",{object:g,ref:t},u.createElement("primitive",{object:p,attach:"geometry"}),u.createElement("primitive",i.default({object:h,attach:"material",vertexColors:!0,resolution:v,linewidth:s},d)),u.createElement(l.Provider,{value:S},a))})),m=u.forwardRef(((e,t)=>{const{start:r,end:n,color:o}=e,s=u.useContext(l);if(!s)throw"Segment must used inside Segments component.";const a=u.useRef({start:[0,0,0],end:[0,0,0],color:[1,1,1]});return u.useLayoutEffect((()=>s.subscribe(t||a)),[]),u.useLayoutEffect((()=>{var e=t||a;r&&Object.assign(e.current,{start:r}),n&&Object.assign(e.current,{end:n}),o&&Object.assign(e.current,{color:o})}),[r,n,o]),null}));exports.Segment=m,exports.Segments=d;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Line2 } from 'three-stdlib';
|
|
4
|
+
declare type SegmentsProps = {
|
|
5
|
+
limit?: number;
|
|
6
|
+
lineWidth?: number;
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
};
|
|
9
|
+
declare type Segment = {
|
|
10
|
+
start: THREE.Vector3 | [number, number, number];
|
|
11
|
+
end: THREE.Vector3 | [number, number, number];
|
|
12
|
+
color?: THREE.Color | [number, number, number];
|
|
13
|
+
};
|
|
14
|
+
declare const Segments: React.ForwardRefExoticComponent<SegmentsProps & React.RefAttributes<Line2>>;
|
|
15
|
+
declare const Segment: React.ForwardRefExoticComponent<Segment & React.RefAttributes<Segment>>;
|
|
16
|
+
export { Segments, Segment };
|
package/core/Segments.js
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
2
|
+
import * as THREE from 'three';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { useFrame } from '@react-three/fiber';
|
|
5
|
+
import { Line2, LineMaterial, LineSegmentsGeometry } from 'three-stdlib';
|
|
6
|
+
|
|
7
|
+
const context = /*#__PURE__*/React.createContext(null);
|
|
8
|
+
|
|
9
|
+
const arrColor = color => color instanceof THREE.Color ? color.toArray() : color;
|
|
10
|
+
|
|
11
|
+
const arrPos = pos => pos instanceof THREE.Vector3 ? pos.toArray() : pos;
|
|
12
|
+
|
|
13
|
+
const Segments = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
14
|
+
const {
|
|
15
|
+
limit = 1000,
|
|
16
|
+
lineWidth = 1.0,
|
|
17
|
+
children,
|
|
18
|
+
...rest
|
|
19
|
+
} = props;
|
|
20
|
+
const [segments, setSegments] = React.useState([]);
|
|
21
|
+
const [line] = React.useState(() => new Line2());
|
|
22
|
+
const [material] = React.useState(() => new LineMaterial());
|
|
23
|
+
const [geometry] = React.useState(() => new LineSegmentsGeometry());
|
|
24
|
+
const [resolution] = React.useState(() => new THREE.Vector2(512, 512));
|
|
25
|
+
const [positions] = React.useState(() => Array(limit).fill(0));
|
|
26
|
+
const [colors] = React.useState(() => Array(limit).fill(1));
|
|
27
|
+
const api = React.useMemo(() => ({
|
|
28
|
+
subscribe: ref => {
|
|
29
|
+
setSegments(segments => [...segments, ref]);
|
|
30
|
+
return () => setSegments(segments => segments.filter(item => item.current !== ref.current));
|
|
31
|
+
}
|
|
32
|
+
}), []);
|
|
33
|
+
useFrame(() => {
|
|
34
|
+
positions.length = segments.length * 6;
|
|
35
|
+
colors.length = segments.length * 6;
|
|
36
|
+
segments.forEach((segmentRef, i) => {
|
|
37
|
+
const segment = segmentRef.current;
|
|
38
|
+
|
|
39
|
+
if (segment) {
|
|
40
|
+
const segmentStart = arrPos(segment.start);
|
|
41
|
+
const segmentEnd = arrPos(segment.end);
|
|
42
|
+
const segmentColor = arrColor(segment.color);
|
|
43
|
+
|
|
44
|
+
for (var j = 0; j < 3; j++) {
|
|
45
|
+
positions[i * 6 + j] = segmentStart[j];
|
|
46
|
+
positions[i * 6 + j + 3] = segmentEnd[j];
|
|
47
|
+
colors[i * 6 + j] = segmentColor[j];
|
|
48
|
+
colors[i * 6 + j + 3] = segmentColor[j];
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
geometry.setColors(colors);
|
|
53
|
+
geometry.setPositions(positions);
|
|
54
|
+
line.computeLineDistances();
|
|
55
|
+
});
|
|
56
|
+
return /*#__PURE__*/React.createElement("primitive", {
|
|
57
|
+
object: line,
|
|
58
|
+
ref: forwardedRef
|
|
59
|
+
}, /*#__PURE__*/React.createElement("primitive", {
|
|
60
|
+
object: geometry,
|
|
61
|
+
attach: "geometry"
|
|
62
|
+
}), /*#__PURE__*/React.createElement("primitive", _extends({
|
|
63
|
+
object: material,
|
|
64
|
+
attach: "material",
|
|
65
|
+
vertexColors: true,
|
|
66
|
+
resolution: resolution,
|
|
67
|
+
linewidth: lineWidth
|
|
68
|
+
}, rest)), /*#__PURE__*/React.createElement(context.Provider, {
|
|
69
|
+
value: api
|
|
70
|
+
}, children));
|
|
71
|
+
});
|
|
72
|
+
const Segment = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
73
|
+
const {
|
|
74
|
+
start,
|
|
75
|
+
end,
|
|
76
|
+
color
|
|
77
|
+
} = props;
|
|
78
|
+
const api = React.useContext(context);
|
|
79
|
+
if (!api) throw 'Segment must used inside Segments component.';
|
|
80
|
+
const ref = React.useRef({
|
|
81
|
+
start: [0, 0, 0],
|
|
82
|
+
end: [0, 0, 0],
|
|
83
|
+
color: [1, 1, 1]
|
|
84
|
+
});
|
|
85
|
+
React.useLayoutEffect(() => api.subscribe(forwardedRef || ref), []);
|
|
86
|
+
React.useLayoutEffect(() => {
|
|
87
|
+
var currRef = forwardedRef || ref;
|
|
88
|
+
start && Object.assign(currRef.current, {
|
|
89
|
+
start
|
|
90
|
+
});
|
|
91
|
+
end && Object.assign(currRef.current, {
|
|
92
|
+
end
|
|
93
|
+
});
|
|
94
|
+
color && Object.assign(currRef.current, {
|
|
95
|
+
color
|
|
96
|
+
});
|
|
97
|
+
}, [start, end, color]);
|
|
98
|
+
return null;
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
export { Segment, Segments };
|
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("./Cloud.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Environment.cjs.js"),c=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./Cloud.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./Line.cjs.js"),i=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),a=require("./Environment.cjs.js"),c=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),n=require("./Image.cjs.js"),p=require("./OrthographicCamera.cjs.js"),l=require("./PerspectiveCamera.cjs.js"),x=require("./CameraShake.cjs.js"),q=require("./CubeCamera.cjs.js"),d=require("./DeviceOrientationControls.cjs.js"),C=require("./FlyControls.cjs.js"),h=require("./MapControls.cjs.js"),m=require("./OrbitControls.cjs.js"),S=require("./TrackballControls.cjs.js"),b=require("./ArcballControls.cjs.js"),P=require("./TransformControls.cjs.js"),B=require("./PointerLockControls.cjs.js"),T=require("./FirstPersonControls.cjs.js"),g=require("./GizmoHelper.cjs.js"),M=require("./GizmoViewcube.cjs.js"),f=require("./GizmoViewport.cjs.js"),v=require("./useCubeTexture.cjs.js"),L=require("./useFBX.cjs.js"),A=require("./useGLTF.cjs.js"),G=require("./useProgress.cjs.js"),D=require("./useTexture.cjs.js"),w=require("./Reflector.cjs.js"),z=require("./Shadow.cjs.js"),k=require("./Stats.cjs.js"),F=require("./Center.cjs.js"),I=require("./Bounds.cjs.js"),O=require("./DepthBuffer.cjs.js"),E=require("./useAspect.cjs.js"),y=require("./useCamera.cjs.js"),H=require("./useDetectGPU.cjs.js"),R=require("./useHelper.cjs.js"),V=require("./useBVH.cjs.js"),Q=require("./useContextBridge.cjs.js"),W=require("./useAnimations.cjs.js"),N=require("./useFBO.cjs.js"),U=require("./useIntersect.cjs.js"),X=require("./useSimplification.cjs.js"),K=require("./useTessellation.cjs.js"),_=require("./useEdgeSplit.cjs.js"),J=require("./CurveModifier.cjs.js"),Y=require("./MeshDistortMaterial.cjs.js"),Z=require("./MeshWobbleMaterial.cjs.js"),$=require("./PointMaterial.cjs.js"),ee=require("./shaderMaterial.cjs.js"),re=require("./Sky.cjs.js"),se=require("./softShadows.cjs.js"),te=require("./Stars.cjs.js"),oe=require("./ContactShadows.cjs.js"),ie=require("./SpotLight.cjs.js"),ue=require("./shapes.cjs.js"),ae=require("./RoundedBox.cjs.js"),ce=require("./ScreenQuad.cjs.js"),je=require("./useMatcapTexture.cjs.js"),ne=require("./useNormalTexture.cjs.js"),pe=require("./Stage.cjs.js"),le=require("./Points.cjs.js"),xe=require("./Instances.cjs.js"),qe=require("./Segments.cjs.js"),de=require("./Detailed.cjs.js"),Ce=require("./Preload.cjs.js"),he=require("./BakeShadows.cjs.js"),me=require("./meshBounds.cjs.js"),Se=require("./AdaptiveDpr.cjs.js"),be=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("../assets/cloud.base64.cjs.js"),require("three"),require("three-stdlib"),require("troika-three-text"),require("use-asset"),require("../helpers/environment-assets.cjs.js"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("../materials/MeshReflectorMaterial.cjs.js"),require("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/matcap-assets.cjs.js"),require("../helpers/normal-assets.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.Cloud=r.Cloud,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.Line=o.Line,exports.PositionalAudio=i.PositionalAudio,exports.Text=u.Text,exports.Environment=a.Environment,exports.Effects=c.Effects,exports.isWebGL2Available=c.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.Image=n.Image,exports.OrthographicCamera=p.OrthographicCamera,exports.PerspectiveCamera=l.PerspectiveCamera,exports.CameraShake=x.CameraShake,exports.CubeCamera=q.CubeCamera,exports.DeviceOrientationControls=d.DeviceOrientationControls,exports.FlyControls=C.FlyControls,exports.MapControls=h.MapControls,exports.OrbitControls=m.OrbitControls,exports.TrackballControls=S.TrackballControls,exports.ArcballControls=b.ArcballControls,exports.TransformControls=P.TransformControls,exports.PointerLockControls=B.PointerLockControls,exports.FirstPersonControls=T.FirstPersonControls,exports.GizmoHelper=g.GizmoHelper,exports.useGizmoContext=g.useGizmoContext,exports.GizmoViewcube=M.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=v.useCubeTexture,exports.useFBX=L.useFBX,exports.useGLTF=A.useGLTF,exports.useProgress=G.useProgress,exports.IsObject=D.IsObject,exports.useTexture=D.useTexture,exports.Reflector=w.Reflector,exports.Shadow=z.Shadow,exports.Stats=k.Stats,exports.Center=F.Center,exports.Bounds=I.Bounds,exports.useBounds=I.useBounds,exports.DepthBuffer=O.DepthBuffer,exports.useAspect=E.useAspect,exports.useCamera=y.useCamera,exports.useDetectGPU=H.useDetectGPU,exports.useHelper=R.useHelper,exports.useBVH=V.useBVH,exports.useContextBridge=Q.useContextBridge,exports.useAnimations=W.useAnimations,exports.useFBO=N.useFBO,exports.useIntersect=U.useIntersect,exports.useSimplification=X.useSimplification,exports.useTessellation=K.useTessellation,exports.useEdgeSplit=_.useEdgeSplit,exports.CurveModifier=J.CurveModifier,exports.MeshDistortMaterial=Y.MeshDistortMaterial,exports.MeshWobbleMaterial=Z.MeshWobbleMaterial,exports.PointMaterial=$.PointMaterial,exports.PointMaterialImpl=$.PointMaterialImpl,exports.shaderMaterial=ee.shaderMaterial,exports.Sky=re.Sky,exports.calcPosFromAngles=re.calcPosFromAngles,exports.softShadows=se.softShadows,exports.Stars=te.Stars,exports.ContactShadows=oe.ContactShadows,exports.SpotLight=ie.SpotLight,exports.Box=ue.Box,exports.Circle=ue.Circle,exports.Cone=ue.Cone,exports.Cylinder=ue.Cylinder,exports.Dodecahedron=ue.Dodecahedron,exports.Extrude=ue.Extrude,exports.Icosahedron=ue.Icosahedron,exports.Lathe=ue.Lathe,exports.Octahedron=ue.Octahedron,exports.Parametric=ue.Parametric,exports.Plane=ue.Plane,exports.Polyhedron=ue.Polyhedron,exports.Ring=ue.Ring,exports.Sphere=ue.Sphere,exports.Tetrahedron=ue.Tetrahedron,exports.Torus=ue.Torus,exports.TorusKnot=ue.TorusKnot,exports.Tube=ue.Tube,exports.RoundedBox=ae.RoundedBox,exports.ScreenQuad=ce.ScreenQuad,exports.useMatcapTexture=je.useMatcapTexture,exports.useNormalTexture=ne.useNormalTexture,exports.Stage=pe.Stage,exports.Point=le.Point,exports.Points=le.Points,exports.Instance=xe.Instance,exports.Instances=xe.Instances,exports.Merged=xe.Merged,exports.Segment=qe.Segment,exports.Segments=qe.Segments,exports.Detailed=de.Detailed,exports.Preload=Ce.Preload,exports.BakeShadows=he.BakeShadows,exports.meshBounds=me.meshBounds,exports.AdaptiveDpr=Se.AdaptiveDpr,exports.AdaptiveEvents=be.AdaptiveEvents;
|
package/core/index.d.ts
CHANGED
package/core/index.js
CHANGED
|
@@ -66,6 +66,7 @@ export { useNormalTexture } from './useNormalTexture.js';
|
|
|
66
66
|
export { Stage } from './Stage.js';
|
|
67
67
|
export { Point, Points } from './Points.js';
|
|
68
68
|
export { Instance, Instances, Merged } from './Instances.js';
|
|
69
|
+
export { Segment, Segments } from './Segments.js';
|
|
69
70
|
export { Detailed } from './Detailed.js';
|
|
70
71
|
export { Preload } from './Preload.js';
|
|
71
72
|
export { BakeShadows } from './BakeShadows.js';
|