Render AnchorCubes

Nikolay Grozdanov · Nikolay Grozdanov · commit 09f7766318fa · 2019-11-25T12:10:27.000-05:00
diff --git a/App.js b/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text } from 'magic-script-components';
+import AnchorCube from './anchor-cube.js';
 
 import { authorize } from 'react-native-app-auth';
 import { NativeModules } from 'react-native';
@@ -118,7 +119,8 @@ class MyApp extends React.Component {
       <View name='main-view'>
         { scenes.length === 0
           ? (<Text text='Initializing ...' />)
-          : scenes.map( scene => <Text key={scene.uuid} anchorUuid={scene.uuid} textSize={0.1} textColor={[1, 0, 0, 1]} text={scene.pcfId} />)
+          // : scenes.map( scene => <Text key={scene.uuid} anchorUuid={scene.uuid} textSize={0.1} textColor={[1, 0, 0, 1]} text={scene.pcfId} />)
+          : scenes.map( scene => <AnchorCube key={scene.uuid} uuid={scene.uuid} id={scene.pcfId} />)
         }
       </View>
     );
diff --git a/anchor-cube.js b/anchor-cube.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, Line, Text } from 'magic-script-components';
+
+const red = [1, 0, 0, 1];
+const green = [0, 1, 0, 1];
+const blue = [0, 0, 1, 1];
+const vecStart = [0, 0, 0];
+const length = 0.25;
+
+// props:
+// - id
+// - uuid
+
+export default function (props) {
+  const uuid = props.uuid;
+  const vecX = [vecStart, [length, 0, 0]];
+  const vecY = [vecStart, [0, length, 0]];
+  const vecZ = [vecStart, [0, 0, length]];
+
+  return (
+    <View anchorUuid={uuid}>
+      <Line points={vecX} color={red} />
+      <Line points={vecY} color={green} />
+      <Line points={vecZ} color={blue} />
+      <Text textSize={0.02} text={props.id} textColor={red}/>
+    </View>
+  );
+}
