Skip to content

Commit aa5f5ab

Browse files
julien-moreaujulien-moreau
committed
feat: add support of heightmap in ground geometry inspector
1 parent 01e5e14 commit aa5f5ab

File tree

12 files changed

+468
-115
lines changed

12 files changed

+468
-115
lines changed

‎editor/src/editor/layout/inspector/fields/color.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export interface IEditorInspectorColorFieldProps extends IEditorInspectorFieldPr
2121
noColorPicker?: boolean;
2222

2323
onChange?: (value: Color3 | Color4) => void;
24-
onFinishChange?: (value: Color3 | Color4) => void;
24+
onFinishChange?: (value: Color3 | Color4, oldValue: Color3 | Color4) => void;
2525
}
2626

2727
export function EditorInspectorColorField(props: IEditorInspectorColorFieldProps) {
@@ -59,7 +59,7 @@ export function EditorInspectorColorField(props: IEditorInspectorColorFieldProps
5959
setOldValue(color.clone());
6060
}
6161

62-
props.onFinishChange?.(color);
62+
props.onFinishChange?.(color, oldValue);
6363
}
6464

6565
function handleChanelChange(value: number, channel: "r" | "g" | "b" | "a") {

‎editor/src/editor/layout/inspector/fields/texture.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export class EditorInspectorTextureField extends Component<IEditorInspectorTextu
157157
}}
158158
className="flex justify-center items-center w-24 h-full hover:bg-muted-foreground rounded-lg transition-all duration-300"
159159
>
160-
<XMarkIcon className="w-6 h-6" />
160+
{texture && <XMarkIcon className="w-6 h-6" />}
161161
</div>
162162
</div>
163163

‎editor/src/editor/layout/inspector/material/pbr.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,12 @@ export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInsp
131131
)}
132132
</EditorInspectorTextureField>
133133

