@react-three/drei 9.83.9 → 9.84.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.
Files changed (255) hide show
  1. package/README.md +70 -2
  2. package/core/AccumulativeShadows.d.ts +3 -3
  3. package/core/AccumulativeShadows.js +30 -36
  4. package/core/AdaptiveDpr.js +4 -4
  5. package/core/ArcballControls.d.ts +1 -1
  6. package/core/ArcballControls.js +0 -1
  7. package/core/AsciiRenderer.d.ts +3 -3
  8. package/core/AsciiRenderer.js +12 -6
  9. package/core/BBAnchor.cjs.js +1 -1
  10. package/core/BBAnchor.d.ts +2 -2
  11. package/core/BBAnchor.js +5 -5
  12. package/core/Backdrop.d.ts +2 -2
  13. package/core/Backdrop.js +0 -3
  14. package/core/Billboard.d.ts +1 -1
  15. package/core/Billboard.js +6 -3
  16. package/core/Bounds.d.ts +5 -5
  17. package/core/Bounds.js +5 -32
  18. package/core/CameraControls.d.ts +2 -2
  19. package/core/CameraControls.js +0 -3
  20. package/core/CameraShake.js +0 -4
  21. package/core/CatmullRomLine.d.ts +1 -1
  22. package/core/CatmullRomLine.js +0 -2
  23. package/core/Caustics.d.ts +1 -1
  24. package/core/Caustics.js +31 -32
  25. package/core/Center.d.ts +2 -2
  26. package/core/Center.js +2 -1
  27. package/core/Clone.d.ts +1 -1
  28. package/core/Clone.js +10 -13
  29. package/core/Cloud.cjs.js +1 -1
  30. package/core/Cloud.d.ts +2 -2
  31. package/core/Cloud.js +1 -2
  32. package/core/ComputedAttribute.d.ts +2 -2
  33. package/core/ComputedAttribute.js +0 -1
  34. package/core/ContactShadows.d.ts +1 -1
  35. package/core/ContactShadows.js +6 -7
  36. package/core/CubeCamera.cjs.js +1 -1
  37. package/core/CubeCamera.d.ts +2 -2
  38. package/core/CubeCamera.js +1 -1
  39. package/core/CubicBezierLine.d.ts +1 -1
  40. package/core/CurveModifier.d.ts +1 -1
  41. package/core/CurveModifier.js +2 -4
  42. package/core/Decal.d.ts +1 -1
  43. package/core/Decal.js +8 -15
  44. package/core/Detailed.d.ts +1 -1
  45. package/core/Detailed.js +0 -1
  46. package/core/DeviceOrientationControls.d.ts +1 -1
  47. package/core/DeviceOrientationControls.js +3 -4
  48. package/core/Edges.d.ts +1 -1
  49. package/core/Edges.js +0 -2
  50. package/core/Effects.d.ts +1 -1
  51. package/core/Effects.js +5 -7
  52. package/core/Environment.d.ts +3 -3
  53. package/core/Environment.js +6 -12
  54. package/core/Example.d.ts +3 -3
  55. package/core/Example.js +2 -1
  56. package/core/FaceControls.cjs.js +1 -1
  57. package/core/FaceControls.d.ts +5 -5
  58. package/core/FaceControls.js +42 -39
  59. package/core/FaceLandmarker.d.ts +3 -2
  60. package/core/FaceLandmarker.js +1 -1
  61. package/core/Facemesh.d.ts +6 -6
  62. package/core/Facemesh.js +47 -53
  63. package/core/FirstPersonControls.d.ts +1 -1
  64. package/core/Float.d.ts +1 -1
  65. package/core/Float.js +0 -1
  66. package/core/FlyControls.d.ts +1 -1
  67. package/core/FlyControls.js +1 -2
  68. package/core/GizmoHelper.cjs.js +1 -1
  69. package/core/GizmoHelper.d.ts +2 -2
  70. package/core/GizmoHelper.js +18 -19
  71. package/core/GizmoViewcube.d.ts +3 -3
  72. package/core/GizmoViewcube.js +0 -14
  73. package/core/GizmoViewport.d.ts +3 -3
  74. package/core/GizmoViewport.js +0 -7
  75. package/core/Gltf.d.ts +1 -1
  76. package/core/GradientTexture.d.ts +3 -3
  77. package/core/GradientTexture.js +2 -5
  78. package/core/Grid.d.ts +2 -2
  79. package/core/Grid.js +2 -6
  80. package/core/Hud.d.ts +2 -2
  81. package/core/Hud.js +6 -9
  82. package/core/Image.d.ts +2 -2
  83. package/core/Image.js +4 -6
  84. package/core/Instances.d.ts +6 -6
  85. package/core/Instances.js +20 -35
  86. package/core/Lightformer.d.ts +1 -1
  87. package/core/Lightformer.js +4 -2
  88. package/core/Line.d.ts +1 -1
  89. package/core/Line.js +0 -3
  90. package/core/MapControls.d.ts +1 -1
  91. package/core/MapControls.js +0 -2
  92. package/core/MarchingCubes.d.ts +3 -3
  93. package/core/Mask.d.ts +1 -1
  94. package/core/MeshDistortMaterial.d.ts +2 -2
  95. package/core/MeshDistortMaterial.js +0 -9
  96. package/core/MeshPortalMaterial.d.ts +4 -4
  97. package/core/MeshPortalMaterial.js +22 -61
  98. package/core/MeshReflectorMaterial.d.ts +1 -1
  99. package/core/MeshReflectorMaterial.js +12 -14
  100. package/core/MeshRefractionMaterial.cjs.js +1 -1
  101. package/core/MeshRefractionMaterial.d.ts +3 -3
  102. package/core/MeshRefractionMaterial.js +9 -14
  103. package/core/MeshTransmissionMaterial.d.ts +2 -2
  104. package/core/MeshTransmissionMaterial.js +32 -33
  105. package/core/MeshWobbleMaterial.d.ts +2 -2
  106. package/core/MeshWobbleMaterial.js +0 -7
  107. package/core/MotionPathControls.cjs.js +1 -0
  108. package/core/MotionPathControls.d.ts +15 -0
  109. package/core/MotionPathControls.js +114 -0
  110. package/core/OrbitControls.d.ts +2 -2
  111. package/core/OrbitControls.js +0 -4
  112. package/core/OrthographicCamera.d.ts +1 -1
  113. package/core/OrthographicCamera.js +2 -3
  114. package/core/Outlines.cjs.js +1 -1
  115. package/core/Outlines.d.ts +3 -3
  116. package/core/Outlines.js +2 -7
  117. package/core/PerformanceMonitor.d.ts +4 -4
  118. package/core/PerformanceMonitor.js +8 -12
  119. package/core/PerspectiveCamera.d.ts +1 -1
  120. package/core/PerspectiveCamera.js +2 -3
  121. package/core/PointMaterial.d.ts +1 -1
  122. package/core/PointMaterial.js +0 -2
  123. package/core/PointerLockControls.d.ts +1 -1
  124. package/core/PointerLockControls.js +4 -6
  125. package/core/Points.d.ts +2 -2
  126. package/core/Points.js +6 -23
  127. package/core/PositionalAudio.d.ts +1 -1
  128. package/core/PositionalAudio.js +0 -5
  129. package/core/Preload.d.ts +1 -1
  130. package/core/Preload.js +8 -9
  131. package/core/QuadraticBezierLine.d.ts +2 -2
  132. package/core/QuadraticBezierLine.js +0 -2
  133. package/core/Reflector.d.ts +1 -1
  134. package/core/Reflector.js +11 -12
  135. package/core/RenderTexture.d.ts +1 -1
  136. package/core/RenderTexture.js +9 -11
  137. package/core/Resize.d.ts +2 -2
  138. package/core/RoundedBox.cjs.js +1 -1
  139. package/core/RoundedBox.d.ts +1 -1
  140. package/core/RoundedBox.js +1 -3
  141. package/core/Sampler.d.ts +5 -5
  142. package/core/Sampler.js +0 -10
  143. package/core/ScreenQuad.d.ts +1 -1
  144. package/core/ScreenQuad.js +0 -1
  145. package/core/ScreenSpace.d.ts +1 -1
  146. package/core/Segments.d.ts +2 -2
  147. package/core/Segments.js +0 -6
  148. package/core/Shadow.d.ts +1 -1
  149. package/core/Sky.d.ts +1 -1
  150. package/core/Sparkles.js +0 -10
  151. package/core/SpotLight.d.ts +2 -2
  152. package/core/SpotLight.js +3 -10
  153. package/core/SpriteAnimator.d.ts +1 -1
  154. package/core/SpriteAnimator.js +16 -34
  155. package/core/Stage.d.ts +4 -4
  156. package/core/Stage.js +2 -4
  157. package/core/Stars.d.ts +1 -1
  158. package/core/Stars.js +2 -11
  159. package/core/Stats.d.ts +1 -1
  160. package/core/Stats.js +2 -2
  161. package/core/StatsGl.d.ts +1 -1
  162. package/core/StatsGl.js +4 -3
  163. package/core/Svg.js +0 -2
  164. package/core/Text.d.ts +1 -1
  165. package/core/Text3D.d.ts +1 -1
  166. package/core/Text3D.js +1 -3
  167. package/core/TrackballControls.d.ts +1 -1
  168. package/core/TrackballControls.js +0 -1
  169. package/core/Trail.d.ts +3 -3
  170. package/core/Trail.js +6 -17
  171. package/core/TransformControls.d.ts +1 -1
  172. package/core/TransformControls.js +3 -9
  173. package/core/Wireframe.d.ts +1 -1
  174. package/core/Wireframe.js +0 -28
  175. package/core/index.cjs.js +1 -1
  176. package/core/index.d.ts +1 -0
  177. package/core/index.js +1 -0
  178. package/core/meshBounds.js +4 -14
  179. package/core/shaderMaterial.js +10 -9
  180. package/core/shapes.d.ts +2 -2
  181. package/core/shapes.js +3 -6
  182. package/core/softShadows.d.ts +1 -1
  183. package/core/softShadows.js +1 -4
  184. package/core/useAnimations.d.ts +1 -1
  185. package/core/useAnimations.js +2 -4
  186. package/core/useBVH.d.ts +1 -1
  187. package/core/useBVH.js +3 -4
  188. package/core/useBoxProjectedEnv.js +15 -22
  189. package/core/useCamera.js +0 -1
  190. package/core/useContextBridge.js +1 -2
  191. package/core/useCubeCamera.d.ts +1 -1
  192. package/core/useCubeTexture.d.ts +1 -1
  193. package/core/useCubeTexture.js +4 -3
  194. package/core/useEnvironment.cjs.js +1 -1
  195. package/core/useEnvironment.d.ts +2 -2
  196. package/core/useEnvironment.js +9 -11
  197. package/core/useFBO.d.ts +1 -1
  198. package/core/useFBO.js +3 -12
  199. package/core/useFBX.js +0 -2
  200. package/core/useFont.d.ts +2 -2
  201. package/core/useFont.js +0 -4
  202. package/core/useGLTF.d.ts +2 -2
  203. package/core/useGLTF.js +0 -8
  204. package/core/useHelper.d.ts +3 -3
  205. package/core/useHelper.js +2 -5
  206. package/core/useIntersect.js +5 -8
  207. package/core/useKTX2.js +3 -5
  208. package/core/useMatcapTexture.js +0 -6
  209. package/core/useNormalTexture.d.ts +1 -1
  210. package/core/useProgress.d.ts +1 -1
  211. package/core/useProgress.js +0 -5
  212. package/core/useTexture.js +4 -6
  213. package/core/useTrailTexture.d.ts +1 -1
  214. package/core/useTrailTexture.js +10 -21
  215. package/helpers/environment-assets.d.ts +1 -1
  216. package/helpers/ts-utils.d.ts +2 -2
  217. package/helpers/useEffectfulState.d.ts +1 -1
  218. package/helpers/useEffectfulState.js +0 -1
  219. package/index.cjs.js +1 -1
  220. package/index.js +1 -0
  221. package/materials/BlurPass.js +2 -5
  222. package/materials/ConvolutionMaterial.js +0 -3
  223. package/materials/MeshReflectorMaterial.d.ts +1 -1
  224. package/materials/MeshReflectorMaterial.js +0 -34
  225. package/materials/MeshRefractionMaterial.js +2 -6
  226. package/materials/SpotLightMaterial.js +2 -7
  227. package/materials/WireframeMaterial.js +7 -25
  228. package/native/index.cjs.js +1 -1
  229. package/native/index.js +1 -0
  230. package/package.json +2 -2
  231. package/react-three-drei-0.0.0-semantic-release.tgz +0 -0
  232. package/web/CycleRaycast.d.ts +1 -1
  233. package/web/CycleRaycast.js +20 -24
  234. package/web/Html.d.ts +2 -2
  235. package/web/Html.js +6 -50
  236. package/web/KeyboardControls.d.ts +10 -10
  237. package/web/KeyboardControls.js +9 -6
  238. package/web/Loader.d.ts +2 -2
  239. package/web/Loader.js +8 -5
  240. package/web/PresentationControls.d.ts +2 -2
  241. package/web/PresentationControls.js +2 -1
  242. package/web/ScrollControls.d.ts +4 -4
  243. package/web/ScrollControls.js +5 -16
  244. package/web/Select.d.ts +3 -3
  245. package/web/Select.js +6 -17
  246. package/web/View.d.ts +5 -5
  247. package/web/View.js +7 -20
  248. package/web/index.cjs.js +1 -1
  249. package/web/index.js +1 -0
  250. package/web/pivotControls/AxisArrow.js +6 -15
  251. package/web/pivotControls/AxisRotator.js +8 -23
  252. package/web/pivotControls/PlaneSlider.js +6 -16
  253. package/web/pivotControls/context.d.ts +2 -2
  254. package/web/pivotControls/index.d.ts +1 -1
  255. package/web/pivotControls/index.js +2 -9
