@aura3d/react 1.0.6
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/index.d.ts +44 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +116 -0
- package/dist/index.js.map +1 -0
- package/package.json +20 -0
- package/src/index.ts +173 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { type CSSProperties, type ReactElement, type ReactNode } from "react";
|
|
2
|
+
import { type AuraApp, type AuraAssetRef, type AuraCameraSpec, type AuraColor, type AuraCreateAppOptions, type AuraEffectNode, type AuraLightNode, type AuraMaterialSpec, type AuraModelOptions, type AuraSceneBuilder, type AuraTimelineSpec } from "@aura3d/engine";
|
|
3
|
+
export interface AuraCanvasProps {
|
|
4
|
+
readonly children?: ReactNode;
|
|
5
|
+
readonly diagnostics?: AuraCreateAppOptions["diagnostics"];
|
|
6
|
+
readonly pixelRatio?: number;
|
|
7
|
+
readonly autoStart?: boolean;
|
|
8
|
+
readonly resize?: boolean;
|
|
9
|
+
readonly className?: string;
|
|
10
|
+
readonly style?: CSSProperties;
|
|
11
|
+
readonly onReady?: (app: AuraApp) => void;
|
|
12
|
+
}
|
|
13
|
+
export interface SceneProps {
|
|
14
|
+
readonly children?: ReactNode;
|
|
15
|
+
readonly background?: AuraColor;
|
|
16
|
+
readonly camera?: AuraCameraSpec;
|
|
17
|
+
readonly timeline?: AuraTimelineSpec;
|
|
18
|
+
readonly diagnostics?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export interface ModelProps extends AuraModelOptions {
|
|
21
|
+
readonly asset: AuraAssetRef<"model">;
|
|
22
|
+
}
|
|
23
|
+
export interface CameraProps extends Omit<AuraCameraSpec, "mode"> {
|
|
24
|
+
readonly mode?: AuraCameraSpec["mode"];
|
|
25
|
+
}
|
|
26
|
+
export interface LightsProps {
|
|
27
|
+
readonly preset?: "studio";
|
|
28
|
+
readonly type?: AuraLightNode["light"];
|
|
29
|
+
readonly intensity?: number;
|
|
30
|
+
readonly color?: AuraColor;
|
|
31
|
+
readonly position?: readonly [number, number, number];
|
|
32
|
+
}
|
|
33
|
+
export interface EffectProps extends Omit<AuraEffectNode, "kind" | "effect"> {
|
|
34
|
+
readonly type: AuraEffectNode["effect"];
|
|
35
|
+
}
|
|
36
|
+
export declare function AuraCanvas(props: AuraCanvasProps): ReactElement;
|
|
37
|
+
export declare function Scene(_props: SceneProps): null;
|
|
38
|
+
export declare function Model(_props: ModelProps): null;
|
|
39
|
+
export declare function Camera(_props: CameraProps): null;
|
|
40
|
+
export declare function Lights(_props: LightsProps): null;
|
|
41
|
+
export declare function Effect(_props: EffectProps): null;
|
|
42
|
+
export declare function buildSceneFromChildren(children: ReactNode): AuraSceneBuilder;
|
|
43
|
+
export declare function productViewerScene(asset: AuraAssetRef<"model">, material?: AuraMaterialSpec): AuraSceneBuilder;
|
|
44
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { Children, createElement, isValidElement, useEffect, useMemo, useRef } from "react";
|
|
2
|
+
import { camera, createAuraApp, effects, lights, model, scene } from "@aura3d/engine";
|
|
3
|
+
export function AuraCanvas(props) {
|
|
4
|
+
const ref = useRef(null);
|
|
5
|
+
const builtScene = useMemo(() => buildSceneFromChildren(props.children), [props.children]);
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (!ref.current)
|
|
8
|
+
return undefined;
|
|
9
|
+
const app = createAuraApp(ref.current, {
|
|
10
|
+
scene: builtScene,
|
|
11
|
+
diagnostics: props.diagnostics,
|
|
12
|
+
pixelRatio: props.pixelRatio,
|
|
13
|
+
autoStart: props.autoStart,
|
|
14
|
+
resize: props.resize
|
|
15
|
+
});
|
|
16
|
+
props.onReady?.(app);
|
|
17
|
+
return () => app.dispose();
|
|
18
|
+
}, [builtScene, props.autoStart, props.diagnostics, props.onReady, props.pixelRatio, props.resize]);
|
|
19
|
+
return createElement("canvas", {
|
|
20
|
+
ref,
|
|
21
|
+
className: props.className,
|
|
22
|
+
style: {
|
|
23
|
+
width: "100%",
|
|
24
|
+
height: "100%",
|
|
25
|
+
display: "block",
|
|
26
|
+
...(props.style ?? {})
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
export function Scene(_props) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
export function Model(_props) {
|
|
34
|
+
return null;
|
|
35
|
+
}
|
|
36
|
+
export function Camera(_props) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
export function Lights(_props) {
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
export function Effect(_props) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
export function buildSceneFromChildren(children) {
|
|
46
|
+
let builder = scene();
|
|
47
|
+
const sceneElement = findFirstElementOfType(children, Scene);
|
|
48
|
+
const sceneProps = (sceneElement?.props ?? {});
|
|
49
|
+
if (sceneProps.background)
|
|
50
|
+
builder = builder.background(sceneProps.background);
|
|
51
|
+
if (sceneProps.camera)
|
|
52
|
+
builder = builder.camera(sceneProps.camera);
|
|
53
|
+
if (sceneProps.timeline)
|
|
54
|
+
builder = builder.timeline(sceneProps.timeline);
|
|
55
|
+
if (sceneProps.diagnostics)
|
|
56
|
+
builder = builder.diagnostics(sceneProps.diagnostics);
|
|
57
|
+
const content = sceneElement ? sceneProps.children : children;
|
|
58
|
+
Children.forEach(content, (child) => {
|
|
59
|
+
if (!isValidElement(child))
|
|
60
|
+
return;
|
|
61
|
+
if (child.type === Model) {
|
|
62
|
+
const props = child.props;
|
|
63
|
+
builder.add(model(props.asset, props));
|
|
64
|
+
}
|
|
65
|
+
if (child.type === Camera) {
|
|
66
|
+
const props = child.props;
|
|
67
|
+
const mode = props.mode ?? "orbit";
|
|
68
|
+
if (mode === "dolly" && props.from && props.to)
|
|
69
|
+
builder.camera(camera.dolly({ ...props, from: props.from, to: props.to }));
|
|
70
|
+
else if (mode === "follow" && props.targetNode)
|
|
71
|
+
builder.camera(camera.follow({ ...props, targetNode: props.targetNode }));
|
|
72
|
+
else if (mode === "perspective")
|
|
73
|
+
builder.camera(camera.perspective(props));
|
|
74
|
+
else
|
|
75
|
+
builder.camera(camera.orbit(props));
|
|
76
|
+
}
|
|
77
|
+
if (child.type === Lights) {
|
|
78
|
+
const props = child.props;
|
|
79
|
+
if (props.preset === "studio" || !props.type || props.type === "studio")
|
|
80
|
+
builder.add(lights.studio({ intensity: props.intensity }));
|
|
81
|
+
else if (props.type === "ambient")
|
|
82
|
+
builder.add(lights.ambient(props));
|
|
83
|
+
else if (props.type === "directional")
|
|
84
|
+
builder.add(lights.directional(props));
|
|
85
|
+
else
|
|
86
|
+
builder.add(lights.point(props));
|
|
87
|
+
}
|
|
88
|
+
if (child.type === Effect) {
|
|
89
|
+
const props = child.props;
|
|
90
|
+
if (props.type === "fog")
|
|
91
|
+
builder.add(effects.fog(props));
|
|
92
|
+
if (props.type === "bloom")
|
|
93
|
+
builder.add(effects.bloom(props));
|
|
94
|
+
if (props.type === "rain")
|
|
95
|
+
builder.add(effects.rain(props));
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
return builder;
|
|
99
|
+
}
|
|
100
|
+
export function productViewerScene(asset, material) {
|
|
101
|
+
return scene()
|
|
102
|
+
.background("#08111f")
|
|
103
|
+
.add(model(asset, { material }).position(0, 0, 0).scale(1))
|
|
104
|
+
.add(lights.studio({ intensity: 1.1 }))
|
|
105
|
+
.camera(camera.orbit({ distance: 4 }))
|
|
106
|
+
.diagnostics(true);
|
|
107
|
+
}
|
|
108
|
+
function findFirstElementOfType(children, type) {
|
|
109
|
+
let found;
|
|
110
|
+
Children.forEach(children, (child) => {
|
|
111
|
+
if (!found && isValidElement(child) && child.type === type)
|
|
112
|
+
found = child;
|
|
113
|
+
});
|
|
114
|
+
return found;
|
|
115
|
+
}
|
|
116
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/react/src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@aura3d/react",
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"exports": {
|
|
6
|
+
".": {
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"import": "./dist/index.js"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
"main": "./dist/index.js",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"peerDependencies": {
|
|
14
|
+
"@aura3d/engine": "^1.0.0",
|
|
15
|
+
"react": "^19.0.0 || ^18.0.0"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@aura3d/engine": "1.0.6"
|
|
19
|
+
}
|
|
20
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Children,
|
|
3
|
+
createElement,
|
|
4
|
+
isValidElement,
|
|
5
|
+
useEffect,
|
|
6
|
+
useMemo,
|
|
7
|
+
useRef,
|
|
8
|
+
type CSSProperties,
|
|
9
|
+
type ReactElement,
|
|
10
|
+
type ReactNode
|
|
11
|
+
} from "react";
|
|
12
|
+
import {
|
|
13
|
+
camera,
|
|
14
|
+
createAuraApp,
|
|
15
|
+
effects,
|
|
16
|
+
lights,
|
|
17
|
+
model,
|
|
18
|
+
scene,
|
|
19
|
+
type AuraApp,
|
|
20
|
+
type AuraAssetRef,
|
|
21
|
+
type AuraCameraSpec,
|
|
22
|
+
type AuraColor,
|
|
23
|
+
type AuraCreateAppOptions,
|
|
24
|
+
type AuraEffectNode,
|
|
25
|
+
type AuraLightNode,
|
|
26
|
+
type AuraMaterialSpec,
|
|
27
|
+
type AuraModelOptions,
|
|
28
|
+
type AuraSceneBuilder,
|
|
29
|
+
type AuraTimelineSpec
|
|
30
|
+
} from "@aura3d/engine";
|
|
31
|
+
|
|
32
|
+
export interface AuraCanvasProps {
|
|
33
|
+
readonly children?: ReactNode;
|
|
34
|
+
readonly diagnostics?: AuraCreateAppOptions["diagnostics"];
|
|
35
|
+
readonly pixelRatio?: number;
|
|
36
|
+
readonly autoStart?: boolean;
|
|
37
|
+
readonly resize?: boolean;
|
|
38
|
+
readonly className?: string;
|
|
39
|
+
readonly style?: CSSProperties;
|
|
40
|
+
readonly onReady?: (app: AuraApp) => void;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export interface SceneProps {
|
|
44
|
+
readonly children?: ReactNode;
|
|
45
|
+
readonly background?: AuraColor;
|
|
46
|
+
readonly camera?: AuraCameraSpec;
|
|
47
|
+
readonly timeline?: AuraTimelineSpec;
|
|
48
|
+
readonly diagnostics?: boolean;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export interface ModelProps extends AuraModelOptions {
|
|
52
|
+
readonly asset: AuraAssetRef<"model">;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export interface CameraProps extends Omit<AuraCameraSpec, "mode"> {
|
|
56
|
+
readonly mode?: AuraCameraSpec["mode"];
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export interface LightsProps {
|
|
60
|
+
readonly preset?: "studio";
|
|
61
|
+
readonly type?: AuraLightNode["light"];
|
|
62
|
+
readonly intensity?: number;
|
|
63
|
+
readonly color?: AuraColor;
|
|
64
|
+
readonly position?: readonly [number, number, number];
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export interface EffectProps extends Omit<AuraEffectNode, "kind" | "effect"> {
|
|
68
|
+
readonly type: AuraEffectNode["effect"];
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export function AuraCanvas(props: AuraCanvasProps): ReactElement {
|
|
72
|
+
const ref = useRef<HTMLCanvasElement | null>(null);
|
|
73
|
+
const builtScene = useMemo(() => buildSceneFromChildren(props.children), [props.children]);
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
if (!ref.current) return undefined;
|
|
76
|
+
const app = createAuraApp(ref.current, {
|
|
77
|
+
scene: builtScene,
|
|
78
|
+
diagnostics: props.diagnostics,
|
|
79
|
+
pixelRatio: props.pixelRatio,
|
|
80
|
+
autoStart: props.autoStart,
|
|
81
|
+
resize: props.resize
|
|
82
|
+
});
|
|
83
|
+
props.onReady?.(app);
|
|
84
|
+
return () => app.dispose();
|
|
85
|
+
}, [builtScene, props.autoStart, props.diagnostics, props.onReady, props.pixelRatio, props.resize]);
|
|
86
|
+
return createElement("canvas", {
|
|
87
|
+
ref,
|
|
88
|
+
className: props.className,
|
|
89
|
+
style: {
|
|
90
|
+
width: "100%",
|
|
91
|
+
height: "100%",
|
|
92
|
+
display: "block",
|
|
93
|
+
...(props.style ?? {})
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export function Scene(_props: SceneProps): null {
|
|
99
|
+
return null;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export function Model(_props: ModelProps): null {
|
|
103
|
+
return null;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
export function Camera(_props: CameraProps): null {
|
|
107
|
+
return null;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export function Lights(_props: LightsProps): null {
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
export function Effect(_props: EffectProps): null {
|
|
115
|
+
return null;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export function buildSceneFromChildren(children: ReactNode): AuraSceneBuilder {
|
|
119
|
+
let builder = scene();
|
|
120
|
+
const sceneElement = findFirstElementOfType(children, Scene);
|
|
121
|
+
const sceneProps = (sceneElement?.props ?? {}) as SceneProps;
|
|
122
|
+
if (sceneProps.background) builder = builder.background(sceneProps.background);
|
|
123
|
+
if (sceneProps.camera) builder = builder.camera(sceneProps.camera);
|
|
124
|
+
if (sceneProps.timeline) builder = builder.timeline(sceneProps.timeline);
|
|
125
|
+
if (sceneProps.diagnostics) builder = builder.diagnostics(sceneProps.diagnostics);
|
|
126
|
+
const content = sceneElement ? sceneProps.children : children;
|
|
127
|
+
Children.forEach(content, (child) => {
|
|
128
|
+
if (!isValidElement(child)) return;
|
|
129
|
+
if (child.type === Model) {
|
|
130
|
+
const props = child.props as ModelProps;
|
|
131
|
+
builder.add(model(props.asset, props));
|
|
132
|
+
}
|
|
133
|
+
if (child.type === Camera) {
|
|
134
|
+
const props = child.props as CameraProps;
|
|
135
|
+
const mode = props.mode ?? "orbit";
|
|
136
|
+
if (mode === "dolly" && props.from && props.to) builder.camera(camera.dolly({ ...props, from: props.from, to: props.to }));
|
|
137
|
+
else if (mode === "follow" && props.targetNode) builder.camera(camera.follow({ ...props, targetNode: props.targetNode }));
|
|
138
|
+
else if (mode === "perspective") builder.camera(camera.perspective(props));
|
|
139
|
+
else builder.camera(camera.orbit(props));
|
|
140
|
+
}
|
|
141
|
+
if (child.type === Lights) {
|
|
142
|
+
const props = child.props as LightsProps;
|
|
143
|
+
if (props.preset === "studio" || !props.type || props.type === "studio") builder.add(lights.studio({ intensity: props.intensity }));
|
|
144
|
+
else if (props.type === "ambient") builder.add(lights.ambient(props));
|
|
145
|
+
else if (props.type === "directional") builder.add(lights.directional(props));
|
|
146
|
+
else builder.add(lights.point(props));
|
|
147
|
+
}
|
|
148
|
+
if (child.type === Effect) {
|
|
149
|
+
const props = child.props as EffectProps;
|
|
150
|
+
if (props.type === "fog") builder.add(effects.fog(props));
|
|
151
|
+
if (props.type === "bloom") builder.add(effects.bloom(props));
|
|
152
|
+
if (props.type === "rain") builder.add(effects.rain(props));
|
|
153
|
+
}
|
|
154
|
+
});
|
|
155
|
+
return builder;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
export function productViewerScene(asset: AuraAssetRef<"model">, material?: AuraMaterialSpec): AuraSceneBuilder {
|
|
159
|
+
return scene()
|
|
160
|
+
.background("#08111f")
|
|
161
|
+
.add(model(asset, { material }).position(0, 0, 0).scale(1))
|
|
162
|
+
.add(lights.studio({ intensity: 1.1 }))
|
|
163
|
+
.camera(camera.orbit({ distance: 4 }))
|
|
164
|
+
.diagnostics(true);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
function findFirstElementOfType(children: ReactNode, type: (props: never) => null): ReactElement | undefined {
|
|
168
|
+
let found: ReactElement | undefined;
|
|
169
|
+
Children.forEach(children, (child) => {
|
|
170
|
+
if (!found && isValidElement(child) && child.type === type) found = child;
|
|
171
|
+
});
|
|
172
|
+
return found;
|
|
173
|
+
}
|