/
index.ios.js
93 lines (78 loc) · 2.33 KB
/
index.ios.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import ARScene, { ARBoxNode, ARTextNode, ARNode } from 'react-arkit';
export default class ReactArkitExample extends Component {
constructor (props) {
super(props);
this.state = { planes: {} };
this.newPlaneDetected = this.newPlaneDetected.bind(this);
this.planedUpdated = this.planedUpdated.bind(this);
}
newPlaneDetected ({id, alignment, node, center, extent}) {
let { planes } = this.state;
planes[id] = { id, node, center };
this.setState({ planes });
}
planedUpdated ({id, alignment, node, center, extent}) {
let { planes } = this.state;
planes[id] = { id, node, center };
this.setState({ planes });
}
renderBoxes () {
return Object.values(this.state.planes).map((plane) => {
return plane.node.y < -0.5
? <ARNode
key={plane.id}
size={{ scale: 0.01 }}
modelAssetPath={'CustomModels.scnassets/flower.dae:vijverplant'}
geoposition={{x: plane.node.x,
y: plane.node.y + 0.05,
z: plane.node.z}}/>
: <ARNode
key={plane.id}
size={{ scale: 0.02 }}
modelAssetPath={'CustomModels.scnassets/BarsikCat.dae:cat'}
geoposition={{x: plane.node.x,
y: plane.node.y + 0.07,
z: plane.node.z}}/>
});
}
render () {
return (
<View style={styles.container}>
<ARScene style={styles.scene}
debugEnabled
onPlaneDetected={this.newPlaneDetected}
onPlaneUpdated={this.planedUpdated}>
<ARTextNode
text={'Look at the floor'}
color='#FF0'
size={{ fontSize: 0.15, depth: 0.1 }}
geoposition={{x: 0, y: 0.01, z:-1.5}}/>
{ this.renderBoxes() }
</ARScene>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF'
},
scene: {
flex: 1,
backgroundColor: '#00FF00'
}
});
AppRegistry.registerComponent('ReactArkitExample', () => ReactArkitExample);