134-
<EditorInspectorTextureField object={this.props.material} title="Metallic Reflectance Texture" property="metallicReflectanceTexture" onChange={() => this.forceUpdate()}>
134+
<EditorInspectorTextureField
135+
object={this.props.material}
136+
title="Metallic Reflectance Texture"
137+
property="metallicReflectanceTexture"
138+
onChange={() => this.forceUpdate()}
139+
>
135140
{this.props.material.metallicReflectanceTexture && (
136141
<>
137142
<EditorInspectorSwitchField

‎editor/src/editor/layout/inspector/mesh/geometry.tsx‎

Lines changed: 14 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,28 @@
1-
import { Component, ReactNode } from "react";
1+
import { Mesh } from "babylonjs";
22

3-
import { CreateBoxVertexData, CreateSphereVertexData, CreateGroundVertexData, Mesh } from "babylonjs";
3+
import { Editor } from "../../../main";
44

5-
import { EditorInspectorListField } from "../fields/list";
6-
import { EditorInspectorNumberField } from "../fields/number";
7-
import { EditorInspectorSectionField } from "../fields/section";
5+
import { BoxMeshGeometryInspector } from "./geometry/box";
6+
import { GroundMeshGeometryInspector } from "./geometry/ground";
7+
import { SphereMeshGeometryInspector } from "./geometry/sphere";
88

99
export interface IMeshGeometryInspectorProps {
1010
object: Mesh;
11+
editor: Editor;
1112
}
1213

13-
export class MeshGeometryInspector extends Component<IMeshGeometryInspectorProps> {
14-
public render(): ReactNode {
15-
if (this.props.object.metadata?.type === "Box") {
16-
return this._getBoxInspectorComponent();
17-
}
18-
19-
if (this.props.object.metadata?.type === "Sphere") {
20-
return this._getSphereInspectorComponent();
21-
}
22-
23-
if (this.props.object.metadata?.type === "Ground") {
24-
return this._getGroundInspectorComponent();
25-
}
26-
27-
return null;
14+
export function MeshGeometryInspector(props: IMeshGeometryInspectorProps) {
15+
if (props.object.metadata?.type === "Box") {
16+
return <BoxMeshGeometryInspector {...props} />;
2817
}
2918

30-
private _getBoxInspectorComponent(): ReactNode {
31-
const proxy = this._getProxy(() => {
32-
this.props.object.geometry?.setAllVerticesData(
33-
CreateBoxVertexData({
34-
width: this.props.object.metadata.width,
35-
height: this.props.object.metadata.height,
36-
depth: this.props.object.metadata.depth,
37-
sideOrientation: this.props.object.metadata.sideOrientation,
38-
}),
39-
false
40-
);
41-
});
42-
43-
return (
44-
<EditorInspectorSectionField title="Box">
45-
<EditorInspectorNumberField object={proxy} property="width" label="Width" step={0.1} />
46-
<EditorInspectorNumberField object={proxy} property="height" label="Height" step={0.1} />
47-
<EditorInspectorNumberField object={proxy} property="depth" label="Depth" step={0.1} />
48-
<EditorInspectorListField
49-
object={proxy}
50-
property="sideOrientation"
51-
label="Side Orientation"
52-
items={[
53-
{ text: "Front", value: Mesh.FRONTSIDE },
54-
{ text: "Back", value: Mesh.BACKSIDE },
55-
]}
56-
/>
57-
</EditorInspectorSectionField>
58-
);
19+
if (props.object.metadata?.type === "Sphere") {
20+
return <SphereMeshGeometryInspector {...props} />;
5921
}
6022

61-
private _getSphereInspectorComponent(): ReactNode {
62-
const proxy = this._getProxy(() => {
63-
this.props.object.geometry?.setAllVerticesData(
64-
CreateSphereVertexData({
65-
diameter: this.props.object.metadata.diameter,
66-
segments: this.props.object.metadata.segments,
67-
sideOrientation: this.props.object.metadata.sideOrientation,
68-
}),
69-
false
70-
);
71-
});
72-
73-
return (
74-
<EditorInspectorSectionField title="Sphere">
75-
<EditorInspectorNumberField object={proxy} property="diameter" label="Diameter" step={0.1} min={0.01} />
76-
<EditorInspectorNumberField object={proxy} property="segments" label="Segments" step={0.1} min={2} />
77-
<EditorInspectorListField
78-
object={proxy}
79-
property="sideOrientation"
80-
label="Side Orientation"
81-
items={[
82-
{ text: "Front", value: Mesh.FRONTSIDE },
83-
{ text: "Back", value: Mesh.BACKSIDE },
84-
]}
85-
/>
86-
</EditorInspectorSectionField>
87-
);
23+
if (props.object.metadata?.type === "Ground") {
24+
return <GroundMeshGeometryInspector {...props} />;
8825
}
8926

90-
private _getGroundInspectorComponent(): ReactNode {
91-
const proxy = this._getProxy(() => {
92-
this.props.object.geometry?.setAllVerticesData(
93-
CreateGroundVertexData({
94-
width: this.props.object.metadata.width,
95-
height: this.props.object.metadata.height,
96-
subdivisions: this.props.object.metadata.subdivisions >> 0,
97-
}),
98-
false
99-
);
100-
});
101-
102-
return (
103-
<EditorInspectorSectionField title="Ground">
104-
<EditorInspectorNumberField object={proxy} property="width" label="Width" step={0.1} />
105-
<EditorInspectorNumberField object={proxy} property="height" label="Height" step={0.1} />
106-
<EditorInspectorNumberField object={proxy} property="subdivisions" label="Subdivisions" step={1} min={1} />
107-
</EditorInspectorSectionField>
108-
);
109-
}
110-
111-
private _getProxy<T>(onChange: () => void): T {
112-
return new Proxy(this.props.object.metadata, {
113-
get(target, prop) {
114-
return target[prop];
115-
},
116-
set(obj, prop, value) {
117-
obj[prop] = value;
118-
onChange();
119-
return true;
120-
},
121-
});
122-
}
27+
return null;
12328
}

‎editor/src/editor/layout/inspector/mesh/geometry/box.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Mesh, CreateBoxVertexData } from "babylonjs";
2+
3+
import { Editor } from "../../../../main";
4+
5+
import { EditorInspectorListField } from "../../fields/list";
6+
import { EditorInspectorNumberField } from "../../fields/number";
7+
import { EditorInspectorSectionField } from "../../fields/section";
8+
9+
import { getProxy } from "./proxy";
10+
11+
export interface IBoxMeshGeometryInspectorProps {
12+
object: Mesh;
13+
editor: Editor;
14+
}
15+
16+
export function BoxMeshGeometryInspector(props: IBoxMeshGeometryInspectorProps) {
17+
const proxy = getProxy(props.object.metadata, () => {
18+
handleUpdateGeometry();
19+
});
20+
21+
function handleUpdateGeometry() {
22+
props.object.geometry?.setAllVerticesData(
23+
CreateBoxVertexData({
24+
width: props.object.metadata.width,
25+
height: props.object.metadata.height,
26+
depth: props.object.metadata.depth,
27+
sideOrientation: props.object.metadata.sideOrientation,
28+
}),
29+
false
30+
);
31+
32+
props.object.refreshBoundingInfo({
33+
updatePositionsArray: true,
34+
});
35+
}
36+
37+
return (
38+
<EditorInspectorSectionField title="Box">
39+
<EditorInspectorNumberField object={proxy} property="width" label="Width" step={0.1} />
40+
<EditorInspectorNumberField object={proxy} property="height" label="Height" step={0.1} />
41+
<EditorInspectorNumberField object={proxy} property="depth" label="Depth" step={0.1} />
42+
<EditorInspectorListField
43+
object={proxy}
44+
property="sideOrientation"
45+
label="Side Orientation"
46+
items={[
47+
{ text: "Front", value: Mesh.FRONTSIDE },
48+
{ text: "Back", value: Mesh.BACKSIDE },
49+
]}
50+
/>
51+
</EditorInspectorSectionField>
52+
);
53+
}

0 commit comments

Comments
 (0)