basic touchable 3d space working

.eslintrc

@@ -1,28 +1,53 @@
 {
-  "extends": ["standard", "standard-react"],
+  "extends": [
+    "standard",
+    "standard-react",
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
   "env": {
     "es6": true
   },
-  "plugins": ["react"],
+  "plugins": [
+    "react"
+  ],
   "parserOptions": {
     "sourceType": "module"
   },
   "rules": {
     // Indent with 4 spaces
-    "indent": [2, "tab"],
-    "react/jsx-indent": [2, "tab"],
-    "react/jsx-indent-props": [2, "tab"],
-
+    "indent": [
+      2,
+      "tab"
+    ],
+    "react/jsx-indent": [
+      2,
+      "tab"
+    ],
+    "react/jsx-indent-props": [
+      2,
+      "tab"
+    ],
     //allow tabs
     "no-tabs": "off",
-
     // don't force es6 functions to include space before paren
     "space-before-function-paren": 0,
-
     // allow specifying true explicitly for boolean props
     "react/jsx-boolean-value": 0,
-
     // disable warnings when using setState in componentDidUpdate
-    "react/no-did-update-set-state": "off"
+    "react/no-did-update-set-state": "off",
+    "react/jsx-tag-spacing": [
+      "error",
+      {
+        "beforeSelfClosing": "allow"
+      }
+    ],
+    "react/jsx-handler-names": [
+      "warn",
+      {
+        "eventHandlerPrefix": "on|handle",
+        "eventHandlerPropPrefix": "on"
+      }
+    ]
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "main": "./src/Main.js",
   "scripts": {
-    "start": "expo start",
+    "start": "expo start --tunnel",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
@@ -27,6 +27,7 @@
     "expo-device": "~2.0.0",
     "expo-font": "~8.0.0",
     "expo-gl": "~8.0.0",
+    "expo-graphics": "^1.1.0",
     "expo-permissions": "~8.0.0",
     "expo-three": "^5.3.0",
     "expo-web-browser": "~8.0.0",

src/components/MapBuilder.js

@@ -1,42 +1,76 @@
 import React from 'react'
-import { GLView } from 'expo-gl'
+import { GraphicsView } from 'expo-graphics'
 import ExpoTHREE, { THREE } from 'expo-three'
+import TouchControls from './TouchControls'
 
-export default function MapBuilder() {
-	const onContextCreate = async gl => {
-		const scene = new THREE.Scene()
-		const camera = new THREE.PerspectiveCamera(
-			75,
-			gl.drawingBufferWidth / gl.drawingBufferHeight,
-			0.1,
-			1000
-		)
-		const renderer = new ExpoTHREE.Renderer({ gl })
-		renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight)
+export default class MapBuilder extends React.Component {
+	constructor(props) {
+		super(props)
+		this.state = {
+			speed: 1,
+			cube: null,
+			touch: {},
+			camera: null
+		}
+		this.onContextCreate = this.onContextCreate.bind(this)
+		this.onRender = this.onRender.bind(this)
+		this.reposition = this.reposition.bind(this)
+	}
 
+	onContextCreate({ gl, width, height, scale: pixelRatio }) {
+		this.renderer = new ExpoTHREE.Renderer({
+			gl, pixelRatio, width, height
+		})
+		this.scene = new THREE.Scene()
+		this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
+		this.camera.position.z = 5
+		this.setState({ camera: this.camera })
 		const geometry = new THREE.BoxGeometry(1, 1, 1)
-		const material = new THREE.MeshNormalMaterial({ wireframe: true })
-		const cube = new THREE.Mesh(geometry, material)
-		scene.add(cube)
-
-		camera.position.y = 0
-		camera.position.x = 0
-		camera.position.z = 5
-
-		const animate = () => {
-			window.requestAnimationFrame(animate)
-			cube.rotation.x += 0.02
-			cube.rotation.y += 0.02
-			renderer.render(scene, camera)
-			gl.endFrameEXP()
-		}
-		animate()
+		const material = new THREE.MeshPhongMaterial({ wireframe: true })
+
+		this.cube = new THREE.Mesh(geometry, material)
+
+		this.setState({ cube: this.cube })
+
+		this.scene.add(this.cube)
+	}
+
+	onRender(delta) {
+		const cube = this.state.cube
+		cube.rotation.x += this.state.speed * delta
+		cube.rotation.y += 2 * delta
+		this.renderer.render(this.scene, this.camera)
+	}
+
+	reposition([x, y]) {
+		this.raycaster = new THREE.Raycaster()
+		this.raycaster.setFromCamera(
+			{ x: x, y: y },
+			this.state.camera
+		)
+
+		const dist = this.state.cube.position
+			.clone()
+			.sub(this.state.camera.position)
+			.length()
+
+		this.raycaster.ray.at(dist, this.state.cube.position)
 	}
 
-	return (
-		<GLView
-			style={{ flex: 1, backgroundColor: 'black' }}
-			onContextCreate={onContextCreate}
-		/>
-	)
+	render() {
+		return (
+			<TouchControls
+				//increaseSpeed={() => this.setState({ speed: this.state.speed + 0.5 })}
+				velocityUpdate={(e) => this.setState({
+					touch: {
+						...this.state.touch,
+						velocity: e
+					}
+				})}
+				touchPosition={e => this.reposition(e)}
+			>
+				<GraphicsView onContextCreate={this.onContextCreate} onRender={this.onRender}/>
+			</TouchControls>
+		)
+	}
 }

src/components/TouchControls.js

@@ -1,21 +1,87 @@
 import React from 'react'
-import { View } from 'react-native'
 import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+class TouchControls extends React.Component {
+	constructor(props) {
+		super(props)
+		this.state = {
+			pressed: false,
+			touchStart: null,
+			speed: 0.0
+		}
+	}
+
+	onRelease({ nativeEvent }) {
+		if (this.state.pressed) {
+			this.setState({ pressed: false })
+		}
+		// get width of invisible rectangle
+		const width =
+			(nativeEvent.locationX > this.state.touchStart.posX
+				? nativeEvent.locationX
+				: this.state.touchStart.posX) -
+			(nativeEvent.locationX < this.state.touchStart.posX
+				? nativeEvent.locationX
+				: this.state.touchStart.posX)
+		// get length of invisible rectangle
+		const length =
+			(nativeEvent.locationY > this.state.touchStart.posY
+				? nativeEvent.locationY
+				: this.state.touchStart.posY) -
+			(nativeEvent.locationY < this.state.touchStart.posY
+				? nativeEvent.locationY
+				: this.state.touchStart.posY)
+		// get diagonal length of the invisible rectangle
+		const lineLength = Math.sqrt(width * width + (length + length))
+		const timeTaken = (nativeEvent.timestamp - this.state.touchStart.timestamp) / 1000
+		const initialSpeed = lineLength / timeTaken
+		this.setState({ speed: initialSpeed })
+
+		this.props.velocityUpdate(initialSpeed)
+	}
+
+	onMove({ nativeEvent }) {
+		if (!this.state.pressed) {
+			this.setState({ pressed: true })
+			this.setState({
+				touchStart: {
+					posX: nativeEvent.locationX,
+					posY: nativeEvent.locationY,
+					timestamp: nativeEvent.timestamp
+				}
+			})
+			// Alert.alert('xx', [nativeEvent.locationX, nativeEvent.locationY()])
+			this.props.touchPosition([nativeEvent.locationX, nativeEvent.locationY])
+		}
+	}
+
+	render() {
+		return (
 
-function TouchControls(props) {
-	return (
-		<View
-			onStartShouldSetResponder={() => {
-				console.log('xx')
-			}}
-		>
-			{props.children}
-		</View>
-	)
+			<View
+				style={[{ flex: 1 }, this.props.style]}
+				// onStartShouldSetResponder={() => {
+				// 	props.increaseSpeed()
+				// }}
+				onResponderMove={e => this.onMove(e)}
+				onResponderRelease={e => this.onRelease(e)}
+			>
+				{this.props.children}
+			</View>
+		)
+	}
 }
 
 TouchControls.propTypes = {
-	children: PropTypes.arrayOf(PropTypes.object)
+	children: PropTypes.oneOfType([
+		PropTypes.arrayOf(PropTypes.object),
+		PropTypes.object
+	]),
+	style: PropTypes.object,
+	// increaseSpeed: PropTypes.func,
+	touchPosition: PropTypes.func,
+	velocityUpdate: PropTypes.func
 }
 
 export default TouchControls

src/components/index.js

@@ -0,0 +1,2 @@
+export { default as Toolbox } from './Toolbox'
+export { default as MapBuilder } from './MapBuilder'

src/constants/Colors.js

@@ -1,14 +1,14 @@
-const tintColor = '#2f95dc';
+const tintColor = '#2f95dc'
 
 export default {
-  tintColor,
-  tabIconDefault: '#ccc',
-  tabIconSelected: tintColor,
-  tabBar: '#fefefe',
-  errorBackground: 'red',
-  errorText: '#fff',
-  warningBackground: '#EAEB5E',
-  warningText: '#666804',
-  noticeBackground: tintColor,
-  noticeText: '#fff',
-};
+	tintColor,
+	tabIconDefault: '#ccc',
+	tabIconSelected: tintColor,
+	tabBar: '#fefefe',
+	errorBackground: 'red',
+	errorText: '#fff',
+	warningBackground: '#EAEB5E',
+	warningText: '#666804',
+	noticeBackground: tintColor,
+	noticeText: '#fff'
+}

src/constants/Layout.js

@@ -1,12 +1,12 @@
-import { Dimensions } from 'react-native';
+import { Dimensions } from 'react-native'
 
-const width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
+const width = Dimensions.get('window').width
+const height = Dimensions.get('window').height
 
 export default {
-  window: {
-    width,
-    height,
-  },
-  isSmallDevice: width < 375,
-};
+	window: {
+		width,
+		height
+	},
+	isSmallDevice: width < 375
+}