@tomorrowevening/hermes 0.1.17 → 0.1.18

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/LICENSE +674 -674
  2. package/README.md +128 -128
  3. package/dist/hermes.cjs.js +1 -1
  4. package/dist/hermes.es.js +15 -18
  5. package/package.json +79 -79
package/README.md CHANGED
@@ -1,128 +1,128 @@
1
- # Hermes
2
-
3
- An extendable set of Web Tools controlled over a separate window for non-intereference with content (like a remote controller!)
4
-
5
- Open the [Application](https://hermes-lovat.vercel.app/) and [editor](https://hermes-lovat.vercel.app/#editor) side-by-side.
6
-
7
- ## Setup
8
-
9
- This example uses [React](https://react.dev/), [ThreeJS](https://threejs.org/), and [TheatreJS](https://theatrejs.com/).
10
-
11
- ### Create an `Application`
12
-
13
- An application isn't required, however it's nice to maintain multiple remotes. Alternatively, Remotes can be created independently.
14
-
15
- The `ThreeEditor` is used as a multi-view editor for [ThreeJS](https://threejs.org/), and should be limited to only the Editor app.
16
-
17
- ```
18
- const IS_DEV = true;
19
- const IS_EDITOR = IS_DEV && document.location.hash.search('editor') > -1;
20
-
21
- const theatre = new RemoteTheatre(IS_DEV, IS_EDITOR);
22
- const three = new RemoteThree('Hermes Example', IS_DEV, IS_EDITOR);
23
-
24
- export default function AppWrapper() {
25
- const [app, setApp] = useState<Application | null>(null);
26
-
27
- useEffect(() => {
28
- const instance = new Application();
29
- instance.detectSettings(IS_DEV, IS_EDITOR).then(() => {
30
- // TheatreJS
31
- instance.addComponent('theatre', theatre);
32
-
33
- // ThreeJS
34
- instance.addComponent('three', three);
35
-
36
- // Ready
37
- setApp(instance);
38
- });
39
- }, []);
40
-
41
- // MultiView requires you identify each scene so they can be instantiated by the editor
42
- const scenes: Map<string, any> = new Map();
43
- scenes.set('Scene1', Scene1);
44
- scenes.set('Scene2', Scene2);
45
- scenes.set('RTTScene', RTTScene);
46
-
47
- return (
48
- <>
49
- {app !== null && (
50
- <>
51
- {IS_DEV && (
52
- <>
53
- {IS_EDITOR && (
54
- <ThreeEditor
55
- three={three}
56
- scenes={scenes}
57
- onSceneUpdate={(scene: any) => {
58
- scene.update();
59
- }}
60
- />
61
- )}
62
- </>
63
- )}
64
- </>
65
- )}
66
- </>
67
- );
68
- }
69
- ```
70
-
71
- ### Scene setup
72
-
73
- After all object's have been added to your scene, run `hierarchyUUID(yourScene)` to update the UUIDs of every object. This helps communicate back and forth between the app and your editor.
74
-
75
- ### Custom remote commands
76
-
77
- This component is added only in debug-mode to add extra support for remote-components.
78
-
79
- In this example it's added to add custom Remote Component support for:
80
-
81
- - [TheatreJS](https://theatrejs.com/) - Communicates with the `studio` instance
82
-
83
- ```
84
- type RemoteProps = {
85
- three: RemoteThree
86
- theatre: RemoteTheatre
87
- }
88
-
89
- export default function RemoteSetup(props: RemoteProps) {
90
- // Remote Theatre setup
91
- props.theatre.studio = studio;
92
- props.theatre.handleEditorApp();
93
- return null;
94
- }
95
- ```
96
-
97
- ## Editor
98
-
99
- ### Tools for:
100
-
101
- - Customizable Navigation Dropdowns + Draggable components for Triggers/Event Dispatching
102
- - [TheatreJS](https://www.theatrejs.com/)
103
- - [ThreeJS](https://threejs.org/)
104
- - Custom ThreeJS Scene + Object Inspector
105
-
106
- ### ThreeJS Editor
107
-
108
- | Action | Keys |
109
- | ------ | ------ |
110
- | Zoom to Selected Item | CTRL + 0 |
111
- | Rotate to Front of Selected Item | CTRL + 1 |
112
- | Rotate to Top of Selected Item | CTRL + 2 |
113
- | Rotate to Right of Selected Item | CTRL + 3 |
114
- | Rotate to Back of Selected Item | CTRL + 4 |
115
- | Set Transform Controls to Rotate | r |
116
- | Set Transform Controls to Scale | s |
117
- | Set Transform Controls to Translate | t |
118
- | Toggles Transform Controls between **world** and **local** | q |
119
-
120
- ### Side Panel
121
-
122
- Holding down the **CTRL** key while dragging a number's label will multiply the delta by 10
123
-
124
- ![Drag Multiplier](images/dragMultiplier.gif)
125
-
126
- ### Assets
127
-
128
- Animation / Models found at [Mixamo](https://www.mixamo.com/)
1
+ # Hermes
2
+
3
+ An extendable set of Web Tools controlled over a separate window for non-intereference with content (like a remote controller!)
4
+
5
+ Open the [Application](https://hermes-lovat.vercel.app/) and [editor](https://hermes-lovat.vercel.app/#editor) side-by-side.
6
+
7
+ ## Setup
8
+
9
+ This example uses [React](https://react.dev/), [ThreeJS](https://threejs.org/), and [TheatreJS](https://theatrejs.com/).
10
+
11
+ ### Create an `Application`
12
+
13
+ An application isn't required, however it's nice to maintain multiple remotes. Alternatively, Remotes can be created independently.
14
+
15
+ The `ThreeEditor` is used as a multi-view editor for [ThreeJS](https://threejs.org/), and should be limited to only the Editor app.
16
+
17
+ ```
18
+ const IS_DEV = true;
19
+ const IS_EDITOR = IS_DEV && document.location.hash.search('editor') > -1;
20
+
21
+ const theatre = new RemoteTheatre(IS_DEV, IS_EDITOR);
22
+ const three = new RemoteThree('Hermes Example', IS_DEV, IS_EDITOR);
23
+
24
+ export default function AppWrapper() {
25
+ const [app, setApp] = useState<Application | null>(null);
26
+
27
+ useEffect(() => {
28
+ const instance = new Application();
29
+ instance.detectSettings(IS_DEV, IS_EDITOR).then(() => {
30
+ // TheatreJS
31
+ instance.addComponent('theatre', theatre);
32
+
33
+ // ThreeJS
34
+ instance.addComponent('three', three);
35
+
36
+ // Ready
37
+ setApp(instance);
38
+ });
39
+ }, []);
40
+
41
+ // MultiView requires you identify each scene so they can be instantiated by the editor
42
+ const scenes: Map<string, any> = new Map();
43
+ scenes.set('Scene1', Scene1);
44
+ scenes.set('Scene2', Scene2);
45
+ scenes.set('RTTScene', RTTScene);
46
+
47
+ return (
48
+ <>
49
+ {app !== null && (
50
+ <>
51
+ {IS_DEV && (
52
+ <>
53
+ {IS_EDITOR && (
54
+ <ThreeEditor
55
+ three={three}
56
+ scenes={scenes}
57
+ onSceneUpdate={(scene: any) => {
58
+ scene.update();
59
+ }}
60
+ />
61
+ )}
62
+ </>
63
+ )}
64
+ </>
65
+ )}
66
+ </>
67
+ );
68
+ }
69
+ ```
70
+
71
+ ### Scene setup
72
+
73
+ After all object's have been added to your scene, run `hierarchyUUID(yourScene)` to update the UUIDs of every object. This helps communicate back and forth between the app and your editor.
74
+
75
+ ### Custom remote commands
76
+
77
+ This component is added only in debug-mode to add extra support for remote-components.
78
+
79
+ In this example it's added to add custom Remote Component support for:
80
+
81
+ - [TheatreJS](https://theatrejs.com/) - Communicates with the `studio` instance
82
+
83
+ ```
84
+ type RemoteProps = {
85
+ three: RemoteThree
86
+ theatre: RemoteTheatre
87
+ }
88
+
89
+ export default function RemoteSetup(props: RemoteProps) {
90
+ // Remote Theatre setup
91
+ props.theatre.studio = studio;
92
+ props.theatre.handleEditorApp();
93
+ return null;
94
+ }
95
+ ```
96
+
97
+ ## Editor
98
+
99
+ ### Tools for:
100
+
101
+ - Customizable Navigation Dropdowns + Draggable components for Triggers/Event Dispatching
102
+ - [TheatreJS](https://www.theatrejs.com/)
103
+ - [ThreeJS](https://threejs.org/)
104
+ - Custom ThreeJS Scene + Object Inspector
105
+
106
+ ### ThreeJS Editor
107
+
108
+ | Action | Keys |
109
+ | ------ | ------ |
110
+ | Zoom to Selected Item | CTRL + 0 |
111
+ | Rotate to Front of Selected Item | CTRL + 1 |
112
+ | Rotate to Top of Selected Item | CTRL + 2 |
113
+ | Rotate to Right of Selected Item | CTRL + 3 |
114
+ | Rotate to Back of Selected Item | CTRL + 4 |
115
+ | Set Transform Controls to Rotate | r |
116
+ | Set Transform Controls to Scale | s |
117
+ | Set Transform Controls to Translate | t |
118
+ | Toggles Transform Controls between **world** and **local** | q |
119
+
120
+ ### Side Panel
121
+
122
+ Holding down the **CTRL** key while dragging a number's label will multiply the delta by 10
123
+
124
+ ![Drag Multiplier](images/dragMultiplier.gif)
125
+
126
+ ### Assets
127
+
128
+ Animation / Models found at [Mixamo](https://www.mixamo.com/)