@tomorrowevening/hermes 0.0.37 → 0.0.38
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/dist/hermes.cjs.js +15 -15
- package/dist/hermes.esm.js +981 -971
- package/package.json +1 -5
- package/types/core/Application.d.ts +5 -4
- package/types/core/remote/BaseRemote.d.ts +4 -0
- package/types/core/remote/RemoteComponents.d.ts +1 -2
- package/types/core/remote/RemoteTheatre.d.ts +3 -4
- package/types/core/remote/RemoteThree.d.ts +2 -3
- package/types/core/remote/RemoteTweakpane.d.ts +1 -1
- package/dist/hermes.umd.js +0 -144
- package/src/core/Application.ts +0 -111
- package/src/core/RemoteController.ts +0 -60
- package/src/core/remote/BaseRemote.ts +0 -16
- package/src/core/remote/RemoteComponents.ts +0 -45
- package/src/core/remote/RemoteTheatre.ts +0 -300
- package/src/core/remote/RemoteThree.ts +0 -143
- package/src/core/remote/RemoteTweakpane.ts +0 -194
- package/src/core/types.ts +0 -56
- package/src/editor/Editor.tsx +0 -20
- package/src/editor/components/Draggable.tsx +0 -40
- package/src/editor/components/DraggableItem.tsx +0 -22
- package/src/editor/components/Dropdown.tsx +0 -38
- package/src/editor/components/DropdownItem.tsx +0 -64
- package/src/editor/components/NavButton.tsx +0 -11
- package/src/editor/components/content.ts +0 -2
- package/src/editor/components/icons/CloseIcon.tsx +0 -7
- package/src/editor/components/icons/DragIcon.tsx +0 -9
- package/src/editor/components/types.ts +0 -41
- package/src/editor/global.ts +0 -20
- package/src/editor/multiView/CameraWindow.tsx +0 -74
- package/src/editor/multiView/InfiniteGridHelper.ts +0 -24
- package/src/editor/multiView/InfiniteGridMaterial.ts +0 -127
- package/src/editor/multiView/MultiView.scss +0 -101
- package/src/editor/multiView/MultiView.tsx +0 -636
- package/src/editor/multiView/MultiViewData.ts +0 -59
- package/src/editor/multiView/UVMaterial.ts +0 -55
- package/src/editor/scss/_debug.scss +0 -58
- package/src/editor/scss/_draggable.scss +0 -43
- package/src/editor/scss/_dropdown.scss +0 -84
- package/src/editor/scss/_sidePanel.scss +0 -278
- package/src/editor/scss/_theme.scss +0 -9
- package/src/editor/scss/index.scss +0 -67
- package/src/editor/sidePanel/Accordion.tsx +0 -41
- package/src/editor/sidePanel/ChildObject.tsx +0 -57
- package/src/editor/sidePanel/ContainerObject.tsx +0 -11
- package/src/editor/sidePanel/SidePanel.tsx +0 -64
- package/src/editor/sidePanel/ToggleBtn.tsx +0 -27
- package/src/editor/sidePanel/inspector/Inspector.tsx +0 -119
- package/src/editor/sidePanel/inspector/InspectorField.tsx +0 -198
- package/src/editor/sidePanel/inspector/InspectorGroup.tsx +0 -50
- package/src/editor/sidePanel/inspector/SceneInspector.tsx +0 -84
- package/src/editor/sidePanel/inspector/inspector.scss +0 -161
- package/src/editor/sidePanel/inspector/utils/InspectAnimation.tsx +0 -102
- package/src/editor/sidePanel/inspector/utils/InspectCamera.tsx +0 -75
- package/src/editor/sidePanel/inspector/utils/InspectLight.tsx +0 -62
- package/src/editor/sidePanel/inspector/utils/InspectMaterial.tsx +0 -710
- package/src/editor/sidePanel/inspector/utils/InspectTransform.tsx +0 -113
- package/src/editor/sidePanel/types.ts +0 -130
- package/src/editor/sidePanel/utils.ts +0 -278
- package/src/editor/utils.ts +0 -117
- package/src/example/CustomEditor.tsx +0 -78
- package/src/example/components/App.css +0 -6
- package/src/example/components/App.tsx +0 -246
- package/src/example/constants.ts +0 -52
- package/src/example/index.scss +0 -45
- package/src/example/main.tsx +0 -37
- package/src/example/three/BaseScene.ts +0 -42
- package/src/example/three/CustomMaterial.ts +0 -72
- package/src/example/three/FBXAnimation.ts +0 -26
- package/src/example/three/Scene1.ts +0 -225
- package/src/example/three/Scene2.ts +0 -138
- package/src/example/three/loader.ts +0 -110
- package/src/index.ts +0 -27
- package/src/vite-env.d.ts +0 -1
@@ -1,161 +0,0 @@
|
|
1
|
-
$icon_folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAB1CAYAAADN5fjJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzklEQVR4nO3bwQqCUBBA0Yz+/5dt1eYRkVfKWZyzUgi5zEJSxm3f99tU96sDPhFXiavEVeIqcZW4anTcYzmf8P9pex2Mnpy4Slwlrhodt96Et7e/usjoyYmrxFXiKnGVuEpcJa4SV4mrxFXiKnGVuEpcJa4SV4mrxFXiKnGVuEpcJa4SV4mrxFXiqtFx69LLUd9sKuZFmtGTE1eJq8RV4ipx1T+2+o9e01b/aeIqcZW46uxWvweckcRV4ipxlbhqdNzZl4c//cJu9ORGxz0BUl8I9T4qXncAAAAASUVORK5CYII=');
|
2
|
-
|
3
|
-
#Inspector {
|
4
|
-
.field {
|
5
|
-
align-items: center;
|
6
|
-
background-color: #222;
|
7
|
-
display: flex;
|
8
|
-
flex-direction: row;
|
9
|
-
flex-wrap: wrap;
|
10
|
-
min-height: 21px;
|
11
|
-
overflow: hidden;
|
12
|
-
padding: 1px;
|
13
|
-
position: relative;
|
14
|
-
|
15
|
-
label {
|
16
|
-
line-height: normal;
|
17
|
-
margin: 0 10px;
|
18
|
-
max-width: 180px;
|
19
|
-
user-select: none;
|
20
|
-
width: fit-content;
|
21
|
-
min-width: 20px;
|
22
|
-
text-align: center;
|
23
|
-
}
|
24
|
-
|
25
|
-
input {
|
26
|
-
block-size: 11px;
|
27
|
-
flex: 1%;
|
28
|
-
margin: 0;
|
29
|
-
padding: 4px;
|
30
|
-
outline: none;
|
31
|
-
&.min {
|
32
|
-
height: 11px;
|
33
|
-
flex: none;
|
34
|
-
width: 30px;
|
35
|
-
margin-right: 1px;
|
36
|
-
}
|
37
|
-
&.color {
|
38
|
-
flex: none;
|
39
|
-
width: 60px;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
|
43
|
-
input[type='checkbox'] {
|
44
|
-
flex: none;
|
45
|
-
}
|
46
|
-
|
47
|
-
input[type='color'] {
|
48
|
-
block-size: revert;
|
49
|
-
height: 21px;
|
50
|
-
padding-block: revert;
|
51
|
-
padding: 0;
|
52
|
-
margin: 0;
|
53
|
-
}
|
54
|
-
|
55
|
-
input[type='number'], input[type='range'] {
|
56
|
-
appearance: none;
|
57
|
-
height: 11px;
|
58
|
-
}
|
59
|
-
|
60
|
-
input[type='range']::-webkit-slider-runnable-track {
|
61
|
-
border: none;
|
62
|
-
}
|
63
|
-
|
64
|
-
input[type='range']::-webkit-slider-thumb {
|
65
|
-
appearance: none;
|
66
|
-
background-color: #666;
|
67
|
-
height: 17px;
|
68
|
-
width: 17px;
|
69
|
-
transition: 0.2s linear background-color;
|
70
|
-
&:hover {
|
71
|
-
background-color: #999;
|
72
|
-
}
|
73
|
-
}
|
74
|
-
|
75
|
-
textarea {
|
76
|
-
background-color: #191919;
|
77
|
-
font-size: 10px;
|
78
|
-
}
|
79
|
-
|
80
|
-
img {
|
81
|
-
border: 1px dotted #333;
|
82
|
-
cursor: pointer;
|
83
|
-
object-fit: cover;
|
84
|
-
max-width: 100%;
|
85
|
-
min-width: 50px;
|
86
|
-
min-height: 50px;
|
87
|
-
max-height: 100px;
|
88
|
-
width: 100%;
|
89
|
-
position: relative;
|
90
|
-
left: 50%;
|
91
|
-
transform: translateX(-50%);
|
92
|
-
}
|
93
|
-
|
94
|
-
button {
|
95
|
-
background-color: #333;
|
96
|
-
border-top: 1px dotted #444;
|
97
|
-
height: 100%;
|
98
|
-
margin: 0;
|
99
|
-
padding: 0;
|
100
|
-
text-align: center;
|
101
|
-
transition: 0.2s background-color linear;
|
102
|
-
width: 100%;
|
103
|
-
&:hover {
|
104
|
-
background-color: #444;
|
105
|
-
}
|
106
|
-
}
|
107
|
-
|
108
|
-
&.block {
|
109
|
-
label {
|
110
|
-
display: block;
|
111
|
-
line-height: 21px;
|
112
|
-
max-width: 100%;
|
113
|
-
width: 100%;
|
114
|
-
}
|
115
|
-
}
|
116
|
-
|
117
|
-
select {
|
118
|
-
background-color: #222;
|
119
|
-
border: 1px solid #333;
|
120
|
-
font-size: 12px;
|
121
|
-
padding: 1px 5px;
|
122
|
-
position: absolute;
|
123
|
-
right: 4px;
|
124
|
-
}
|
125
|
-
}
|
126
|
-
|
127
|
-
.group {
|
128
|
-
background-color: #191919;
|
129
|
-
margin: 2px 0;
|
130
|
-
h4 {
|
131
|
-
display: inline;
|
132
|
-
font-weight: bold;
|
133
|
-
pointer-events: none;
|
134
|
-
width: fit-content;
|
135
|
-
}
|
136
|
-
.toggleBtn {
|
137
|
-
background-color: #191919;
|
138
|
-
background-image: $icon_folder;
|
139
|
-
background-position: 1px 1px;
|
140
|
-
background-repeat: no-repeat;
|
141
|
-
background-size: 15px 45px;
|
142
|
-
display: inline-block;
|
143
|
-
height: 15px;
|
144
|
-
opacity: 0.8;
|
145
|
-
overflow: hidden;
|
146
|
-
margin: 0 0 0 5px;
|
147
|
-
padding-left: 20px;
|
148
|
-
width: calc(100% - 7px);
|
149
|
-
transition: all 0.15s linear;
|
150
|
-
&:hover {
|
151
|
-
background-color: #222;
|
152
|
-
opacity: 1;
|
153
|
-
}
|
154
|
-
}
|
155
|
-
.fieldItems {
|
156
|
-
border-top: 1px dotted #333;
|
157
|
-
overflow-y: auto;
|
158
|
-
user-select: none;
|
159
|
-
}
|
160
|
-
}
|
161
|
-
}
|
@@ -1,102 +0,0 @@
|
|
1
|
-
import { AnimationMixer } from 'three';
|
2
|
-
import RemoteThree from '@/core/remote/RemoteThree';
|
3
|
-
import InspectorGroup from '../InspectorGroup';
|
4
|
-
import { AnimationClipInfo, RemoteObject } from '../../types';
|
5
|
-
|
6
|
-
export default function InspectAnimation(obj: RemoteObject, three: RemoteThree) {
|
7
|
-
const items: any[] = [];
|
8
|
-
const animations: any[] = [];
|
9
|
-
let maxDuration = 0;
|
10
|
-
obj.animations.forEach((clipInfo: AnimationClipInfo) => {
|
11
|
-
// Add animation
|
12
|
-
maxDuration = Math.max(maxDuration, clipInfo.duration);
|
13
|
-
if (clipInfo.duration > 0) {
|
14
|
-
animations.push({
|
15
|
-
title: clipInfo.name,
|
16
|
-
items: [
|
17
|
-
{
|
18
|
-
title: 'Duration',
|
19
|
-
type: 'number',
|
20
|
-
value: clipInfo.duration,
|
21
|
-
disabled: true,
|
22
|
-
},
|
23
|
-
{
|
24
|
-
title: 'Blend Mode',
|
25
|
-
type: 'option',
|
26
|
-
disabled: true,
|
27
|
-
options: [
|
28
|
-
{
|
29
|
-
title: 'Normal',
|
30
|
-
value: 2500,
|
31
|
-
},
|
32
|
-
{
|
33
|
-
title: 'Additive',
|
34
|
-
value: 2501,
|
35
|
-
},
|
36
|
-
],
|
37
|
-
}
|
38
|
-
]
|
39
|
-
});
|
40
|
-
}
|
41
|
-
});
|
42
|
-
items.push({
|
43
|
-
title: 'Animations',
|
44
|
-
items: animations
|
45
|
-
});
|
46
|
-
|
47
|
-
const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
|
48
|
-
let hasMixer = false;
|
49
|
-
if (child !== undefined) {
|
50
|
-
const mixer = child['mixer'] as AnimationMixer;
|
51
|
-
hasMixer = mixer !== undefined;
|
52
|
-
if (hasMixer) {
|
53
|
-
const mixerItems: any[] = [
|
54
|
-
{
|
55
|
-
title: 'Time Scale',
|
56
|
-
type: 'range',
|
57
|
-
value: mixer.timeScale,
|
58
|
-
step: 0.01,
|
59
|
-
min: -1,
|
60
|
-
max: 2,
|
61
|
-
onChange: (_: string, value: any) => {
|
62
|
-
mixer.timeScale = value;
|
63
|
-
three.updateObject(obj.uuid, 'mixer.timeScale', value);
|
64
|
-
},
|
65
|
-
},
|
66
|
-
];
|
67
|
-
// animations.forEach((animation: any, index: number) => {
|
68
|
-
// if (obj.animations[index].duration > 0) {
|
69
|
-
// mixerItems.push({
|
70
|
-
// title: `Play: ${animation.title}`,
|
71
|
-
// type: 'button',
|
72
|
-
// onChange: () => {
|
73
|
-
// // Stop Previous
|
74
|
-
// mixer.stopAllAction();
|
75
|
-
// three.requestMethod(obj.uuid, 'stopAllAction', undefined, 'mixer');
|
76
|
-
|
77
|
-
// //
|
78
|
-
// const clip = child.animations[index] as AnimationClip;
|
79
|
-
// const action = mixer.clipAction(clip);
|
80
|
-
// action.play();
|
81
|
-
// }
|
82
|
-
// });
|
83
|
-
// }
|
84
|
-
// });
|
85
|
-
mixerItems.push({
|
86
|
-
title: 'Stop All',
|
87
|
-
type: 'button',
|
88
|
-
onChange: () => {
|
89
|
-
mixer.stopAllAction();
|
90
|
-
three.requestMethod(obj.uuid, 'stopAllAction', undefined, 'mixer');
|
91
|
-
}
|
92
|
-
});
|
93
|
-
items.push({
|
94
|
-
title: 'Mixer',
|
95
|
-
items: mixerItems
|
96
|
-
});
|
97
|
-
}
|
98
|
-
}
|
99
|
-
return (
|
100
|
-
<InspectorGroup title='Animation' items={items} />
|
101
|
-
);
|
102
|
-
}
|
@@ -1,75 +0,0 @@
|
|
1
|
-
import RemoteThree from '@/core/remote/RemoteThree';
|
2
|
-
import InspectorGroup from '../InspectorGroup';
|
3
|
-
import { RemoteObject } from '../../types';
|
4
|
-
import { setItemProps } from '../../utils';
|
5
|
-
|
6
|
-
function prettyName(name: string): string {
|
7
|
-
switch (name) {
|
8
|
-
case 'fov': return 'FOV';
|
9
|
-
case 'zoom': return 'Zoom';
|
10
|
-
case 'near': return 'Near';
|
11
|
-
case 'far': return 'Far';
|
12
|
-
case 'focus': return 'Focus';
|
13
|
-
case 'aspect': return 'Aspect';
|
14
|
-
case 'filmGauge': return 'Film Gauge';
|
15
|
-
case 'filmOffset': return 'Film Offset';
|
16
|
-
case 'left': return 'Left';
|
17
|
-
case 'right': return 'Right';
|
18
|
-
case 'top': return 'Top';
|
19
|
-
case 'bottom': return 'Bottom';
|
20
|
-
}
|
21
|
-
return name;
|
22
|
-
}
|
23
|
-
|
24
|
-
export function InspectCamera(object: RemoteObject, three: RemoteThree): any {
|
25
|
-
const items: any[] = [];
|
26
|
-
|
27
|
-
if (object.perspectiveCameraInfo !== undefined) {
|
28
|
-
for (const i in object.perspectiveCameraInfo) {
|
29
|
-
items.push({
|
30
|
-
title: prettyName(i),
|
31
|
-
prop: i,
|
32
|
-
type: 'number',
|
33
|
-
step: 0.01,
|
34
|
-
value: object.perspectiveCameraInfo[i],
|
35
|
-
onChange: (prop: string, value: any) => {
|
36
|
-
three.updateObject(object.uuid, prop, value);
|
37
|
-
three.requestMethod(object.uuid, 'updateProjectionMatrix');
|
38
|
-
|
39
|
-
const child = three.scene?.getObjectByProperty('uuid', object.uuid);
|
40
|
-
if (child !== undefined) {
|
41
|
-
setItemProps(child, prop, value);
|
42
|
-
child['updateProjectionMatrix']();
|
43
|
-
}
|
44
|
-
}
|
45
|
-
});
|
46
|
-
}
|
47
|
-
} else if (object.orthographicCameraInfo !== undefined) {
|
48
|
-
for (const i in object.orthographicCameraInfo) {
|
49
|
-
items.push({
|
50
|
-
title: prettyName(i),
|
51
|
-
prop: i,
|
52
|
-
type: 'number',
|
53
|
-
step: 0.01,
|
54
|
-
value: object.perspectiveCameraInfo![i],
|
55
|
-
onChange: (prop: string, value: any) => {
|
56
|
-
three.updateObject(object.uuid, prop, value);
|
57
|
-
three.requestMethod(object.uuid, 'updateProjectionMatrix');
|
58
|
-
|
59
|
-
const child = three.scene?.getObjectByProperty('uuid', object.uuid);
|
60
|
-
if (child !== undefined) {
|
61
|
-
setItemProps(child, prop, value);
|
62
|
-
child['updateProjectionMatrix']();
|
63
|
-
}
|
64
|
-
}
|
65
|
-
});
|
66
|
-
}
|
67
|
-
}
|
68
|
-
|
69
|
-
return (
|
70
|
-
<InspectorGroup
|
71
|
-
title='Camera'
|
72
|
-
items={items}
|
73
|
-
/>
|
74
|
-
);
|
75
|
-
}
|
@@ -1,62 +0,0 @@
|
|
1
|
-
import { Color } from 'three';
|
2
|
-
import RemoteThree from '@/core/remote/RemoteThree';
|
3
|
-
import InspectorGroup from '../InspectorGroup';
|
4
|
-
import { RemoteObject } from '../../types';
|
5
|
-
import { setItemProps } from '../../utils';
|
6
|
-
|
7
|
-
function prettyName(value: string): string {
|
8
|
-
switch (value) {
|
9
|
-
case 'color': return 'Color';
|
10
|
-
case 'intensity': return 'Intensity';
|
11
|
-
case 'decay': return 'Decay';
|
12
|
-
case 'distance': return 'Distance';
|
13
|
-
case 'angle': return 'Angle';
|
14
|
-
case 'penumbra': return 'Penumbra';
|
15
|
-
case 'groundColor': return 'Ground Color';
|
16
|
-
}
|
17
|
-
return value;
|
18
|
-
}
|
19
|
-
|
20
|
-
export function InspectLight(obj: RemoteObject, three: RemoteThree) {
|
21
|
-
const items: any[] = [];
|
22
|
-
if (obj.lightInfo !== undefined) {
|
23
|
-
for (const i in obj.lightInfo) {
|
24
|
-
const value = obj.lightInfo[i];
|
25
|
-
if (value === undefined) continue;
|
26
|
-
|
27
|
-
if (value.isColor !== undefined) {
|
28
|
-
items.push({
|
29
|
-
title: prettyName(i),
|
30
|
-
prop: i,
|
31
|
-
type: 'color',
|
32
|
-
value: value,
|
33
|
-
onChange: (prop: string, value: any) => {
|
34
|
-
const color = new Color(value);
|
35
|
-
three.updateObject(obj.uuid, prop, color);
|
36
|
-
const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
|
37
|
-
if (child !== undefined) setItemProps(child, prop, color);
|
38
|
-
}
|
39
|
-
});
|
40
|
-
} else {
|
41
|
-
items.push({
|
42
|
-
title: prettyName(i),
|
43
|
-
prop: i,
|
44
|
-
type: typeof value,
|
45
|
-
value: value,
|
46
|
-
step: typeof value === 'number' ? 0.01 : undefined,
|
47
|
-
onChange: (prop: string, value: any) => {
|
48
|
-
three.updateObject(obj.uuid, prop, value);
|
49
|
-
const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
|
50
|
-
if (child !== undefined) setItemProps(child, prop, value);
|
51
|
-
}
|
52
|
-
});
|
53
|
-
}
|
54
|
-
}
|
55
|
-
}
|
56
|
-
return (
|
57
|
-
<InspectorGroup
|
58
|
-
title='Light'
|
59
|
-
items={items}
|
60
|
-
/>
|
61
|
-
);
|
62
|
-
}
|