package/web/Html.js CHANGED
@@ -7,7 +7,6 @@ import { useThree, useFrame } from '@react-three/fiber';
7
7
  const v1 = new Vector3();
8
8
  const v2 = new Vector3();
9
9
  const v3 = new Vector3();
10
-
11
10
  function defaultCalculatePosition(el, camera, size) {
12
11
  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
13
12
  objectPos.project(camera);
@@ -15,7 +14,6 @@ function defaultCalculatePosition(el, camera, size) {
15
14
  const heightHalf = size.height / 2;
16
15
  return [objectPos.x * widthHalf + widthHalf, -(objectPos.y * heightHalf) + heightHalf];
17
16
  }
18
-
19
17
  function isObjectBehindCamera(el, camera) {
20
18
  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
21
19
  const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
@@ -23,23 +21,19 @@ function isObjectBehindCamera(el, camera) {
23
21
  const camDir = camera.getWorldDirection(v3);
24
22
  return deltaCamObj.angleTo(camDir) > Math.PI / 2;
25
23
  }
26
-
27
24
  function isObjectVisible(el, camera, raycaster, occlude) {
28
25
  const elPos = v1.setFromMatrixPosition(el.matrixWorld);
29
26
  const screenPos = elPos.clone();
30
27
  screenPos.project(camera);
31
28
  raycaster.setFromCamera(screenPos, camera);
32
29
  const intersects = raycaster.intersectObjects(occlude, true);
33
-
34
30
  if (intersects.length) {
35
31
  const intersectionDistance = intersects[0].distance;
36
32
  const pointDistance = elPos.distanceTo(raycaster.ray.origin);
37
33
  return pointDistance < intersectionDistance;
38
34
  }
39
-
40
35
  return true;
41
36
  }
42
-
43
37
  function objectScale(el, camera) {
44
38
  if (camera instanceof OrthographicCamera) {
45
39
  return camera.zoom;
@@ -54,7 +48,6 @@ function objectScale(el, camera) {
54
48
  return 1;
55
49
  }
56
50
  }
57
-
58
51
  function objectZIndex(el, camera, zIndexRange) {
59
52
  if (camera instanceof PerspectiveCamera || camera instanceof OrthographicCamera) {
60
53
  const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
@@ -64,34 +57,25 @@ function objectZIndex(el, camera, zIndexRange) {
64
57
  const B = zIndexRange[1] - A * camera.far;
65
58
  return Math.round(A * dist + B);
66
59
  }
67
-
68
60
  return undefined;
69
61
  }
70
-
71
62
  const epsilon = value => Math.abs(value) < 1e-10 ? 0 : value;
72
-
73
63
  function getCSSMatrix(matrix, multipliers, prepend = '') {
74
64
  let matrix3d = 'matrix3d(';
75
-
76
65
  for (let i = 0; i !== 16; i++) {
77
66
  matrix3d += epsilon(multipliers[i] * matrix.elements[i]) + (i !== 15 ? ',' : ')');
78
67
  }
79
-
80
68
  return prepend + matrix3d;
81
69
  }
82
-
83
70
  const getCameraCSSMatrix = (multipliers => {
84
71
  return matrix => getCSSMatrix(matrix, multipliers);
85
72
  })([1, -1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1]);
86
-
87
73
  const getObjectCSSMatrix = (scaleMultipliers => {
88
74
  return (matrix, factor) => getCSSMatrix(matrix, scaleMultipliers(factor), 'translate(-50%,-50%)');
89
75
  })(f => [1 / f, 1 / f, 1 / f, 1, -1 / f, -1 / f, -1 / f, -1, 1 / f, 1 / f, 1 / f, 1, 1, 1, 1, 1]);
90
-
91
76
  function isRefObject(ref) {
92
77
  return ref && typeof ref === 'object' && 'current' in ref;
93
78
  }
94
-
95
79
  const Html = /*#__PURE__*/React.forwardRef(({
96
80
  children,
97
81
  eps = 0.001,
@@ -132,8 +116,8 @@ const Html = /*#__PURE__*/React.forwardRef(({
132
116
  const oldZoom = React.useRef(0);
133
117
  const oldPosition = React.useRef([0, 0]);
134
118
  const transformOuterRef = React.useRef(null);
135
- const transformInnerRef = React.useRef(null); // Append to the connected element, which makes HTML work with views
136
-
119
+ const transformInnerRef = React.useRef(null);
120
+ // Append to the connected element, which makes HTML work with views
137
121
  const target = (portal == null ? void 0 : portal.current) || events.connected || gl.domElement.parentNode;
138
122
  const occlusionMeshRef = React.useRef(null);
139
123
  const isMeshSizeSet = React.useRef(false);
@@ -142,7 +126,6 @@ const Html = /*#__PURE__*/React.forwardRef(({
142
126
  }, [occlude]);
143
127
  React.useLayoutEffect(() => {
144
128
  const el = gl.domElement;
145
-
146
129
  if (occlude && occlude === 'blending') {
147
130
  el.style.zIndex = `${Math.floor(zIndexRange[0] / 2)}`;
148
131
  el.style.position = 'absolute';
@@ -157,18 +140,15 @@ const Html = /*#__PURE__*/React.forwardRef(({
157
140
  if (group.current) {
158
141
  const currentRoot = root.current = ReactDOM.createRoot(el);
159
142
  scene.updateMatrixWorld();
160
-
161
143
  if (transform) {
162
144
  el.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
163
145
  } else {
164
146
  const vec = calculatePosition(group.current, camera, size);
165
147
  el.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
166
148
  }
167
-
168
149
  if (target) {
169
150
  if (prepend) target.prepend(el);else target.appendChild(el);
170
151
  }
171
-
172
152
  return () => {
173
153
  if (target) target.removeChild(el);
174
154
  currentRoot.unmount();
@@ -209,11 +189,9 @@ const Html = /*#__PURE__*/React.forwardRef(({
209
189
  }), [pointerEvents]);
210
190
  React.useLayoutEffect(() => {
211
191
  isMeshSizeSet.current = false;
212
-
213
192
  if (transform) {
214
193
  var _root$current;
215
-
216
- (_root$current = root.current) == null ? void 0 : _root$current.render( /*#__PURE__*/React.createElement("div", {
194
+ (_root$current = root.current) == null || _root$current.render( /*#__PURE__*/React.createElement("div", {
217
195
  ref: transformOuterRef,
218
196
  style: styles
219
197
  }, /*#__PURE__*/React.createElement("div", {
@@ -227,8 +205,7 @@ const Html = /*#__PURE__*/React.forwardRef(({
227
205
  }))));
228
206
  } else {
229
207
  var _root$current2;
230
-
231
- (_root$current2 = root.current) == null ? void 0 : _root$current2.render( /*#__PURE__*/React.createElement("div", {
208
+ (_root$current2 = root.current) == null || _root$current2.render( /*#__PURE__*/React.createElement("div", {
232
209
  ref: ref,
233
210
  style: styles,
234
211
  className: className,
@@ -242,11 +219,9 @@ const Html = /*#__PURE__*/React.forwardRef(({
242
219
  camera.updateMatrixWorld();
243
220
  group.current.updateWorldMatrix(true, false);
244
221
  const vec = transform ? oldPosition.current : calculatePosition(group.current, camera, size);
245
-
246
222
  if (transform || Math.abs(oldZoom.current - camera.zoom) > eps || Math.abs(oldPosition.current[0] - vec[0]) > eps || Math.abs(oldPosition.current[1] - vec[1]) > eps) {
247
223
  const isBehindCamera = isObjectBehindCamera(group.current, camera);
248
224
  let raytraceTarget = false;
249
-
250
225
  if (isRayCastOcclusion) {
251
226
  if (Array.isArray(occlude)) {
252
227
  raytraceTarget = occlude.map(item => item.current);
@@ -254,25 +229,20 @@ const Html = /*#__PURE__*/React.forwardRef(({
254
229
  raytraceTarget = [scene];
255
230
  }
256
231
  }
257
-
258
232
  const previouslyVisible = visible.current;
259
-
260
233
  if (raytraceTarget) {
261
234
  const isvisible = isObjectVisible(group.current, camera, raycaster, raytraceTarget);
262
235
  visible.current = isvisible && !isBehindCamera;
263
236
  } else {
264
237
  visible.current = !isBehindCamera;
265
238
  }
266
-
267
239
  if (previouslyVisible !== visible.current) {
268
240
  if (onOcclude) onOcclude(!visible.current);else el.style.display = visible.current ? 'block' : 'none';
269
241
  }
270
-
271
242
  const halfRange = Math.floor(zIndexRange[0] / 2);
272
243
  const zRange = occlude ? isRayCastOcclusion //
273
244
  ? [zIndexRange[0], halfRange] : [halfRange - 1, 0] : zIndexRange;
274
245
  el.style.zIndex = `${objectZIndex(group.current, camera, zRange)}`;
275
-
276
246
  if (transform) {
277
247
  const [widthHalf, heightHalf] = [size.width / 2, size.height / 2];
278
248
  const fov = camera.projectionMatrix.elements[5] * heightHalf;
@@ -286,17 +256,14 @@ const Html = /*#__PURE__*/React.forwardRef(({
286
256
  const cameraMatrix = getCameraCSSMatrix(camera.matrixWorldInverse);
287
257
  const cameraTransform = isOrthographicCamera ? `scale(${fov})translate(${epsilon(-(right + left) / 2)}px,${epsilon((top + bottom) / 2)}px)` : `translateZ(${fov}px)`;
288
258
  let matrix = group.current.matrixWorld;
289
-
290
259
  if (sprite) {
291
260
  matrix = camera.matrixWorldInverse.clone().transpose().copyPosition(matrix).scale(group.current.scale);
292
261
  matrix.elements[3] = matrix.elements[7] = matrix.elements[11] = 0;
293
262
  matrix.elements[15] = 1;
294
263
  }
295
-
296
264
  el.style.width = size.width + 'px';
297
265
  el.style.height = size.height + 'px';
298
266
  el.style.perspective = isOrthographicCamera ? '' : `${fov}px`;
299
-
300
267
  if (transformOuterRef.current && transformInnerRef.current) {
301
268
  transformOuterRef.current.style.transform = `${cameraTransform}${cameraMatrix}translate(${widthHalf}px,${heightHalf}px)`;
302
269
  transformInnerRef.current.style.transform = getObjectCSSMatrix(matrix, 1 / ((distanceFactor || 10) / 400));
@@ -305,22 +272,18 @@ const Html = /*#__PURE__*/React.forwardRef(({
305
272
  const scale = distanceFactor === undefined ? 1 : objectScale(group.current, camera) * distanceFactor;
306
273
  el.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale})`;
307
274
  }
308
-
309
275
  oldPosition.current = vec;
310
276
  oldZoom.current = camera.zoom;
311
277
  }
312
278
  }
313
-
314
279
  if (!isRayCastOcclusion && occlusionMeshRef.current && !isMeshSizeSet.current) {
315
280
  if (transform) {
316
281
  if (transformOuterRef.current) {
317
282
  const el = transformOuterRef.current.children[0];
318
-
319
283
  if (el != null && el.clientWidth && el != null && el.clientHeight) {
320
284
  const {
321
285
  isOrthographicCamera
322
286
  } = camera;
323
-
324
287
  if (isOrthographicCamera || geometry) {
325
288
  if (props.scale) {
326
289
  if (!Array.isArray(props.scale)) {
@@ -337,13 +300,11 @@ const Html = /*#__PURE__*/React.forwardRef(({
337
300
  const h = el.clientHeight * ratio;
338
301
  occlusionMeshRef.current.scale.set(w, h, 1);
339
302
  }
340
-
341
303
  isMeshSizeSet.current = true;
342
304
  }
343
305
  }
344
306
  } else {
345
307
  const ele = el.children[0];
346
-
347
308
  if (ele != null && ele.clientWidth && ele != null && ele.clientHeight) {
348
309
  const ratio = 1 / viewport.factor;
349
310
  const w = ele.clientWidth * ratio;
@@ -351,15 +312,12 @@ const Html = /*#__PURE__*/React.forwardRef(({
351
312
  occlusionMeshRef.current.scale.set(w, h, 1);
352
313
  isMeshSizeSet.current = true;
353
314
  }
354
-
355
315
  occlusionMeshRef.current.lookAt(gl.camera.position);
356
316
  }
357
317
  }
358
318
  });
359
319
  const shaders = React.useMemo(() => ({
360
- vertexShader: !transform ?
361
- /* glsl */
362
- `
320
+ vertexShader: !transform ? /* glsl */`
363
321
  /*
364
322
  This shader is from the THREE's SpriteMaterial.
365
323
  We need to turn the backing plane into a Sprite
@@ -393,9 +351,7 @@ const Html = /*#__PURE__*/React.forwardRef(({
393
351
  gl_Position = projectionMatrix * mvPosition;
394
352
  }
395
353
  ` : undefined,
396
- fragmentShader:
397
- /* glsl */
398
- `
354
+ fragmentShader: /* glsl */`
399
355
  void main() {
400
356
  gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
401
357
  }
@@ -1,10 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import { StoreApi } from 'zustand';
3
- declare type State = object;
4
- declare type StateSelector<T extends State, U> = (state: T) => U;
5
- declare type EqualityChecker<T> = (state: T, newState: T) => boolean;
6
- declare type StateListener<T> = (state: T, previousState: T) => void;
7
- declare type StoreApiWithSubscribeWithSelector<T extends State> = Omit<StoreApi<T>, 'subscribe'> & {
3
+ type State = object;
4
+ type StateSelector<T extends State, U> = (state: T) => U;
5
+ type EqualityChecker<T> = (state: T, newState: T) => boolean;
6
+ type StateListener<T> = (state: T, previousState: T) => void;
7
+ type StoreApiWithSubscribeWithSelector<T extends State> = Omit<StoreApi<T>, 'subscribe'> & {
8
8
  subscribe: {
9
9
  (listener: StateListener<T>): () => void;
10
10
  <StateSlice>(selector: StateSelector<T, StateSlice>, listener: StateListener<StateSlice>, options?: {
@@ -13,22 +13,22 @@ declare type StoreApiWithSubscribeWithSelector<T extends State> = Omit<StoreApi<
13
13
  }): () => void;
14
14
  };
15
15
  };
16
- declare type KeyboardControlsState<T extends string = string> = {
16
+ type KeyboardControlsState<T extends string = string> = {
17
17
  [K in T]: boolean;
18
18
  };
19
- export declare type KeyboardControlsEntry<T extends string = string> = {
19
+ export type KeyboardControlsEntry<T extends string = string> = {
20
20
  name: T;
21
21
  keys: string[];
22
22
  up?: boolean;
23
23
  };
24
- declare type KeyboardControlsProps = {
24
+ type KeyboardControlsProps = {
25
25
  map: KeyboardControlsEntry[];
26
26
  children: React.ReactNode;
27
27
  onChange?: (name: string, pressed: boolean, state: KeyboardControlsState) => void;
28
28
  domElement?: HTMLElement;
29
29
  };
30
- export declare function KeyboardControls({ map, children, onChange, domElement }: KeyboardControlsProps): JSX.Element;
31
- declare type Selector<T extends string = string> = (state: KeyboardControlsState<T>) => boolean;
30
+ export declare function KeyboardControls({ map, children, onChange, domElement }: KeyboardControlsProps): React.JSX.Element;
31
+ type Selector<T extends string = string> = (state: KeyboardControlsState<T>) => boolean;
32
32
  export declare function useKeyboardControls<T extends string = string>(): [
33
33
  StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['subscribe'],
34
34
  StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['getState']
@@ -2,6 +2,11 @@ import * as React from 'react';
2
2
  import create from 'zustand';
3
3
  import { subscribeWithSelector } from 'zustand/middleware';
4
4
 
5
+ // These are removed in Zustand v4
6
+ // unknown
7
+
8
+ // Zustand v3 marked deprecations in 3.x, but there's no visible upgrade path
9
+
5
10
  const context = /*@__PURE__*/React.createContext(null);
6
11
  function KeyboardControls({
7
12
  map,
@@ -11,7 +16,8 @@ function KeyboardControls({
11
16
  }) {
12
17
  const key = map.map(item => item.name + item.keys).join('-');
13
18
  const useControls = React.useMemo(() => {
14
- return create(subscribeWithSelector(() => map.reduce((prev, cur) => ({ ...prev,
19
+ return create(subscribeWithSelector(() => map.reduce((prev, cur) => ({
20
+ ...prev,
15
21
  [cur.name]: false
16
22
  }), {})));
17
23
  }, [key]);
@@ -29,8 +35,8 @@ function KeyboardControls({
29
35
  // Set zustand state
30
36
  set({
31
37
  [name]: value
32
- }); // Inform callback
33
-
38
+ });
39
+ // Inform callback
34
40
  if (onChange) onChange(name, value, api[1]());
35
41
  }
36
42
  }));
@@ -46,7 +52,6 @@ function KeyboardControls({
46
52
  });
47
53
  return out;
48
54
  }, {});
49
-
50
55
  const downHandler = ({
51
56
  key,
52
57
  code
@@ -61,7 +66,6 @@ function KeyboardControls({
61
66
  obj.pressed = true;
62
67
  if (up || !pressed) fn(true);
63
68
  };
64
-
65
69
  const upHandler = ({
66
70
  key,
67
71
  code
@@ -75,7 +79,6 @@ function KeyboardControls({
75
79
  obj.pressed = false;
76
80
  if (up) fn(false);
77
81
  };
78
-
79
82
  const source = domElement || window;
80
83
  source.addEventListener('keydown', downHandler, {
81
84
  passive: true
package/web/Loader.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import * as React from 'react';
2
2
  interface LoaderOptions {
3
3
  containerStyles: any;
4
4
  innerStyles: any;
@@ -7,5 +7,5 @@ interface LoaderOptions {
7
7
  dataInterpolation: (p: number) => string;
8
8
  initialState: (active: boolean) => boolean;
9
9
  }
10
- export declare function Loader({ containerStyles, innerStyles, barStyles, dataStyles, dataInterpolation, initialState, }: Partial<LoaderOptions>): JSX.Element | null;
10
+ export declare function Loader({ containerStyles, innerStyles, barStyles, dataStyles, dataInterpolation, initialState, }: Partial<LoaderOptions>): React.JSX.Element | null;
11
11
  export {};
package/web/Loader.js CHANGED
@@ -2,7 +2,6 @@ import * as React from 'react';
2
2
  import { useProgress } from '../core/useProgress.js';
3
3
 
4
4
  const defaultDataInterpolation = p => `Loading ${p.toFixed(2)}%`;
5
-
6
5
  function Loader({
7
6
  containerStyles,
8
7
  innerStyles,
@@ -36,22 +35,26 @@ function Loader({
36
35
  return () => cancelAnimationFrame(rafRef.current);
37
36
  }, [updateProgress]);
38
37
  return shown ? /*#__PURE__*/React.createElement("div", {
39
- style: { ...styles.container,
38
+ style: {
39
+ ...styles.container,
40
40
  opacity: active ? 1 : 0,
41
41
  ...containerStyles
42
42
  }
43
43
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
44
- style: { ...styles.inner,
44
+ style: {
45
+ ...styles.inner,
45
46
  ...innerStyles
46
47
  }
47
48
  }, /*#__PURE__*/React.createElement("div", {
48
- style: { ...styles.bar,
49
+ style: {
50
+ ...styles.bar,
49
51
  transform: `scaleX(${progress / 100})`,
50
52
  ...barStyles
51
53
  }
52
54
  }), /*#__PURE__*/React.createElement("span", {
53
55
  ref: progressSpanRef,
54
- style: { ...styles.data,
56
+ style: {
57
+ ...styles.data,
55
58
  ...dataStyles
56
59
  }
57
60
  })))) : null;
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { SpringConfig } from '@react-spring/three';
3
- export declare type PresentationControlProps = {
3
+ export type PresentationControlProps = {
4
4
  snap?: Boolean | SpringConfig;
5
5
  global?: boolean;
6
6
  cursor?: boolean;
@@ -14,4 +14,4 @@ export declare type PresentationControlProps = {
14
14
  children?: React.ReactNode;
15
15
  domElement?: HTMLElement;
16
16
  };
17
- export declare function PresentationControls({ enabled, snap, global, domElement, cursor, children, speed, rotation, zoom, polar, azimuth, config, }: PresentationControlProps): JSX.Element;
17
+ export declare function PresentationControls({ enabled, snap, global, domElement, cursor, children, speed, rotation, zoom, polar, azimuth, config, }: PresentationControlProps): React.JSX.Element;
@@ -71,7 +71,8 @@ function PresentationControls({
71
71
  api.start({
72
72
  scale: down && y > rPolar[1] / 2 ? zoom : 1,
73
73
  rotation: snap && !down ? rInitial : [y, x, 0],
74
- config: n => n === 'scale' ? { ...sConfig,
74
+ config: n => n === 'scale' ? {
75
+ ...sConfig,
75
76
  friction: sConfig.friction * 3
76
77
  } : sConfig
77
78
  });
@@ -1,7 +1,7 @@
1
1
  import * as THREE from 'three';
2
2
  import * as React from 'react';
3
3
  import { ForwardRefComponent } from '../helpers/ts-utils';
4
- export declare type ScrollControlsProps = {
4
+ export type ScrollControlsProps = {
5
5
  eps?: number;
6
6
  horizontal?: boolean;
7
7
  infinite?: boolean;
@@ -13,7 +13,7 @@ export declare type ScrollControlsProps = {
13
13
  style?: React.CSSProperties;
14
14
  children: React.ReactNode;
15
15
  };
16
- export declare type ScrollControlsState = {
16
+ export type ScrollControlsState = {
17
17
  el: HTMLDivElement;
18
18
  eps: number;
19
19
  fill: HTMLDivElement;
@@ -28,8 +28,8 @@ export declare type ScrollControlsState = {
28
28
  visible(from: number, distance: number, margin?: number): boolean;
29
29
  };
30
30
  export declare function useScroll(): ScrollControlsState;
31
- export declare function ScrollControls({ eps, enabled, infinite, horizontal, pages, distance, damping, maxSpeed, style, children, }: ScrollControlsProps): JSX.Element;
32
- declare type ScrollProps = {
31
+ export declare function ScrollControls({ eps, enabled, infinite, horizontal, pages, distance, damping, maxSpeed, style, children, }: ScrollControlsProps): React.JSX.Element;
32
+ type ScrollProps = {
33
33
  html?: boolean;
34
34
  children?: React.ReactNode;
35
35
  };
@@ -46,26 +46,22 @@ function ScrollControls({
46
46
  delta: 0,
47
47
  scroll,
48
48
  pages,
49
-
50
49
  // 0-1 for a range between from -> from + distance
51
50
  range(from, distance, margin = 0) {
52
51
  const start = from - margin;
53
52
  const end = start + distance + margin * 2;
54
53
  return this.offset < start ? 0 : this.offset > end ? 1 : (this.offset - start) / (end - start);
55
54
  },
56
-
57
55
  // 0-1-0 for a range between from -> from + distance
58
56
  curve(from, distance, margin = 0) {
59
57
  return Math.sin(this.range(from, distance, margin) * Math.PI);
60
58
  },
61
-
62
59
  // true/false for a range between from -> from + distance
63
60
  visible(from, distance, margin = 0) {
64
61
  const start = from - margin;
65
62
  const end = start + distance + margin * 2;
66
63
  return this.offset >= start && this.offset <= end;
67
64
  }
68
-
69
65
  };
70
66
  return state;
71
67
  }, [eps, damping, horizontal, pages]);
@@ -77,11 +73,9 @@ function ScrollControls({
77
73
  el.style[horizontal ? 'overflowY' : 'overflowX'] = 'hidden';
78
74
  el.style.top = '0px';
79
75
  el.style.left = '0px';
80
-
81
76
  for (const key in style) {
82
77
  el.style[key] = style[key];
83
78
  }
84
-
85
79
  fixed.style.position = 'sticky';
86
80
  fixed.style.top = '0px';
87
81
  fixed.style.left = '0px';
@@ -93,8 +87,9 @@ function ScrollControls({
93
87
  fill.style.width = horizontal ? `${pages * distance * 100}%` : '100%';
94
88
  fill.style.pointerEvents = 'none';
95
89
  el.appendChild(fill);
96
- target.appendChild(el); // Init scroll one pixel in to allow upward/leftward scroll
90
+ target.appendChild(el);
97
91
 
92
+ // Init scroll one pixel in to allow upward/leftward scroll
98
93
  el[horizontal ? 'scrollLeft' : 'scrollTop'] = 1;
99
94
  const oldTarget = events.connected || gl.domElement;
100
95
  requestAnimationFrame(() => events.connect == null ? void 0 : events.connect(el));
@@ -111,14 +106,13 @@ function ScrollControls({
111
106
  state.pointer.set(offsetX / state.size.width * 2 - 1, -(offsetY / state.size.height) * 2 + 1);
112
107
  state.raycaster.setFromCamera(state.pointer, state.camera);
113
108
  }
114
-
115
109
  });
116
110
  return () => {
117
111
  target.removeChild(el);
118
112
  setEvents({
119
113
  compute: oldCompute
120
114
  });
121
- events.connect == null ? void 0 : events.connect(oldTarget);
115
+ events.connect == null || events.connect(oldTarget);
122
116
  };
123
117
  }, [pages, distance, horizontal, el, fill, fixed, target]);
124
118
  React.useEffect(() => {
@@ -129,14 +123,12 @@ function ScrollControls({
129
123
  let current = 0;
130
124
  let disableScroll = true;
131
125
  let firstRun = true;
132
-
133
126
  const onScroll = () => {
134
127
  // Prevent first scroll because it is indirectly caused by the one pixel offset
135
128
  if (!enabled || firstRun) return;
136
129
  invalidate();
137
130
  current = el[horizontal ? 'scrollLeft' : 'scrollTop'];
138
131
  scroll.current = current / scrollThreshold;
139
-
140
132
  if (infinite) {
141
133
  if (!disableScroll) {
142
134
  if (current >= scrollThreshold) {
@@ -151,18 +143,14 @@ function ScrollControls({
151
143
  disableScroll = true;
152
144
  }
153
145
  }
154
-
155
146
  if (disableScroll) setTimeout(() => disableScroll = false, 40);
156
147
  }
157
148
  };
158
-
159
149
  el.addEventListener('scroll', onScroll, {
160
150
  passive: true
161
151
  });
162
152
  requestAnimationFrame(() => firstRun = false);
163
-
164
153
  const onWheel = e => el.scrollLeft += e.deltaY / 2;
165
-
166
154
  if (horizontal) el.addEventListener('wheel', onWheel, {
167
155
  passive: true
168
156
  });
@@ -220,7 +208,8 @@ const ScrollHtml = /*#__PURE__*/React.forwardRef(({
220
208
  });
221
209
  root.render( /*#__PURE__*/React.createElement("div", _extends({
222
210
  ref: mergeRefs([ref, group]),
223
- style: { ...style,
211
+ style: {
212
+ ...style,
224
213
  position: 'absolute',
225
214
  top: 0,
226
215
  left: 0,
package/web/Select.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- /// <reference types="react" />
1
+ import * as React from 'react';
2
2
  import * as THREE from 'three';
3
- declare type Props = JSX.IntrinsicElements['group'] & {
3
+ type Props = JSX.IntrinsicElements['group'] & {
4
4
  multiple?: boolean;
5
5
  box?: boolean;
6
6
  border?: string;
@@ -9,6 +9,6 @@ declare type Props = JSX.IntrinsicElements['group'] & {
9
9
  onChangePointerUp?: (selected: THREE.Object3D[]) => void;
10
10
  filter?: (selected: THREE.Object3D[]) => THREE.Object3D[];
11
11
  };
12
- export declare function Select({ box, multiple, children, onChange, onChangePointerUp, border, backgroundColor, filter: customFilter, ...props }: Props): JSX.Element;
12
+ export declare function Select({ box, multiple, children, onChange, onChangePointerUp, border, backgroundColor, filter: customFilter, ...props }: Props): React.JSX.Element;
13
13
  export declare function useSelect(): THREE.Object3D[];
14
14
  export {};