@babylonjs/inspector 8.45.5-preview → 8.46.0-preview
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/lib/{captureService-c_Nc-JkH.js → captureService-CoxrGxaU.js} +4 -3
- package/lib/{captureService-c_Nc-JkH.js.map → captureService-CoxrGxaU.js.map} +1 -1
- package/lib/{exportService-BvQmBhyv.js → exportService-Bh80tA6P.js} +4 -3
- package/lib/{exportService-BvQmBhyv.js.map → exportService-Bh80tA6P.js.map} +1 -1
- package/lib/{extensionsListService-DxjhVAwt.js → extensionsListService-13sAWV0u.js} +3 -2
- package/lib/{extensionsListService-DxjhVAwt.js.map → extensionsListService-13sAWV0u.js.map} +1 -1
- package/lib/{importService-DxFxT2li.js → importService-TdRBtTlS.js} +4 -3
- package/lib/{importService-DxFxT2li.js.map → importService-TdRBtTlS.js.map} +1 -1
- package/lib/{index-C7ey_J-r.js → index-9hCGH1vt.js} +247 -85
- package/lib/index-9hCGH1vt.js.map +1 -0
- package/lib/index.d.ts +22 -2
- package/lib/index.js +3 -2
- package/lib/index.js.map +1 -1
- package/lib/{quickCreateToolsService-Cu0BSIWb.js → quickCreateToolsService-hEV1m5Nc.js} +178 -56
- package/lib/quickCreateToolsService-hEV1m5Nc.js.map +1 -0
- package/package.json +1 -1
- package/lib/index-C7ey_J-r.js.map +0 -1
- package/lib/quickCreateToolsService-Cu0BSIWb.js.map +0 -1
package/lib/index.d.ts
CHANGED
|
@@ -24,6 +24,8 @@ type BaseBoundPropertyProps<TargetT extends object, PropertyKeyT extends keyof T
|
|
|
24
24
|
component: ComponentT;
|
|
25
25
|
target: TargetT | null | undefined;
|
|
26
26
|
propertyKey: PropertyKeyT;
|
|
27
|
+
/** Optional path from the root object to the property, used for generating the onCopy string */
|
|
28
|
+
propertyPath?: string;
|
|
27
29
|
convertTo?: (value: TargetT[PropertyKeyT]) => TargetT[PropertyKeyT];
|
|
28
30
|
convertFrom?: (value: TargetT[PropertyKeyT]) => TargetT[PropertyKeyT];
|
|
29
31
|
};
|
|
@@ -61,6 +63,24 @@ declare function BoundPropertyImpl<TargetT extends object, PropertyKeyT extends
|
|
|
61
63
|
* @returns JSX element
|
|
62
64
|
*/
|
|
63
65
|
declare const BoundProperty: typeof BoundPropertyImpl;
|
|
66
|
+
/**
|
|
67
|
+
* Props for Property component - a simpler version of BoundProperty that only handles onCopy functionality
|
|
68
|
+
* Pass in the full propertyPath from entity to property (e.g. "meshes[0].position.x") to ensure copyString is accurate
|
|
69
|
+
*/
|
|
70
|
+
type PropertyProps<ComponentT extends ComponentType<any>> = Omit<ComponentProps<ComponentT>, "onCopy"> & {
|
|
71
|
+
component: ComponentT;
|
|
72
|
+
propertyPath: string;
|
|
73
|
+
};
|
|
74
|
+
declare function PropertyImpl<ComponentT extends ComponentType<any>>(props: PropertyProps<ComponentT>, ref?: any): react_jsx_runtime.JSX.Element;
|
|
75
|
+
/**
|
|
76
|
+
* A simpler version of BoundProperty that only provides the onCopy functionality.
|
|
77
|
+
* Does not bind the value/onChange - those must be provided by the caller.
|
|
78
|
+
* Use this when you need copy support but have custom value/onChange handling.
|
|
79
|
+
*
|
|
80
|
+
* @param props PropertyProps with propertyName for copy support
|
|
81
|
+
* @returns JSX element
|
|
82
|
+
*/
|
|
83
|
+
declare const Property: typeof PropertyImpl;
|
|
64
84
|
|
|
65
85
|
type InfoLabelProps = {
|
|
66
86
|
htmlFor: string;
|
|
@@ -72895,5 +72915,5 @@ declare const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vec
|
|
|
72895
72915
|
declare const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3>>;
|
|
72896
72916
|
declare const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4>>;
|
|
72897
72917
|
|
|
72898
|
-
export { Accordion, AccordionSection, AttachDebugLayer, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, Checkbox, CheckboxPropertyLine, ChildWindow, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, ConvertOptions, DebugServiceIdentity, DetachDebugLayer, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsPropertyReadonly, LineContainer, Link, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SidePaneContainer, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, Theme, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useCompactMode, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useSidePaneDockOverrides, useVector3Property };
|
|
72899
|
-
export type { AcceptedDropdownValue, AccordionProps, AccordionSectionProps, BasePrimitiveProps, BoundPropertyProps, BuiltInExtension, ButtonProps, CentralContentDefinition, ChildWindowOptions, ChildWindowProps, ColorPickerProps, ColorPropertyLineProps, ComboBoxOption, ComboBoxProps, DraggableLineProps, DropdownOption, DropdownProps, DynamicAccordionSection, DynamicAccordionSectionContent, EntityBase, EntityDisplayInfo, ExtensionMetadata, ExtensionModule, FunctionHooks, HexPropertyLineProps, IDebugService, IExtensionFeed, IExtensionMetadataQuery, IPropertiesService, ISceneContext, ISceneExplorerService, ISelectionService, IService, ISettingsContext, ISettingsService, IShellService, IStatsService, IToolsService, ImmutablePrimitiveProps, InfoLabelParentProps, InfoLabelProps, InputHexProps, InspectorOptions, LinkProps, ListItem, NumberInputPropertyLineProps, PaneProps, PersonMetadata, PrimitiveProps, PropertyHooks, PropertyLineProps, SceneExplorerCommand, SceneExplorerCommandProvider, SceneExplorerSection, SectionsImperativeRef, ServiceDefinition, ServiceFactory, SidePaneDefinition, SpinButtonProps, SwitchProps, SyncedSliderProps, TensorPropertyLineProps, TextInputProps, TextareaProps, ToolbarItemDefinition };
|
|
72918
|
+
export { Accordion, AccordionSection, AttachDebugLayer, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, Checkbox, CheckboxPropertyLine, ChildWindow, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, ConvertOptions, DebugServiceIdentity, DetachDebugLayer, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsPropertyReadonly, LineContainer, Link, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, Property, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SidePaneContainer, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, Theme, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useCompactMode, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useSidePaneDockOverrides, useVector3Property };
|
|
72919
|
+
export type { AcceptedDropdownValue, AccordionProps, AccordionSectionProps, BasePrimitiveProps, BoundPropertyProps, BuiltInExtension, ButtonProps, CentralContentDefinition, ChildWindowOptions, ChildWindowProps, ColorPickerProps, ColorPropertyLineProps, ComboBoxOption, ComboBoxProps, DraggableLineProps, DropdownOption, DropdownProps, DynamicAccordionSection, DynamicAccordionSectionContent, EntityBase, EntityDisplayInfo, ExtensionMetadata, ExtensionModule, FunctionHooks, HexPropertyLineProps, IDebugService, IExtensionFeed, IExtensionMetadataQuery, IPropertiesService, ISceneContext, ISceneExplorerService, ISelectionService, IService, ISettingsContext, ISettingsService, IShellService, IStatsService, IToolsService, ImmutablePrimitiveProps, InfoLabelParentProps, InfoLabelProps, InputHexProps, InspectorOptions, LinkProps, ListItem, NumberInputPropertyLineProps, PaneProps, PersonMetadata, PrimitiveProps, PropertyHooks, PropertyLineProps, PropertyProps, SceneExplorerCommand, SceneExplorerCommandProvider, SceneExplorerSection, SectionsImperativeRef, ServiceDefinition, ServiceFactory, SidePaneDefinition, SpinButtonProps, SwitchProps, SyncedSliderProps, TensorPropertyLineProps, TextInputProps, TextareaProps, ToolbarItemDefinition };
|
package/lib/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export { A as Accordion,
|
|
1
|
+
export { A as Accordion, j as AccordionSection, t as AttachDebugLayer, aI as BooleanBadgePropertyLine, x as BoundProperty, H as BuiltInsExtensionFeed, b as Button, B as ButtonLine, af as Checkbox, e as CheckboxPropertyLine, aD as ChildWindow, C as Collapse, ap as Color3GradientComponent, aF as Color3GradientList, aJ as Color3PropertyLine, aq as Color4GradientComponent, aG as Color4GradientList, aK as Color4PropertyLine, ag as ColorPickerPopup, ar as ColorStepGradientComponent, aj as ComboBox, aa as ConstructorFactory, s as ConvertOptions, D as DebugServiceIdentity, v as DetachDebugLayer, ak as DraggableLine, al as Dropdown, E as ExtensibleAccordion, ao as FactorGradientComponent, aE as FactorGradientList, F as FileUploadLine, a6 as GetPropertyDescriptor, aL as HexPropertyLine, as as InfoLabel, ah as InputHexField, ai as InputHsvField, I as Inspector, a5 as InterceptFunction, a8 as InterceptProperty, a7 as IsPropertyReadonly, aP as LineContainer, L as Link, aN as LinkPropertyLine, z as LinkToEntityPropertyLine, at as List, a4 as MakeDialogTeachingMoment, M as MakeLazyComponent, l as MakePopoverTeachingMoment, R as MakePropertyHook, a3 as MakeTeachingMoment, f as MessageBar, am as NumberDropdown, N as NumberDropdownPropertyLine, aM as NumberInputPropertyLine, a9 as ObservableCollection, aH as Pane, aQ as PlaceholderPropertyLine, au as PositionedPopover, o as PropertiesServiceIdentity, y as Property, aO as PropertyLine, aV as QuaternionPropertyLine, aU as RotationVectorPropertyLine, h as SceneContextIdentity, p as SceneExplorerServiceIdentity, av as SearchBar, aw as SearchBox, ac as SelectionServiceDefinition, ab as SelectionServiceIdentity, ad as SettingsContextIdentity, q as SettingsServiceIdentity, g as ShellServiceIdentity, ae as ShowInspector, n as SidePaneContainer, ax as SpinButton, d as SpinButtonPropertyLine, r as StatsServiceIdentity, an as StringDropdown, w as StringDropdownPropertyLine, aR as StringifiedPropertyLine, ay as Switch, S as SwitchPropertyLine, az as SyncedSliderInput, a as SyncedSliderPropertyLine, m as TeachingMoment, aS as TextAreaPropertyLine, aB as TextInput, c as TextInputPropertyLine, aT as TextPropertyLine, aA as Textarea, G as Theme, aC as ToggleButton, T as ToolsServiceIdentity, aW as Vector2PropertyLine, V as Vector3PropertyLine, aX as Vector4PropertyLine, a2 as useAngleConverters, $ as useAsyncResource, K as useColor3Property, O as useColor4Property, a0 as useCompactMode, W as useEventfulState, U as useInterceptObservable, X as useObservableCollection, i as useObservableState, Y as useOrderedObservableCollection, Z as usePollingObservable, u as useProperty, Q as useQuaternionProperty, _ as useResource, a1 as useSidePaneDockOverrides, J as useVector3Property } from './index-9hCGH1vt.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import '@babylonjs/core/Maths/math.color.js';
|
|
5
5
|
import '@babylonjs/core/Maths/math.vector.js';
|
|
6
6
|
import '@babylonjs/core/Misc/observable.js';
|
|
7
|
+
import '@babylonjs/core/Misc/typeStore.js';
|
|
7
8
|
import '@fluentui/react-components';
|
|
8
9
|
import '@fluentui/react-icons';
|
|
9
10
|
import '@fluentui/react-motion-components-preview';
|
|
10
|
-
import '@babylonjs/core/Misc/typeStore.js';
|
|
11
11
|
import 'usehooks-ts';
|
|
12
12
|
import '@babylonjs/core/Misc/asyncLock.js';
|
|
13
13
|
import '@babylonjs/core/Misc/deferred.js';
|
|
@@ -50,6 +50,7 @@ import '@babylonjs/addons/atmosphere/atmosphere.js';
|
|
|
50
50
|
import '@babylonjs/core/Cameras/arcRotateCamera.js';
|
|
51
51
|
import '@babylonjs/core/Cameras/followCamera.js';
|
|
52
52
|
import '@babylonjs/core/Cameras/freeCamera.js';
|
|
53
|
+
import '@babylonjs/core/Cameras/geospatialCamera.js';
|
|
53
54
|
import '@babylonjs/core/Cameras/targetCamera.js';
|
|
54
55
|
import '@babylonjs/core/scene.js';
|
|
55
56
|
import '@babylonjs/core/FrameGraph/frameGraph.js';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { P as Popover, b as Button, c as TextInputPropertyLine, d as SpinButtonPropertyLine, e as CheckboxPropertyLine, V as Vector3PropertyLine, f as
|
|
2
|
+
import { P as Popover, b as Button, c as TextInputPropertyLine, d as SpinButtonPropertyLine, e as CheckboxPropertyLine, V as Vector3PropertyLine, u as useProperty, f as MessageBar, g as ShellServiceIdentity, h as SceneContextIdentity, i as useObservableState, A as Accordion, j as AccordionSection } from './index-9hCGH1vt.js';
|
|
3
3
|
import { SettingsRegular, CollectionsAdd20Regular } from '@fluentui/react-icons';
|
|
4
4
|
import '@babylonjs/core/Particles/webgl2ParticleSystem.js';
|
|
5
5
|
import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder.js';
|
|
6
6
|
import { useState, useRef } from 'react';
|
|
7
|
-
import { makeStyles, tokens } from '@fluentui/react-components';
|
|
8
7
|
import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
|
|
8
|
+
import { makeStyles, tokens } from '@fluentui/react-components';
|
|
9
9
|
import { NodeMaterial } from '@babylonjs/core/Materials/Node/nodeMaterial.js';
|
|
10
10
|
import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js';
|
|
11
11
|
import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial.js';
|
|
@@ -15,14 +15,25 @@ import { SpotLight } from '@babylonjs/core/Lights/spotLight.js';
|
|
|
15
15
|
import { Vector3 } from '@babylonjs/core/Maths/math.vector.js';
|
|
16
16
|
import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
|
|
17
17
|
import { UniversalCamera } from '@babylonjs/core/Cameras/universalCamera.js';
|
|
18
|
+
import { FreeCamera } from '@babylonjs/core/Cameras/freeCamera.js';
|
|
19
|
+
import { FollowCamera } from '@babylonjs/core/Cameras/followCamera.js';
|
|
20
|
+
import { FlyCamera } from '@babylonjs/core/Cameras/flyCamera.js';
|
|
21
|
+
import { GeospatialCamera } from '@babylonjs/core/Cameras/geospatialCamera.js';
|
|
18
22
|
import { ParticleSystem } from '@babylonjs/core/Particles/particleSystem.js';
|
|
19
23
|
import { GPUParticleSystem } from '@babylonjs/core/Particles/gpuParticleSystem.js';
|
|
20
24
|
import { NodeParticleSystemSet } from '@babylonjs/core/Particles/Node/nodeParticleSystemSet.js';
|
|
21
25
|
import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
|
|
26
|
+
import { DefaultRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline.js';
|
|
27
|
+
import { SSAORenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssaoRenderingPipeline.js';
|
|
28
|
+
import { SSAO2RenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssao2RenderingPipeline.js';
|
|
29
|
+
import { SSRRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssrRenderingPipeline.js';
|
|
30
|
+
import { IblShadowsRenderPipeline } from '@babylonjs/core/Rendering/IBLShadows/iblShadowsRenderPipeline.js';
|
|
31
|
+
import { NodeRenderGraph } from '@babylonjs/core/FrameGraph/Node/nodeRenderGraph.js';
|
|
32
|
+
import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager.js';
|
|
22
33
|
import '@babylonjs/core/Maths/math.color.js';
|
|
23
34
|
import '@babylonjs/core/Misc/observable.js';
|
|
24
|
-
import '@fluentui/react-motion-components-preview';
|
|
25
35
|
import '@babylonjs/core/Misc/typeStore.js';
|
|
36
|
+
import '@fluentui/react-motion-components-preview';
|
|
26
37
|
import 'usehooks-ts';
|
|
27
38
|
import '@babylonjs/core/Misc/asyncLock.js';
|
|
28
39
|
import '@babylonjs/core/Misc/deferred.js';
|
|
@@ -60,8 +71,6 @@ import '@babylonjs/core/node.js';
|
|
|
60
71
|
import '@babylonjs/core/Animations/animationGroup.js';
|
|
61
72
|
import '@babylonjs/core/Animations/animationPropertiesOverride.js';
|
|
62
73
|
import '@babylonjs/addons/atmosphere/atmosphere.js';
|
|
63
|
-
import '@babylonjs/core/Cameras/followCamera.js';
|
|
64
|
-
import '@babylonjs/core/Cameras/freeCamera.js';
|
|
65
74
|
import '@babylonjs/core/Cameras/targetCamera.js';
|
|
66
75
|
import '@babylonjs/core/scene.js';
|
|
67
76
|
import '@babylonjs/core/FrameGraph/frameGraph.js';
|
|
@@ -110,7 +119,6 @@ import '@babylonjs/core/PostProcesses/postProcess.js';
|
|
|
110
119
|
import '@babylonjs/core/Materials/imageProcessingConfiguration.js';
|
|
111
120
|
import '@babylonjs/core/Bones/skeleton.js';
|
|
112
121
|
import '@babylonjs/core/Sprites/sprite.js';
|
|
113
|
-
import '@babylonjs/core/Sprites/spriteManager.js';
|
|
114
122
|
import '@babylonjs/core/Misc/textureTools.js';
|
|
115
123
|
import '@babylonjs/core/Materials/Textures/baseTexture.js';
|
|
116
124
|
import '@babylonjs/core/Materials/Textures/multiRenderTarget.js';
|
|
@@ -140,7 +148,7 @@ const SettingsPopover = (props) => {
|
|
|
140
148
|
return jsxs(Popover, { icon: SettingsRegular, children: [" ", props.children, " "] });
|
|
141
149
|
};
|
|
142
150
|
|
|
143
|
-
const useStyles
|
|
151
|
+
const useStyles = makeStyles({
|
|
144
152
|
section: {
|
|
145
153
|
display: "flex",
|
|
146
154
|
flexDirection: "column",
|
|
@@ -148,6 +156,25 @@ const useStyles$4 = makeStyles({
|
|
|
148
156
|
},
|
|
149
157
|
row: { display: "flex", alignItems: "center", gap: "4px" },
|
|
150
158
|
});
|
|
159
|
+
/**
|
|
160
|
+
* Container component for quick create sections that provides consistent column layout with spacing
|
|
161
|
+
* @param props - Component props
|
|
162
|
+
* @returns React component
|
|
163
|
+
*/
|
|
164
|
+
const QuickCreateSection = ({ children }) => {
|
|
165
|
+
const classes = useStyles();
|
|
166
|
+
return jsx("div", { className: classes.section, children: children });
|
|
167
|
+
};
|
|
168
|
+
/**
|
|
169
|
+
* Container component for quick create rows that provides consistent row layout for button + settings popover
|
|
170
|
+
* @param props - Component props
|
|
171
|
+
* @returns React component
|
|
172
|
+
*/
|
|
173
|
+
const QuickCreateRow = ({ children }) => {
|
|
174
|
+
const classes = useStyles();
|
|
175
|
+
return jsx("div", { className: classes.row, children: children });
|
|
176
|
+
};
|
|
177
|
+
|
|
151
178
|
const SetCamera = function (scene) {
|
|
152
179
|
const camera = scene.activeCamera;
|
|
153
180
|
if (camera && camera.radius !== undefined) {
|
|
@@ -158,7 +185,6 @@ const SetCamera = function (scene) {
|
|
|
158
185
|
* @internal
|
|
159
186
|
*/
|
|
160
187
|
const MeshesContent = ({ scene }) => {
|
|
161
|
-
const classes = useStyles$4();
|
|
162
188
|
const [sphereParams, setSphereParams] = useState({
|
|
163
189
|
name: "Sphere",
|
|
164
190
|
segments: 32,
|
|
@@ -260,7 +286,7 @@ const MeshesContent = ({ scene }) => {
|
|
|
260
286
|
filesInput.dispose();
|
|
261
287
|
event.target.value = "";
|
|
262
288
|
};
|
|
263
|
-
return (jsxs(
|
|
289
|
+
return (jsxs(QuickCreateSection, { children: [jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: () => {
|
|
264
290
|
MeshBuilder.CreateSphere("Sphere", {}, scene);
|
|
265
291
|
SetCamera(scene);
|
|
266
292
|
}, label: "Sphere" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: sphereParams.name, onChange: (val) => handleSphereParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Segments", value: sphereParams.segments, min: 0, onChange: (val) => handleSphereParamChange("segments", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter", value: sphereParams.diameter, min: 0, step: 0.1, onChange: (val) => handleSphereParamChange("diameter", val), disabled: !sphereParams.uniform }), jsx(CheckboxPropertyLine, { label: "Uniform", value: sphereParams.uniform, onChange: (checked) => handleSphereParamChange("uniform", checked) }), jsx(SpinButtonPropertyLine, { label: "Diameter X", value: sphereParams.diameterX, min: 0, step: 0.1, onChange: (val) => handleSphereParamChange("diameterX", val), disabled: sphereParams.uniform }), jsx(SpinButtonPropertyLine, { label: "Diameter Y", value: sphereParams.diameterY, min: 0, step: 0.1, onChange: (val) => handleSphereParamChange("diameterY", val), disabled: sphereParams.uniform }), jsx(SpinButtonPropertyLine, { label: "Diameter Z", value: sphereParams.diameterZ, min: 0, step: 0.1, onChange: (val) => handleSphereParamChange("diameterZ", val), disabled: sphereParams.uniform }), jsx(SpinButtonPropertyLine, { label: "Arc", value: sphereParams.arc, min: 0, max: 1, step: 0.1, onChange: (val) => handleSphereParamChange("arc", val) }), jsx(SpinButtonPropertyLine, { label: "Slice", value: sphereParams.slice, min: 0, max: 1, step: 0.1, onChange: (val) => handleSphereParamChange("slice", val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
|
|
@@ -282,19 +308,19 @@ const MeshesContent = ({ scene }) => {
|
|
|
282
308
|
}
|
|
283
309
|
MeshBuilder.CreateSphere(sphereParams.name, createParams, scene);
|
|
284
310
|
SetCamera(scene);
|
|
285
|
-
}, label: "Create" }) })] })] }), jsxs(
|
|
311
|
+
}, label: "Create" }) })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: () => {
|
|
286
312
|
MeshBuilder.CreateBox("Box", {}, scene);
|
|
287
313
|
SetCamera(scene);
|
|
288
314
|
}, label: "Box" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: boxParams.name, onChange: (val) => handleBoxParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Size", value: boxParams.size, min: 0, step: 0.1, onChange: (val) => handleBoxParamChange("size", val) }), jsx(SpinButtonPropertyLine, { label: "Width", value: boxParams.width, min: 0, step: 0.1, onChange: (val) => handleBoxParamChange("width", val) }), jsx(SpinButtonPropertyLine, { label: "Height", value: boxParams.height, min: 0, step: 0.1, onChange: (val) => handleBoxParamChange("height", val) }), jsx(SpinButtonPropertyLine, { label: "Depth", value: boxParams.depth, min: 0, step: 0.1, onChange: (val) => handleBoxParamChange("depth", val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
|
|
289
315
|
MeshBuilder.CreateBox(boxParams.name, boxParams, scene);
|
|
290
316
|
SetCamera(scene);
|
|
291
|
-
}, label: "Create" }) })] })] }), jsxs(
|
|
317
|
+
}, label: "Create" }) })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: () => {
|
|
292
318
|
MeshBuilder.CreateCylinder("Cylinder", {}, scene);
|
|
293
319
|
SetCamera(scene);
|
|
294
320
|
}, label: "Cylinder" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: cylinderParams.name, onChange: (val) => handleCylinderParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Height", value: cylinderParams.height, min: 0, step: 0.1, onChange: (val) => handleCylinderParamChange("height", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter Top", value: cylinderParams.diameterTop, min: 0, step: 0.1, onChange: (val) => handleCylinderParamChange("diameterTop", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter Bottom", value: cylinderParams.diameterBottom, min: 0, step: 0.1, onChange: (val) => handleCylinderParamChange("diameterBottom", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter", value: cylinderParams.diameter, min: 0, step: 0.1, onChange: (val) => handleCylinderParamChange("diameter", val) }), jsx(SpinButtonPropertyLine, { label: "Tessellation", value: cylinderParams.tessellation, min: 3, onChange: (val) => handleCylinderParamChange("tessellation", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions", value: cylinderParams.subdivisions, min: 1, onChange: (val) => handleCylinderParamChange("subdivisions", val) }), jsx(SpinButtonPropertyLine, { label: "Arc", value: cylinderParams.arc, min: 0, max: 1, step: 0.1, onChange: (val) => handleCylinderParamChange("arc", val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
|
|
295
321
|
MeshBuilder.CreateCylinder(cylinderParams.name, cylinderParams, scene);
|
|
296
322
|
SetCamera(scene);
|
|
297
|
-
}, label: "Create" }) })] })] }), jsxs(
|
|
323
|
+
}, label: "Create" }) })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: () => {
|
|
298
324
|
MeshBuilder.CreateCylinder("Cone", { diameterTop: 0 }, scene);
|
|
299
325
|
SetCamera(scene);
|
|
300
326
|
}, label: "Cone" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: coneParams.name, onChange: (val) => handleConeParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Height", value: coneParams.height, min: 0, step: 0.1, onChange: (val) => handleConeParamChange("height", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter", value: coneParams.diameter, min: 0, step: 0.1, onChange: (val) => handleConeParamChange("diameter", val) }), jsx(SpinButtonPropertyLine, { label: "Tessellation", value: coneParams.tessellation, min: 3, onChange: (val) => handleConeParamChange("tessellation", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions", value: coneParams.subdivisions, min: 1, onChange: (val) => handleConeParamChange("subdivisions", val) }), jsx(SpinButtonPropertyLine, { label: "Arc", value: coneParams.arc, min: 0, max: 1, step: 0.1, onChange: (val) => handleConeParamChange("arc", val) }), jsx(CheckboxPropertyLine, { label: "Up", value: coneUp, onChange: (val) => setConeUp(val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
|
|
@@ -305,34 +331,25 @@ const MeshesContent = ({ scene }) => {
|
|
|
305
331
|
};
|
|
306
332
|
MeshBuilder.CreateCylinder(coneParams.name, coneParamsToUse, scene);
|
|
307
333
|
SetCamera(scene);
|
|
308
|
-
}, label: "Create" }) })] })] }), jsxs(
|
|
334
|
+
}, label: "Create" }) })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: () => {
|
|
309
335
|
MeshBuilder.CreateGround("Ground", {}, scene);
|
|
310
336
|
SetCamera(scene);
|
|
311
337
|
}, label: "Ground" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: groundParams.name, onChange: (val) => handleGroundParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Width", value: groundParams.width, min: 0, step: 0.1, onChange: (val) => handleGroundParamChange("width", val) }), jsx(SpinButtonPropertyLine, { label: "Height", value: groundParams.height, min: 0, step: 0.1, onChange: (val) => handleGroundParamChange("height", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions", value: groundParams.subdivisions, min: 1, onChange: (val) => handleGroundParamChange("subdivisions", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions X", value: groundParams.subdivisionsX, min: 1, onChange: (val) => handleGroundParamChange("subdivisionsX", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions Y", value: groundParams.subdivisionsY, min: 1, onChange: (val) => handleGroundParamChange("subdivisionsY", val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
|
|
312
338
|
MeshBuilder.CreateGround(groundParams.name, groundParams, scene);
|
|
313
339
|
SetCamera(scene);
|
|
314
|
-
}, label: "Create" }) })] })] }), jsxs(
|
|
340
|
+
}, label: "Create" }) })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: () => {
|
|
315
341
|
fileInputRef.current?.click();
|
|
316
342
|
}, label: "Import Mesh" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: importMeshName, onChange: (val) => setImportMeshName(val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: jsx(Button, { appearance: "primary", onClick: () => {
|
|
317
343
|
fileInputRef.current?.click();
|
|
318
344
|
}, label: "Import" }) })] }), jsx("input", { ref: fileInputRef, type: "file", accept: ".babylon,.glb,.gltf,.obj,.stl,.ply,.mesh,.babylonmeshdata", multiple: true, style: { display: "none" }, onChange: handleLocalMeshImport })] })] }));
|
|
319
345
|
};
|
|
320
346
|
|
|
321
|
-
const useStyles$3 = makeStyles({
|
|
322
|
-
section: {
|
|
323
|
-
display: "flex",
|
|
324
|
-
flexDirection: "column",
|
|
325
|
-
rowGap: tokens.spacingVerticalM,
|
|
326
|
-
},
|
|
327
|
-
row: { display: "flex", alignItems: "center", gap: "4px" },
|
|
328
|
-
});
|
|
329
347
|
/**
|
|
330
348
|
* Materials content component
|
|
331
349
|
* @param props - Component props
|
|
332
350
|
* @returns React component
|
|
333
351
|
*/
|
|
334
352
|
const MaterialsContent = ({ scene }) => {
|
|
335
|
-
const classes = useStyles$3();
|
|
336
353
|
// Node Material state
|
|
337
354
|
const [nodeMaterialName, setNodeMaterialName] = useState("Node Material");
|
|
338
355
|
const [nodeMaterialSnippetId, setNodeMaterialSnippetId] = useState("");
|
|
@@ -361,24 +378,15 @@ const MaterialsContent = ({ scene }) => {
|
|
|
361
378
|
const handleCreateStandardMaterial = () => {
|
|
362
379
|
new StandardMaterial(standardMaterialName, scene);
|
|
363
380
|
};
|
|
364
|
-
return (jsxs(
|
|
381
|
+
return (jsxs(QuickCreateSection, { children: [jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateNodeMaterialAsync, label: "Node Material" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: nodeMaterialName, onChange: (value) => setNodeMaterialName(value) }), jsx(TextInputPropertyLine, { label: "Snippet ID", value: nodeMaterialSnippetId, onChange: (value) => setNodeMaterialSnippetId(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateNodeMaterialAsync, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreatePBRMaterial, label: "PBR Material" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: pbrMaterialName, onChange: (value) => setPbrMaterialName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreatePBRMaterial, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateStandardMaterial, label: "Standard Material" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: standardMaterialName, onChange: (value) => setStandardMaterialName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateStandardMaterial, label: "Create" })] })] })] }));
|
|
365
382
|
};
|
|
366
383
|
|
|
367
|
-
const useStyles$2 = makeStyles({
|
|
368
|
-
section: {
|
|
369
|
-
display: "flex",
|
|
370
|
-
flexDirection: "column",
|
|
371
|
-
rowGap: tokens.spacingVerticalM,
|
|
372
|
-
},
|
|
373
|
-
row: { display: "flex", alignItems: "center", gap: "4px" },
|
|
374
|
-
});
|
|
375
384
|
/**
|
|
376
385
|
* Lights content component
|
|
377
386
|
* @param props - Component props
|
|
378
387
|
* @returns React component
|
|
379
388
|
*/
|
|
380
389
|
const LightsContent = ({ scene }) => {
|
|
381
|
-
const classes = useStyles$2();
|
|
382
390
|
// Point Light state
|
|
383
391
|
const [pointLightName, setPointLightName] = useState("Point Light");
|
|
384
392
|
const [pointLightPosition, setPointLightPosition] = useState(new Vector3(0, 5, 0));
|
|
@@ -403,24 +411,15 @@ const LightsContent = ({ scene }) => {
|
|
|
403
411
|
const spotlight = new SpotLight(spotlightName, spotlightPosition, spotlightDirection, spotlightAngle, spotlightExponent, scene);
|
|
404
412
|
spotlight.intensity = 1.0;
|
|
405
413
|
};
|
|
406
|
-
return (jsxs(
|
|
414
|
+
return (jsxs(QuickCreateSection, { children: [jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreatePointLight, label: "Point Light" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: pointLightName, onChange: (value) => setPointLightName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: pointLightPosition, onChange: (value) => setPointLightPosition(value) }), jsx(Button, { appearance: "primary", onClick: handleCreatePointLight, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateDirectionalLight, label: "Directional Light" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: directionalLightName, onChange: (value) => setDirectionalLightName(value) }), jsx(Vector3PropertyLine, { label: "Direction", value: directionalLightDirection, onChange: (value) => setDirectionalLightDirection(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateDirectionalLight, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateSpotlight, label: "Spotlight" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: spotlightName, onChange: (value) => setSpotlightName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: spotlightPosition, onChange: (value) => setSpotlightPosition(value) }), jsx(Vector3PropertyLine, { label: "Direction", value: spotlightDirection, onChange: (value) => setSpotlightDirection(value) }), jsx(SpinButtonPropertyLine, { label: "Angle", value: spotlightAngle, onChange: (value) => setSpotlightAngle(value), min: 0, max: Math.PI, step: 0.1 }), jsx(SpinButtonPropertyLine, { label: "Exponent", value: spotlightExponent, onChange: (value) => setSpotlightExponent(value), min: 0, max: 10, step: 0.1 }), jsx(Button, { appearance: "primary", onClick: handleCreateSpotlight, label: "Create" })] })] })] }));
|
|
407
415
|
};
|
|
408
416
|
|
|
409
|
-
const useStyles$1 = makeStyles({
|
|
410
|
-
section: {
|
|
411
|
-
display: "flex",
|
|
412
|
-
flexDirection: "column",
|
|
413
|
-
rowGap: tokens.spacingVerticalM,
|
|
414
|
-
},
|
|
415
|
-
row: { display: "flex", alignItems: "center", gap: "4px" },
|
|
416
|
-
});
|
|
417
417
|
/**
|
|
418
418
|
* Cameras content component
|
|
419
419
|
* @param props - Component props
|
|
420
420
|
* @returns React component
|
|
421
421
|
*/
|
|
422
422
|
const CamerasContent = ({ scene }) => {
|
|
423
|
-
const classes = useStyles$1();
|
|
424
423
|
// ArcRotate Camera state
|
|
425
424
|
const [arcRotateCameraName, setArcRotateCameraName] = useState("ArcRotate Camera");
|
|
426
425
|
const [arcRotateCameraTarget, setArcRotateCameraTarget] = useState(new Vector3(0, 0, 0));
|
|
@@ -431,6 +430,21 @@ const CamerasContent = ({ scene }) => {
|
|
|
431
430
|
// Universal Camera state
|
|
432
431
|
const [universalCameraName, setUniversalCameraName] = useState("Universal Camera");
|
|
433
432
|
const [universalCameraPosition, setUniversalCameraPosition] = useState(new Vector3(0, 1, -10));
|
|
433
|
+
// Free Camera state
|
|
434
|
+
const [freeCameraName, setFreeCameraName] = useState("Free Camera");
|
|
435
|
+
const [freeCameraPosition, setFreeCameraPosition] = useState(new Vector3(0, 1, -10));
|
|
436
|
+
// Follow Camera state
|
|
437
|
+
const [followCameraName, setFollowCameraName] = useState("Follow Camera");
|
|
438
|
+
const [followCameraPosition, setFollowCameraPosition] = useState(new Vector3(0, 5, -10));
|
|
439
|
+
const [followCameraRadius, setFollowCameraRadius] = useState(10);
|
|
440
|
+
const [followCameraHeightOffset, setFollowCameraHeightOffset] = useState(4);
|
|
441
|
+
const [followCameraRotationOffset, setFollowCameraRotationOffset] = useState(0);
|
|
442
|
+
// Fly Camera state
|
|
443
|
+
const [flyCameraName, setFlyCameraName] = useState("Fly Camera");
|
|
444
|
+
const [flyCameraPosition, setFlyCameraPosition] = useState(new Vector3(0, 1, -10));
|
|
445
|
+
// Geospatial Camera state
|
|
446
|
+
const [geospatialCameraName, setGeospatialCameraName] = useState("Geospatial Camera");
|
|
447
|
+
const [geospatialCameraPlanetRadius, setGeospatialCameraPlanetRadius] = useState(6371000);
|
|
434
448
|
const handleCreateArcRotateCamera = () => {
|
|
435
449
|
const alpha = arcRotateCameraUseRadians ? arcRotateCameraAlpha : (arcRotateCameraAlpha * Math.PI) / 180;
|
|
436
450
|
const beta = arcRotateCameraUseRadians ? arcRotateCameraBeta : (arcRotateCameraBeta * Math.PI) / 180;
|
|
@@ -447,24 +461,46 @@ const CamerasContent = ({ scene }) => {
|
|
|
447
461
|
scene.activeCamera = camera;
|
|
448
462
|
}
|
|
449
463
|
};
|
|
450
|
-
|
|
464
|
+
const handleCreateFreeCamera = () => {
|
|
465
|
+
const camera = new FreeCamera(freeCameraName, freeCameraPosition, scene);
|
|
466
|
+
camera.attachControl(scene.getEngine().getRenderingCanvas(), true);
|
|
467
|
+
if (!scene.activeCamera) {
|
|
468
|
+
scene.activeCamera = camera;
|
|
469
|
+
}
|
|
470
|
+
};
|
|
471
|
+
const handleCreateFollowCamera = () => {
|
|
472
|
+
const camera = new FollowCamera(followCameraName, followCameraPosition, scene);
|
|
473
|
+
camera.radius = followCameraRadius;
|
|
474
|
+
camera.heightOffset = followCameraHeightOffset;
|
|
475
|
+
camera.rotationOffset = followCameraRotationOffset;
|
|
476
|
+
camera.attachControl(true);
|
|
477
|
+
if (!scene.activeCamera) {
|
|
478
|
+
scene.activeCamera = camera;
|
|
479
|
+
}
|
|
480
|
+
};
|
|
481
|
+
const handleCreateFlyCamera = () => {
|
|
482
|
+
const camera = new FlyCamera(flyCameraName, flyCameraPosition, scene);
|
|
483
|
+
camera.attachControl(true);
|
|
484
|
+
if (!scene.activeCamera) {
|
|
485
|
+
scene.activeCamera = camera;
|
|
486
|
+
}
|
|
487
|
+
};
|
|
488
|
+
const handleCreateGeospatialCamera = () => {
|
|
489
|
+
const camera = new GeospatialCamera(geospatialCameraName, scene, { planetRadius: geospatialCameraPlanetRadius });
|
|
490
|
+
camera.attachControl(true);
|
|
491
|
+
if (!scene.activeCamera) {
|
|
492
|
+
scene.activeCamera = camera;
|
|
493
|
+
}
|
|
494
|
+
};
|
|
495
|
+
return (jsxs(QuickCreateSection, { children: [jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateArcRotateCamera, label: "ArcRotate Camera" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: arcRotateCameraName, onChange: (value) => setArcRotateCameraName(value) }), jsx(Vector3PropertyLine, { label: "Target", value: arcRotateCameraTarget, onChange: (value) => setArcRotateCameraTarget(value) }), jsx(SpinButtonPropertyLine, { label: "Radius", value: arcRotateCameraRadius, onChange: (value) => setArcRotateCameraRadius(value), min: 0.1, max: 1000, step: 0.5 }), jsx(SpinButtonPropertyLine, { label: `Alpha ${arcRotateCameraUseRadians ? "(rad)" : "(deg)"}`, value: arcRotateCameraAlpha, onChange: (value) => setArcRotateCameraAlpha(value), min: arcRotateCameraUseRadians ? -Math.PI * 2 : -360, max: arcRotateCameraUseRadians ? Math.PI * 2 : 360, step: arcRotateCameraUseRadians ? 0.1 : 5 }), jsx(SpinButtonPropertyLine, { label: `Beta ${arcRotateCameraUseRadians ? "(rad)" : "(deg)"}`, value: arcRotateCameraBeta, onChange: (value) => setArcRotateCameraBeta(value), min: arcRotateCameraUseRadians ? 0 : 0, max: arcRotateCameraUseRadians ? Math.PI : 180, step: arcRotateCameraUseRadians ? 0.1 : 5 }), jsx(CheckboxPropertyLine, { label: "Use Radians", value: arcRotateCameraUseRadians, onChange: (value) => setArcRotateCameraUseRadians(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateArcRotateCamera, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateUniversalCamera, label: "Universal Camera" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: universalCameraName, onChange: (value) => setUniversalCameraName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: universalCameraPosition, onChange: (value) => setUniversalCameraPosition(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateUniversalCamera, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateFreeCamera, label: "Free Camera" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: freeCameraName, onChange: (value) => setFreeCameraName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: freeCameraPosition, onChange: (value) => setFreeCameraPosition(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateFreeCamera, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateFollowCamera, label: "Follow Camera" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: followCameraName, onChange: (value) => setFollowCameraName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: followCameraPosition, onChange: (value) => setFollowCameraPosition(value) }), jsx(SpinButtonPropertyLine, { label: "Radius", value: followCameraRadius, onChange: (value) => setFollowCameraRadius(value), min: 0.1, max: 1000, step: 0.5 }), jsx(SpinButtonPropertyLine, { label: "Height Offset", value: followCameraHeightOffset, onChange: (value) => setFollowCameraHeightOffset(value), min: -100, max: 100, step: 0.5 }), jsx(SpinButtonPropertyLine, { label: "Rotation Offset (deg)", value: followCameraRotationOffset, onChange: (value) => setFollowCameraRotationOffset(value), min: -180, max: 180, step: 5 }), jsx(Button, { appearance: "primary", onClick: handleCreateFollowCamera, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateFlyCamera, label: "Fly Camera" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: flyCameraName, onChange: (value) => setFlyCameraName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: flyCameraPosition, onChange: (value) => setFlyCameraPosition(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateFlyCamera, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateGeospatialCamera, label: "Geospatial Camera" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: geospatialCameraName, onChange: (value) => setGeospatialCameraName(value) }), jsx(SpinButtonPropertyLine, { label: "Planet Radius (m)", value: geospatialCameraPlanetRadius, onChange: (value) => setGeospatialCameraPlanetRadius(value), min: 1000, max: 100000000, step: 1000 }), jsx(Button, { appearance: "primary", onClick: handleCreateGeospatialCamera, label: "Create" })] })] })] }));
|
|
451
496
|
};
|
|
452
497
|
|
|
453
|
-
const useStyles = makeStyles({
|
|
454
|
-
section: {
|
|
455
|
-
display: "flex",
|
|
456
|
-
flexDirection: "column",
|
|
457
|
-
rowGap: tokens.spacingVerticalM,
|
|
458
|
-
},
|
|
459
|
-
row: { display: "flex", alignItems: "center", gap: "4px" },
|
|
460
|
-
});
|
|
461
498
|
/**
|
|
462
499
|
* Particles content component
|
|
463
500
|
* @param props - Component props
|
|
464
501
|
* @returns React component
|
|
465
502
|
*/
|
|
466
503
|
const ParticlesContent = ({ scene }) => {
|
|
467
|
-
const classes = useStyles();
|
|
468
504
|
// CPU Particle System state
|
|
469
505
|
const [cpuParticleSystemName, setCpuParticleSystemName] = useState("Particle System");
|
|
470
506
|
const [cpuParticleSystemCapacity, setCpuParticleSystemCapacity] = useState(2000);
|
|
@@ -515,7 +551,93 @@ const ParticlesContent = ({ scene }) => {
|
|
|
515
551
|
alert("Failed to create Node Particle System: " + e);
|
|
516
552
|
}
|
|
517
553
|
};
|
|
518
|
-
return (jsxs(
|
|
554
|
+
return (jsxs(QuickCreateSection, { children: [jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateCPUParticleSystem, label: "CPU Particle System" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: cpuParticleSystemName, onChange: (value) => setCpuParticleSystemName(value) }), jsx(SpinButtonPropertyLine, { label: "Capacity", value: cpuParticleSystemCapacity, onChange: (value) => setCpuParticleSystemCapacity(value), min: 1, max: 100000, step: 100 }), jsx(Button, { appearance: "primary", onClick: handleCreateCPUParticleSystem, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateGPUParticleSystem, label: "GPU Particle System" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: gpuParticleSystemName, onChange: (value) => setGpuParticleSystemName(value) }), jsx(SpinButtonPropertyLine, { label: "Capacity", value: gpuParticleSystemCapacity, onChange: (value) => setGpuParticleSystemCapacity(value), min: 1, max: 1000000, step: 1000 }), jsx(Button, { appearance: "primary", onClick: handleCreateGPUParticleSystem, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateNodeParticleSystemAsync, label: "Node Particle System" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: nodeParticleSystemName, onChange: (value) => setNodeParticleSystemName(value) }), jsx(TextInputPropertyLine, { label: "Snippet ID", value: nodeParticleSystemSnippetId, onChange: (value) => setNodeParticleSystemSnippetId(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateNodeParticleSystemAsync, label: "Create" })] })] })] }));
|
|
555
|
+
};
|
|
556
|
+
|
|
557
|
+
/**
|
|
558
|
+
* Rendering Pipelines content component
|
|
559
|
+
* @param props - Component props
|
|
560
|
+
* @returns React component
|
|
561
|
+
*/
|
|
562
|
+
const RenderingPipelinesContent = ({ scene }) => {
|
|
563
|
+
// Default Rendering Pipeline state
|
|
564
|
+
const [defaultPipelineName, setDefaultPipelineName] = useState("Default rendering pipeline");
|
|
565
|
+
// SSAO Pipeline state
|
|
566
|
+
const [ssaoPipelineName, setSsaoPipelineName] = useState("SSAO rendering pipeline");
|
|
567
|
+
// SSAO2 Pipeline state
|
|
568
|
+
const [ssao2PipelineName, setSsao2PipelineName] = useState("SSAO2 rendering pipeline");
|
|
569
|
+
// SSR Pipeline state
|
|
570
|
+
const [ssrPipelineName, setSsrPipelineName] = useState("SSR rendering pipeline");
|
|
571
|
+
// IBL Shadows Pipeline state
|
|
572
|
+
const [iblShadowsPipelineName, setIblShadowsPipelineName] = useState("IBL Shadows rendering pipeline");
|
|
573
|
+
const handleCreateDefaultPipeline = () => {
|
|
574
|
+
new DefaultRenderingPipeline(defaultPipelineName, true, scene, scene.cameras);
|
|
575
|
+
};
|
|
576
|
+
const handleCreateSSAOPipeline = () => {
|
|
577
|
+
new SSAORenderingPipeline(ssaoPipelineName, scene, 1, scene.cameras);
|
|
578
|
+
};
|
|
579
|
+
const handleCreateSSAO2Pipeline = () => {
|
|
580
|
+
new SSAO2RenderingPipeline(ssao2PipelineName, scene, 1, scene.cameras);
|
|
581
|
+
};
|
|
582
|
+
const handleCreateSSRPipeline = () => {
|
|
583
|
+
new SSRRenderingPipeline(ssrPipelineName, scene, scene.cameras);
|
|
584
|
+
};
|
|
585
|
+
const handleCreateIBLShadowsPipeline = () => {
|
|
586
|
+
new IblShadowsRenderPipeline(iblShadowsPipelineName, scene, {}, scene.cameras);
|
|
587
|
+
};
|
|
588
|
+
const caps = scene.getEngine().getCaps();
|
|
589
|
+
const hasDrawBuffers = caps.drawBuffersExtension;
|
|
590
|
+
const hasTexelFetch = caps.texelFetch;
|
|
591
|
+
const camera = useProperty(scene, "activeCamera");
|
|
592
|
+
return (jsx(QuickCreateSection, { children: !camera ? (jsx(MessageBar, { message: "Cannot create rendering pipeline without an active camera.", title: "No active camera", intent: "info" })) : (jsxs(Fragment, { children: [jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateDefaultPipeline, label: "Default Pipeline" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: defaultPipelineName, onChange: (value) => setDefaultPipelineName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateDefaultPipeline, label: "Create" })] })] }), jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateSSAOPipeline, label: "SSAO Pipeline" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: ssaoPipelineName, onChange: (value) => setSsaoPipelineName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateSSAOPipeline, label: "Create" })] })] }), hasDrawBuffers && (jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateSSAO2Pipeline, label: "SSAO2 Pipeline" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: ssao2PipelineName, onChange: (value) => setSsao2PipelineName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateSSAO2Pipeline, label: "Create" })] })] })), hasDrawBuffers && hasTexelFetch && (jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateSSRPipeline, label: "SSR Pipeline" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: ssrPipelineName, onChange: (value) => setSsrPipelineName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateSSRPipeline, label: "Create" })] })] })), hasDrawBuffers && hasTexelFetch && (jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateIBLShadowsPipeline, label: "IBL Shadows Pipeline" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: iblShadowsPipelineName, onChange: (value) => setIblShadowsPipelineName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateIBLShadowsPipeline, label: "Create" })] })] }))] })) }));
|
|
593
|
+
};
|
|
594
|
+
|
|
595
|
+
/**
|
|
596
|
+
* Helper to generate a unique frame graph name
|
|
597
|
+
* @param baseName - The base name to use
|
|
598
|
+
* @param scene - The scene to check for existing frame graphs
|
|
599
|
+
* @returns A unique name
|
|
600
|
+
*/
|
|
601
|
+
function GetUniqueName(baseName, scene) {
|
|
602
|
+
let name = baseName;
|
|
603
|
+
let idSubscript = 1;
|
|
604
|
+
while (scene.getFrameGraphByName(name)) {
|
|
605
|
+
name = baseName + " " + idSubscript++;
|
|
606
|
+
}
|
|
607
|
+
return name;
|
|
608
|
+
}
|
|
609
|
+
/**
|
|
610
|
+
* Frame Graphs content component
|
|
611
|
+
* @param props - Component props
|
|
612
|
+
* @returns React component
|
|
613
|
+
*/
|
|
614
|
+
const FrameGraphsContent = ({ scene }) => {
|
|
615
|
+
// Node Render Graph state
|
|
616
|
+
const [frameGraphName, setFrameGraphName] = useState("Frame Graph");
|
|
617
|
+
const handleCreateFrameGraph = () => {
|
|
618
|
+
const uniqueName = GetUniqueName(frameGraphName, scene);
|
|
619
|
+
const newNodeRenderGraph = new NodeRenderGraph(uniqueName, scene);
|
|
620
|
+
newNodeRenderGraph.setToDefault();
|
|
621
|
+
void newNodeRenderGraph.buildAsync();
|
|
622
|
+
};
|
|
623
|
+
return (jsx(QuickCreateSection, { children: jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateFrameGraph, label: "Frame Graph" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: frameGraphName, onChange: (value) => setFrameGraphName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateFrameGraph, label: "Create" })] })] }) }));
|
|
624
|
+
};
|
|
625
|
+
|
|
626
|
+
/**
|
|
627
|
+
* Sprite Managers content component
|
|
628
|
+
* @param props - Component props
|
|
629
|
+
* @returns React component
|
|
630
|
+
*/
|
|
631
|
+
const SpriteManagersContent = ({ scene }) => {
|
|
632
|
+
// Sprite Manager state
|
|
633
|
+
const [spriteManagerName, setSpriteManagerName] = useState("Sprite Manager");
|
|
634
|
+
const [spriteManagerCapacity, setSpriteManagerCapacity] = useState(500);
|
|
635
|
+
const [spriteManagerCellSize, setSpriteManagerCellSize] = useState(64);
|
|
636
|
+
const [spriteManagerTextureUrl, setSpriteManagerTextureUrl] = useState("https://assets.babylonjs.com/textures/player.png");
|
|
637
|
+
const handleCreateSpriteManager = () => {
|
|
638
|
+
new SpriteManager(spriteManagerName, spriteManagerTextureUrl, spriteManagerCapacity, spriteManagerCellSize, scene);
|
|
639
|
+
};
|
|
640
|
+
return (jsx(QuickCreateSection, { children: jsxs(QuickCreateRow, { children: [jsx(Button, { onClick: handleCreateSpriteManager, label: "Sprite Manager" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: spriteManagerName, onChange: (value) => setSpriteManagerName(value) }), jsx(TextInputPropertyLine, { label: "Texture URL", value: spriteManagerTextureUrl, onChange: (value) => setSpriteManagerTextureUrl(value) }), jsx(SpinButtonPropertyLine, { label: "Capacity", value: spriteManagerCapacity, onChange: (value) => setSpriteManagerCapacity(value), min: 1, max: 10000, step: 100 }), jsx(SpinButtonPropertyLine, { label: "Cell Size", value: spriteManagerCellSize, onChange: (value) => setSpriteManagerCellSize(value), min: 1, max: 1024, step: 1 }), jsx(Button, { appearance: "primary", onClick: handleCreateSpriteManager, label: "Create" })] })] }) }));
|
|
519
641
|
};
|
|
520
642
|
|
|
521
643
|
// TODO: This is just a placeholder for a dynamically installed extension that brings in asset creation tools (node materials, etc.).
|
|
@@ -531,7 +653,7 @@ const CreateToolsServiceDefinition = {
|
|
|
531
653
|
verticalLocation: "top",
|
|
532
654
|
content: () => {
|
|
533
655
|
const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
|
|
534
|
-
return (scene && (jsx(Fragment, { children: jsxs(Accordion, { children: [jsx(AccordionSection, { title: "Meshes", children: jsx(MeshesContent, { scene: scene }) }), jsx(AccordionSection, { title: "Materials", children: jsx(MaterialsContent, { scene: scene }) }), jsx(AccordionSection, { title: "Lights", children: jsx(LightsContent, { scene: scene }) }), jsx(AccordionSection, { title: "Particles", children: jsx(ParticlesContent, { scene: scene }) }), jsx(AccordionSection, { title: "Cameras", children: jsx(CamerasContent, { scene: scene }) })] }) })));
|
|
656
|
+
return (scene && (jsx(Fragment, { children: jsxs(Accordion, { children: [jsx(AccordionSection, { title: "Meshes", children: jsx(MeshesContent, { scene: scene }) }), jsx(AccordionSection, { title: "Materials", children: jsx(MaterialsContent, { scene: scene }) }), jsx(AccordionSection, { title: "Lights", children: jsx(LightsContent, { scene: scene }) }), jsx(AccordionSection, { title: "Particles", children: jsx(ParticlesContent, { scene: scene }) }), jsx(AccordionSection, { title: "Cameras", children: jsx(CamerasContent, { scene: scene }) }), jsx(AccordionSection, { title: "Rendering Pipelines", children: jsx(RenderingPipelinesContent, { scene: scene }) }), jsx(AccordionSection, { title: "Frame Graphs", children: jsx(FrameGraphsContent, { scene: scene }) }), jsx(AccordionSection, { title: "Sprite Managers", children: jsx(SpriteManagersContent, { scene: scene }) })] }) })));
|
|
535
657
|
},
|
|
536
658
|
});
|
|
537
659
|
return {
|
|
@@ -544,4 +666,4 @@ var quickCreateToolsService = {
|
|
|
544
666
|
};
|
|
545
667
|
|
|
546
668
|
export { CreateToolsServiceDefinition, quickCreateToolsService as default };
|
|
547
|
-
//# sourceMappingURL=quickCreateToolsService-
|
|
669
|
+
//# sourceMappingURL=quickCreateToolsService-hEV1m5Nc.js.map
|