Skip to content

Commit a1c3ac8

Browse files
krsbxkrsbx
committed
chore: change component to aframe-react-components
1 parent c7b45d4 commit a1c3ac8

13 files changed

Lines changed: 104 additions & 374 deletions

File tree

‎src/Examples/FaceTracking.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2+
import { Camera, Sphere } from 'aframe-react-component';
23
import FaceTracking from '../components/AR/FaceTracking';
3-
import { Faces, Camera, Scene } from '../components';
4-
import { Sphere } from '../components/Primitive';
4+
import { Faces, Scene } from '../components';
55

66
const ExampleFaceTracking = () => {
77
return (

‎src/Examples/ImageTracking.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { useState } from 'react';
2-
import Assets, { Items } from '../components/Assets';
2+
import { Camera, GLTFModel, Plane, Assets, Item } from 'aframe-react-component';
33
import ImageTracking from '../components/AR/ImageTracking';
4-
import { Camera, Marker, Scene } from '../components';
5-
import { GLTFModel, Plane } from '../components/Primitive';
4+
import { Marker, Scene } from '../components';
65

76
const ExampleImageTracking = () => {
87
const [started, setStarted] = useState(false);
@@ -29,7 +28,7 @@ const ExampleImageTracking = () => {
2928
src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.png"
3029
alt=""
3130
/>
32-
<Items
31+
<Item
3332
id="avatarModel"
3433
src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/softmind/scene.gltf"
3534
/>

‎src/components/Faces.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2+
import { Entity } from 'aframe-react-component';
23
import { Entity as AEntity } from 'aframe';
3-
import { IFaces } from '../utils/interfaces';
4-
import Entity from './Entity';
4+
import { Faces as _Faces } from '../utils/interfaces';
55

6-
const Faces = React.forwardRef<AEntity, IFaces>(({ anchorIndex, ...props }, ref) => (
6+
const Faces = React.forwardRef<AEntity, _Faces>(({ anchorIndex, ...props }, ref) => (
77
<Entity {...props} mindar-face-target={`anchorIndex: ${anchorIndex}`} ref={ref} />
88
));
99

‎src/components/Marker.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2+
import { Entity } from 'aframe-react-component';
23
import { Entity as AEntity } from 'aframe';
3-
import { IMarker } from '../utils/interfaces';
4-
import Entity from './Entity';
4+
import { Marker as _Marker } from '../utils/interfaces';
55

6-
const Marker = React.forwardRef<AEntity, IMarker>(({ targetIndex, ...props }, ref) => (
6+
const Marker = React.forwardRef<AEntity, _Marker>(({ targetIndex, ...props }, ref) => (
77
<Entity {...props} mindar-image-target={`targetIndex: ${targetIndex}`} ref={ref} />
88
));
99

‎src/components/Scene.tsx‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
1-
import _ from 'lodash';
21
import React, { useRef } from 'react';
32
import { Scene as AScene } from 'aframe';
3+
import { Scene as SceneComponent } from 'aframe-react-component';
4+
import { getAframeProps } from 'aframe-react-component/dist/utils/common';
45
import { generateFaceProps, generateImageProps } from '../utils/defaultprops';
5-
import { concatProps, mergeRefs, propsConverter } from '../utils/handler';
6-
import { IScene } from '../utils/interfaces';
6+
import { mergeRefs } from '../utils/common';
7+
import { Scene as _Scene } from '../utils/interfaces';
78

8-
const Scene = React.forwardRef<AScene, IScene>(({ children, ...props }, ref) => {
9+
const Scene = React.forwardRef<AScene, _Scene>(({ children, ...props }, ref) => {
910
const sceneRef = useRef<AScene>(null);
10-
const { vrModeUI, mindARImage, orientationUI, colorSpace, mindARFace, ...rest } = props;
11+
const { mindARImage, mindARFace, ...rest } = props;
1112

12-
return React.createElement(
13-
'a-scene',
14-
{
15-
...propsConverter(_.omit(rest, 'arEvents')),
16-
...{
17-
...(mindARImage && {
18-
'mindar-image': concatProps(generateImageProps(mindARImage)),
19-
}),
20-
...(mindARFace && {
21-
'mindar-face': concatProps(generateFaceProps(mindARFace)),
22-
}),
23-
...(colorSpace && { 'color-space': colorSpace }),
24-
'vr-mode-ui': `enabled: ${vrModeUI ?? false}`,
25-
'device-orientation-permission-ui': `enabled: ${orientationUI ?? false}`,
26-
ref: mergeRefs(sceneRef, ref),
27-
},
28-
},
29-
children
13+
return (
14+
<SceneComponent
15+
{...rest}
16+
{...(mindARImage && {
17+
'mindar-image': getAframeProps(generateImageProps(mindARImage)),
18+
})}
19+
{...(mindARFace && {
20+
'mindar-face': getAframeProps(generateFaceProps(mindARFace)),
21+
})}
22+
ref={mergeRefs(sceneRef, ref)}
23+
>
24+
{children}
25+
</SceneComponent>
3026
);
3127
});
3228

‎src/components/index.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import Camera from './Camera';
2-
import Entity from './Entity';
31
import Faces from './Faces';
42
import Marker from './Marker';
53
import Scene from './Scene';
6-
import Text from './Text';
74

8-
export { Camera, Entity, Faces, Marker, Scene, Text };
5+
export { Faces, Marker, Scene };

‎src/index.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Scene, Faces, Marker } from './components';
2+
import FaceTracking from './components/AR/FaceTracking';
3+
import ImageTracking from './components/AR/ImageTracking';
4+
5+
const Components = {
6+
Faces,
7+
Marker,
8+
Scene,
9+
};
10+
11+
const MindAR = {
12+
FaceTracking,
13+
ImageTracking,
14+
Components,
15+
};
16+
17+
export { FaceTracking, ImageTracking, Components as MindAR };
18+
19+
export default MindAR;

‎src/main.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import App from './App';
4+
import './index.css';
5+
6+
ReactDOM.createRoot(document.getElementById('root')!).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>
10+
);

‎src/utils/common.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
3+
export const mergeRefs = (...refs: any[]) => {
4+
const filteredRefs = refs.filter(Boolean);
5+
6+
if (!filteredRefs.length) return null;
7+
8+
if (filteredRefs.length === 0) return filteredRefs[0];
9+
10+
return (inst: any) => {
11+
for (const ref of filteredRefs) {
12+
if (typeof ref === 'function') {
13+
ref(inst);
14+
} else if (ref) {
15+
ref.current = inst;
16+
}
17+
}
18+
};
19+
};

‎src/utils/constant.ts‎

Lines changed: 0 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,3 @@
1-
export const ANIMATION_PROPERTIES = [
2-
'property',
3-
'isRawProperty',
4-
'from',
5-
'to',
6-
'type',
7-
'delay',
8-
'dir',
9-
'dur',
10-
'easing',
11-
'elasticity',
12-
'loop',
13-
'round',
14-
'startEvents',
15-
'pauseEvents',
16-
'resumeEvents',
17-
'autoplay',
18-
'enabled',
19-
] as const;
20-
21-
export const ANIMATION_EASING = {
22-
EASE_IN_QUAD: 'easeInQuad',
23-
EASE_OUT_QUAD: 'easeOutQuad',
24-
EASE_IN_OUT_QUAD: 'easeInOutQuad',
25-
EASE_IN_CUBIC: 'easeInCubic',
26-
EASE_OUT_CUBIC: 'easeOutCubic',
27-
EASE_IN_OUT_CUBIC: 'easeInOutCubic',
28-
EASE_IN_QUART: 'easeInQuart',
29-
EASE_OUT_QUART: 'easeOutQuart',
30-
EASE_IN_OUT_QUART: 'easeInOutQuart',
31-
EASE_IN_QUINT: 'easeInQuint',
32-
EASE_OUT_QUINT: 'easeOutQuint',
33-
EASE_IN_OUT_QUINT: 'easeInOutQuint',
34-
EASE_IN_SINE: 'easeInSine',
35-
EASE_OUT_SINE: 'easeOutSine',
36-
EASE_IN_OUT_SINE: 'easeInOutSine',
37-
EASE_IN_EXPO: 'easeInExpo',
38-
EASE_OUT_EXPO: 'easeOutExpo',
39-
EASE_IN_OUT_EXPO: 'easeInOutExpo',
40-
EASE_IN_CIRC: 'easeInCirc',
41-
EASE_OUT_CIRC: 'easeOutCirc',
42-
EASE_IN_OUT_CIRC: 'easeInOutCirc',
43-
EASE_IN_BACK: 'easeInBack',
44-
EASE_OUT_BACK: 'easeOutBack',
45-
EASE_IN_OUT_BACK: 'easeInOutBack',
46-
EASE_IN_ELASTIC: 'easeInElastic',
47-
EASE_OUT_ELASTIC: 'easeOutElastic',
48-
EASE_IN_OUT_ELASTIC: 'easeInOutElastic',
49-
LINEAR: 'linear',
50-
} as const;
51-
52-
export const PRIMITIVE_TYPES = {
53-
BOX: 'a-box',
54-
CIRCLE: 'a-circle',
55-
CONE: 'a-cone',
56-
CYLINDER: 'a-cylinder',
57-
GLTF_MODEL: 'a-gltf-model',
58-
IMAGE: 'a-image',
59-
PLANE: 'a-plane',
60-
SPHERE: 'a-sphere',
61-
ENTITY: 'a-entity',
62-
} as const;
63-
641
export const COMPILER_STATE = {
652
IDLE: 'IDLE',
663
COMPILING: 'COMPILING',

0 commit comments

Comments
 (0)