@gradio/model3d 0.3.1 → 0.4.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 (5) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/package.json +2 -2
  3. package/shared/Model3D.svelte +7 -2
  4. package/shared/Model3DUpload.svelte +4 -2
  5. package/shared/utils.ts +16 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @gradio/model3d
2
2
 
3
+ ## 0.4.0
4
+
5
+ ### Features
6
+
7
+ - [#6240](https://github.com/gradio-app/gradio/pull/6240) [`dd901c1b0`](https://github.com/gradio-app/gradio/commit/dd901c1b0af73a78fca8b6875b2bb00f84071ac8) - Model3D panning, improved UX. Thanks [@dylanebert](https://github.com/dylanebert)!
8
+ - [#6255](https://github.com/gradio-app/gradio/pull/6255) [`e3ede2ff7`](https://github.com/gradio-app/gradio/commit/e3ede2ff7d4a36fb21bb0b146b8d5ad239c0e086) - Ensure Model 3D updates when attributes change. Thanks [@hannahblair](https://github.com/hannahblair)!
9
+
3
10
  ## 0.3.1
4
11
 
5
12
  ### Patch Changes
@@ -136,4 +143,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
136
143
 
137
144
  - Updated dependencies []:
138
145
  - @gradio/atoms@0.0.2
139
- - @gradio/upload@0.0.2
146
+ - @gradio/upload@0.0.2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/model3d",
3
- "version": "0.3.1",
3
+ "version": "0.4.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -14,7 +14,7 @@
14
14
  "@gradio/client": "^0.7.1",
15
15
  "@gradio/icons": "^0.2.0",
16
16
  "@gradio/statustracker": "^0.3.0",
17
- "@gradio/upload": "^0.3.1",
17
+ "@gradio/upload": "^0.3.2",
18
18
  "@gradio/utils": "^0.2.0"
19
19
  },
20
20
  "main_changeset": true,
package/shared/Model3D.svelte CHANGED
@@ -14,6 +14,7 @@
14
14
  export let show_label: boolean;
15
15
  export let i18n: I18nFormatter;
16
16
  export let zoom_speed = 1;
17
+ export let pan_speed = 1;
17
18
 
18
19
  // alpha, beta, radius
19
20
  export let camera_position: [number | null, number | null, number | null] = [
@@ -69,14 +70,18 @@
69
70
  value,
70
71
  clear_color,
71
72
  camera_position,
72
- zoom_speed
73
+ zoom_speed,
74
+ pan_speed
73
75
  );
74
76
  }
75
77
  }
76
78
 
77
79
  function handle_undo(): void {
78
- reset_camera_position(scene, camera_position, zoom_speed);
80
+ reset_camera_position(scene, camera_position, zoom_speed, pan_speed);
79
81
  }
82
+
83
+ $: if (scene)
84
+ reset_camera_position(scene, camera_position, zoom_speed, pan_speed);
80
85
  </script>
81
86
 
82
87
  <BlockLabel
package/shared/Model3DUpload.svelte CHANGED
@@ -13,6 +13,7 @@
13
13
  export let root: string;
14
14
  export let i18n: I18nFormatter;
15
15
  export let zoom_speed = 1;
16
+ export let pan_speed = 1;
16
17
 
17
18
  // alpha, beta, radius
18
19
  export let camera_position: [number | null, number | null, number | null] = [
@@ -34,7 +35,8 @@
34
35
  value,
35
36
  clear_color,
36
37
  camera_position,
37
- zoom_speed
38
+ zoom_speed,
39
+ pan_speed
38
40
  );
39
41
  }
40
42
 
@@ -71,7 +73,7 @@
71
73
  }
72
74
 
73
75
  async function handle_undo(): Promise<void> {
74
- reset_camera_position(scene, camera_position, zoom_speed);
76
+ reset_camera_position(scene, camera_position, zoom_speed, pan_speed);
75
77
  }
76
78
 
77
79
  const dispatch = createEventDispatcher<{
package/shared/utils.ts CHANGED
@@ -4,7 +4,8 @@ import * as BABYLON from "babylonjs";
4
4
  const create_camera = (
5
5
  scene: BABYLON.Scene,
6
6
  camera_position: [number | null, number | null, number | null],
7
- zoom_speed: number
7
+ zoom_speed: number,
8
+ pan_speed: number
8
9
  ): void => {
9
10
  scene.createDefaultCamera(true, true, true);
10
11
  var helperCamera = scene.activeCamera! as BABYLON.ArcRotateCamera;
@@ -17,11 +18,14 @@ const create_camera = (
17
18
  if (camera_position[2] !== null) {
18
19
  helperCamera.radius = camera_position[2];
19
20
  }
20
- // Disable panning. Adapted from: https://playground.babylonjs.com/#4U6TVQ#3
21
- helperCamera.panningSensibility = 0;
22
- helperCamera.attachControl(false, false, -1);
23
- helperCamera.pinchToPanMaxDistance = 0;
24
- helperCamera.wheelPrecision = 2500 / zoom_speed;
21
+ helperCamera.lowerRadiusLimit = 0.1;
22
+ const updateCameraSensibility = (): void => {
23
+ helperCamera.wheelPrecision = 250 / (helperCamera.radius * zoom_speed);
24
+ helperCamera.panningSensibility = (10000 * pan_speed) / helperCamera.radius;
25
+ };
26
+ updateCameraSensibility();
27
+ helperCamera.attachControl(true);
28
+ helperCamera.onAfterCheckInputsObservable.add(updateCameraSensibility);
25
29
  };
26
30
 
27
31
  export const add_new_model = (
@@ -31,7 +35,8 @@ export const add_new_model = (
31
35
  value: FileData | null,
32
36
  clear_color: [number, number, number, number],
33
37
  camera_position: [number | null, number | null, number | null],
34
- zoom_speed: number
38
+ zoom_speed: number,
39
+ pan_speed: number
35
40
  ): BABYLON.Scene => {
36
41
  if (scene && !scene.isDisposed && engine) {
37
42
  scene.dispose();
@@ -61,7 +66,7 @@ export const add_new_model = (
61
66
  url,
62
67
  "",
63
68
  scene,
64
- () => create_camera(scene, camera_position, zoom_speed),
69
+ () => create_camera(scene, camera_position, zoom_speed, pan_speed),
65
70
  undefined,
66
71
  undefined,
67
72
  "." + value.path.split(".")[1]
@@ -72,8 +77,9 @@ export const add_new_model = (
72
77
  export const reset_camera_position = (
73
78
  scene: BABYLON.Scene,
74
79
  camera_position: [number | null, number | null, number | null],
75
- zoom_speed: number
80
+ zoom_speed: number,
81
+ pan_speed: number
76
82
  ): void => {
77
83
  scene.removeCamera(scene.activeCamera!);
78
- create_camera(scene, camera_position, zoom_speed);
84
+ create_camera(scene, camera_position, zoom_speed, pan_speed);
79
85
  };