Added DayDream controls (WIP)

devpaul · Oct 11, 2017 · 3e4a7f7 · 3e4a7f7
1 parent 1cd6251
commit 3e4a7f7
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 27 deletions.
diff --git a/src/App.ts b/src/App.ts
@@ -27,7 +27,7 @@ export default class App extends WidgetBase<WidgetProperties> {
 			w(Outside, {
 				monster: this.monster,
 				monsterDistance: this.distance
-			})
+			}),
 		]);
 	}
 }
diff --git a/src/definitions/heightComponent.ts → src/components/heightComponent.ts b/src/definitions/heightComponent.ts → src/components/heightComponent.ts
@@ -1,6 +1,7 @@
 import { Box3 } from 'three';
+const AFrame = require('aframe');
 
-export const ObjHeight = 'objheight';
+export const objHeight = 'objheight';
 
 export const enum Event {
 	HeightScale = 'heightScale'
@@ -9,8 +10,8 @@ export const enum Event {
 // Avoids triggering a zero-determinant which makes object3D matrix non-invertible.
 const zeroScale = 0.00001;
 
-export function register() {
-	AFRAME.registerComponent(ObjHeight, {
+export default function register() {
+	AFrame.registerComponent(objHeight, {
 		schema: {
 			type: 'int',
 			'default': '0'

diff --git a/src/components/trackPosition.ts b/src/components/trackPosition.ts
@@ -0,0 +1,39 @@
+const AFrame = require('aframe');
+
+export const trackPosition = 'track-position';
+
+interface TrackPositionProperties extends AFrame.Component {
+	controllerBody: THREE.Object3D;
+}
+
+export default function register() {
+	AFrame.registerComponent(trackPosition, {
+		schema: {
+			type: 'string'
+		},
+
+		init() {
+
+		},
+
+		update() {
+			const targetName = this.data;
+			const target = document.querySelector(targetName);
+			// TODO used with Daydream controller models
+			this.controllerBody = target.getObjectByName('Body_Body_Cylinder');
+		},
+
+		tick(this: TrackPositionProperties) {
+			if (!this.controllerBody) {
+				return;
+			}
+			const controllerObj = this.controllerBody.geometry;
+			this.el!.setAttribute('position', position);
+		},
+
+		getBoundingSphere() {
+
+		}
+	});
+}
+
diff --git a/src/createDerpymonElement.ts b/src/createDerpymonElement.ts
@@ -0,0 +1,19 @@
+import { CustomElementDescriptor } from '@dojo/widget-core/customElements';
+import App from './App';
+import initialize from './initialize';
+
+// Require globals
+require('aframe');
+require('aframe-environment-component');
+
+export default function createDerpymonElement(): CustomElementDescriptor {
+	return {
+		tagName: 'go-derpy',
+		widgetConstructor: App,
+		events: [],
+		properties: [],
+		initialization() {
+			return initialize();
+		}
+	}
+}
diff --git a/src/definitions/initialize.ts b/src/definitions/initialize.ts
diff --git a/src/framework/Controls.ts b/src/framework/Controls.ts
@@ -1,15 +1,24 @@
 import { v } from '@dojo/widget-core/d';
-import { DNode, WidgetProperties } from '@dojo/widget-core/interfaces';
+import { DNode, EventHandler, WidgetProperties } from '@dojo/widget-core/interfaces';
 import { WidgetBase } from '@dojo/widget-core/WidgetBase';
 
-export default class Controls extends WidgetBase<WidgetProperties> {
+export interface ControlsProperties {
+	onActionButtonPressed?: EventHandler,
+	onActionButtonReleased?: EventHandler
+}
+
+function logEvent(name: string) {
+	return (event: Event) => {
+		console.log(name, event);
+	}
+}
+
+export default class Controls extends WidgetBase<ControlsProperties> {
 	protected render(): DNode[] {
 		return [
-			v('a-entity', {
-				'vive-controls': 'hand: left'
-			}),
-			v('a-entity', {
-				'vive-controls': 'hand: right'
+			v('a-entity', <any> {
+				id: 'controls',
+				'daydream-controls': ''
 			})
 		];
 	}

diff --git a/src/index.html b/src/index.html
@@ -2,8 +2,6 @@
 <html>
 <head>
 	<title>Derpymon Go</title>
-	<script src="../node_modules/aframe/dist/aframe-master.js"></script>
-	<script src="../node_modules/aframe-environment-component/dist/aframe-environment-component.js"></script>
 </head>
 <body>
 	<go-derpy></go-derpy>

diff --git a/src/initialize.ts b/src/initialize.ts
@@ -0,0 +1,16 @@
+import { initialize as initCharacters } from './definitions/characters';
+import registerHeightComponent from './components/heightComponent';
+import registerTrackPosition from './components/trackPosition';
+
+let initialized = false;
+
+export default function initialize() {
+	if (initialized) {
+		console.error('Application already initialized');
+	}
+
+	initCharacters();
+	registerHeightComponent();
+	registerTrackPosition();
+	initialized = true;
+}
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,10 @@
 import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
 import App from './App';
-import initialize from './definitions/initialize';
+import initialize from './initialize';
+
+// Require globals
+require('aframe');
+require('aframe-environment-component');
 
 const root = document.querySelector('go-derpy') || undefined;
 

diff --git a/src/stages/Outside.ts b/src/stages/Outside.ts
@@ -5,25 +5,32 @@ import { Container } from '@dojo/widget-core/Container';
 import ObjModel from '../framework/ObjModel';
 import { MonsterName } from '../definitions/characters';
 import genericMapper from '../framework/util/genericMapper';
-import { ObjHeight } from '../definitions/heightComponent';
+import { objHeight } from '../components/heightComponent';
+import { trackPosition } from '../components/trackPosition';
 
 export interface OutsideProperties extends WidgetProperties {
 	monster: MonsterName;
 	monsterDistance?: number;
 }
 
 export default class Outside extends WidgetBase<OutsideProperties> {
-	protected render(): DNode {
+	protected render() {
 		const { monster, monsterDistance = 5 } = this.properties;
 		const Derpymon = Container(ObjModel, monster, genericMapper());
 
-		return v('a-entity', {
+		return [
+			v('a-entity', {
 			environment: 'preset: forest'
-		}, [
+			}),
 			w(Derpymon, {
 				position: `0 0 -${ monsterDistance }`,
-				[ObjHeight]: '2'
+				[objHeight]: '2'
+			}),
+			v('a-sphere', {
+				[trackPosition]: '#controls',
+				radius: '0.15',
+				color: 'red'
 			})
-		]);
+		];
 	}
 }