react-three-game 0.0.31 → 0.0.32
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/README.md
CHANGED
|
@@ -138,15 +138,28 @@ React 19 · Three.js WebGPU · TypeScript 5 · Rapier WASM · MIT License
|
|
|
138
138
|
|
|
139
139
|
A small helper script is included to auto-generate asset manifests from the `public` folder. See `docs/generate-manifests.sh`.
|
|
140
140
|
|
|
141
|
-
- What it does
|
|
142
|
-
|
|
141
|
+
- **What it does:**
|
|
142
|
+
Searches `public/models` for `.glb`/`.fbx`, `public/textures` for `.jpg`/`.png`, and `public/sound` for `.mp3`/`.wav`, then writes JSON arrays to:
|
|
143
|
+
- `public/models/manifest.json`
|
|
144
|
+
- `public/textures/manifest.json`
|
|
145
|
+
- `public/sound/manifest.json`
|
|
146
|
+
|
|
147
|
+
These manifest files are used to populate the Asset Viewer in the Editor.
|
|
148
|
+
|
|
149
|
+
- **How to run:**
|
|
143
150
|
|
|
144
151
|
1. Make it executable (once):
|
|
145
152
|
|
|
146
|
-
|
|
153
|
+
```sh
|
|
154
|
+
chmod +x docs/generate-manifests.sh
|
|
155
|
+
```
|
|
147
156
|
|
|
148
157
|
2. Run the script from the repo root (zsh/bash):
|
|
149
158
|
|
|
150
|
-
|
|
159
|
+
```sh
|
|
160
|
+
./docs/generate-manifests.sh
|
|
161
|
+
```
|
|
162
|
+
|
|
151
163
|
|
|
152
|
-
The script is intentionally simple and portable (uses `find`/`sed`).
|
|
164
|
+
The script is intentionally simple and portable (uses `find`/`sed`).
|
|
165
|
+
If you need different file types or output formatting, edit `docs/generate-manifests.sh`.
|
|
@@ -1,6 +1,35 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
const GEOMETRY_ARGS = {
|
|
3
|
+
box: {
|
|
4
|
+
labels: ["Width", "Height", "Depth"],
|
|
5
|
+
defaults: [1, 1, 1],
|
|
6
|
+
},
|
|
7
|
+
sphere: {
|
|
8
|
+
labels: ["Radius", "Width Segments", "Height Segments"],
|
|
9
|
+
defaults: [1, 32, 16],
|
|
10
|
+
},
|
|
11
|
+
plane: {
|
|
12
|
+
labels: ["Width", "Height"],
|
|
13
|
+
defaults: [1, 1],
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
function GeometryComponentEditor({ component, onUpdate, }) {
|
|
17
|
+
const { geometryType, args = [] } = component.properties;
|
|
18
|
+
const schema = GEOMETRY_ARGS[geometryType];
|
|
19
|
+
return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "label", children: "Type" }), _jsxs("select", { className: "select", value: geometryType, onChange: e => {
|
|
20
|
+
const type = e.target.value;
|
|
21
|
+
onUpdate({
|
|
22
|
+
geometryType: type,
|
|
23
|
+
args: GEOMETRY_ARGS[type].defaults,
|
|
24
|
+
});
|
|
25
|
+
}, children: [_jsx("option", { value: "box", children: "Box" }), _jsx("option", { value: "sphere", children: "Sphere" }), _jsx("option", { value: "plane", children: "Plane" })] }), schema.labels.map((label, i) => {
|
|
26
|
+
var _a;
|
|
27
|
+
return (_jsxs("div", { children: [_jsx("label", { className: "label", children: label }), _jsx("input", { type: "number", className: "input", value: (_a = args[i]) !== null && _a !== void 0 ? _a : schema.defaults[i], step: "0.1", onChange: e => {
|
|
28
|
+
const next = [...args];
|
|
29
|
+
next[i] = parseFloat(e.target.value);
|
|
30
|
+
onUpdate({ args: next });
|
|
31
|
+
} })] }, label));
|
|
32
|
+
})] }));
|
|
4
33
|
}
|
|
5
34
|
// View for Geometry component
|
|
6
35
|
function GeometryComponentView({ properties, children }) {
|
|
@@ -22,7 +51,8 @@ const GeometryComponent = {
|
|
|
22
51
|
Editor: GeometryComponentEditor,
|
|
23
52
|
View: GeometryComponentView,
|
|
24
53
|
defaultProperties: {
|
|
25
|
-
geometryType: 'box'
|
|
54
|
+
geometryType: 'box',
|
|
55
|
+
args: GEOMETRY_ARGS.box.defaults,
|
|
26
56
|
}
|
|
27
57
|
};
|
|
28
58
|
export default GeometryComponent;
|
package/package.json
CHANGED
|
@@ -1,20 +1,75 @@
|
|
|
1
1
|
import { Component } from "./ComponentRegistry";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
3
|
+
const GEOMETRY_ARGS: Record<string, {
|
|
4
|
+
labels: string[];
|
|
5
|
+
defaults: number[];
|
|
6
|
+
}> = {
|
|
7
|
+
box: {
|
|
8
|
+
labels: ["Width", "Height", "Depth"],
|
|
9
|
+
defaults: [1, 1, 1],
|
|
10
|
+
},
|
|
11
|
+
sphere: {
|
|
12
|
+
labels: ["Radius", "Width Segments", "Height Segments"],
|
|
13
|
+
defaults: [1, 32, 16],
|
|
14
|
+
},
|
|
15
|
+
plane: {
|
|
16
|
+
labels: ["Width", "Height"],
|
|
17
|
+
defaults: [1, 1],
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
function GeometryComponentEditor({
|
|
22
|
+
component,
|
|
23
|
+
onUpdate,
|
|
24
|
+
}: {
|
|
25
|
+
component: any;
|
|
26
|
+
onUpdate: (newProps: any) => void;
|
|
27
|
+
}) {
|
|
28
|
+
const { geometryType, args = [] } = component.properties;
|
|
29
|
+
const schema = GEOMETRY_ARGS[geometryType];
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<div className="flex flex-col gap-1">
|
|
33
|
+
{/* Geometry Type */}
|
|
34
|
+
<label className="label">Type</label>
|
|
35
|
+
<select
|
|
36
|
+
className="select"
|
|
37
|
+
value={geometryType}
|
|
38
|
+
onChange={e => {
|
|
39
|
+
const type = e.target.value;
|
|
40
|
+
onUpdate({
|
|
41
|
+
geometryType: type,
|
|
42
|
+
args: GEOMETRY_ARGS[type].defaults,
|
|
43
|
+
});
|
|
44
|
+
}}
|
|
45
|
+
>
|
|
46
|
+
<option value="box">Box</option>
|
|
47
|
+
<option value="sphere">Sphere</option>
|
|
48
|
+
<option value="plane">Plane</option>
|
|
49
|
+
</select>
|
|
50
|
+
|
|
51
|
+
{/* Args */}
|
|
52
|
+
{schema.labels.map((label, i) => (
|
|
53
|
+
<div key={label}>
|
|
54
|
+
<label className="label">{label}</label>
|
|
55
|
+
<input
|
|
56
|
+
type="number"
|
|
57
|
+
className="input"
|
|
58
|
+
value={args[i] ?? schema.defaults[i]}
|
|
59
|
+
step="0.1"
|
|
60
|
+
onChange={e => {
|
|
61
|
+
const next = [...args];
|
|
62
|
+
next[i] = parseFloat(e.target.value);
|
|
63
|
+
onUpdate({ args: next });
|
|
64
|
+
}}
|
|
65
|
+
/>
|
|
66
|
+
</div>
|
|
67
|
+
))}
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
16
70
|
}
|
|
17
71
|
|
|
72
|
+
|
|
18
73
|
// View for Geometry component
|
|
19
74
|
function GeometryComponentView({ properties, children }: { properties: any, children?: React.ReactNode }) {
|
|
20
75
|
const { geometryType, args = [] } = properties;
|
|
@@ -36,7 +91,8 @@ const GeometryComponent: Component = {
|
|
|
36
91
|
Editor: GeometryComponentEditor,
|
|
37
92
|
View: GeometryComponentView,
|
|
38
93
|
defaultProperties: {
|
|
39
|
-
geometryType: 'box'
|
|
94
|
+
geometryType: 'box',
|
|
95
|
+
args: GEOMETRY_ARGS.box.defaults,
|
|
40
96
|
}
|
|
41
97
|
};
|
|
42
98
|
|