From 13038efbe90ca496344ee1982062a8b8c1eedd57 Mon Sep 17 00:00:00 2001
From: Kevin Lee <kevin@infinite-lee.com>
Date: Fri, 13 Jul 2018 14:13:33 -0700
Subject: [PATCH] Adding pen interactable
---
src/components/tools/pen.js | 29 +++++++++++++++++++++--------
src/hub.html | 30 +++++++++++++++++++++++++++---
2 files changed, 48 insertions(+), 11 deletions(-)
diff --git a/src/components/tools/pen.js b/src/components/tools/pen.js
index 57c2d13ef..10c14058d 100644
--- a/src/components/tools/pen.js
+++ b/src/components/tools/pen.js
@@ -13,7 +13,7 @@ AFRAME.registerComponent("pen", {
minDistanceBetweenPoints: { default: 0.04 },
defaultDirection: { default: { x: 1, y: 0, z: 0 } },
camera: { type: "selector" },
- drawing: { type: "selector" }
+ drawing: { type: "string" }
},
init() {
@@ -34,7 +34,13 @@ AFRAME.registerComponent("pen", {
this.handleDrawingInitialized = this.handleDrawingInitialized.bind(this);
- this.data.drawing.addEventListener("componentinitialized", this.handleDrawingInitialized);
+ this.drawing = document.querySelector(this.data.drawing);
+
+ if (this.drawing.hasLoaded) {
+ this.currentDrawing = this.drawing.components["networked-drawing"];
+ } else {
+ this.drawing.addEventListener("componentinitialized", this.handleDrawingInitialized);
+ }
this.normal = new THREE.Vector3();
@@ -42,15 +48,18 @@ AFRAME.registerComponent("pen", {
},
remove() {
- this.data.drawing.removeEventListener("componentinitialized", this.handleDrawingInitialized);
+ this.drawing.removeEventListener("componentinitialized", this.handleDrawingInitialized);
},
play() {
- document.addEventListener("mousedown", this.onMouseDown);
- document.addEventListener("mouseup", this.onMouseUp);
+ // document.addEventListener("mousedown", this.onMouseDown);
+ // document.addEventListener("mouseup", this.onMouseUp);
- this.el.parentNode.addEventListener("index_down", this.startDraw);
- this.el.parentNode.addEventListener("index_up", this.endDraw);
+ // this.el.parentNode.addEventListener("index_down", this.startDraw);
+ // this.el.parentNode.addEventListener("index_up", this.endDraw);
+
+ this.el.parentNode.addEventListener("drag-start", this.startDraw);
+ this.el.parentNode.addEventListener("drag-end", this.endDraw);
},
pause() {
@@ -59,6 +68,9 @@ AFRAME.registerComponent("pen", {
this.el.parentNode.removeEventListener("index_down", this.startDraw);
this.el.parentNode.removeEventListener("index_up", this.endDraw);
+
+ this.el.parentNode.removeEventListener("drag-start", this.startDraw);
+ this.el.parentNode.removeEventListener("drag-end", this.endDraw);
},
tick(t, dt) {
@@ -105,7 +117,7 @@ AFRAME.registerComponent("pen", {
handleDrawingInitialized(e) {
if (e.detail.name === "networked-drawing") {
- this.currentDrawing = this.data.drawing.components["networked-drawing"];
+ this.currentDrawing = this.drawing.components["networked-drawing"];
}
},
@@ -126,6 +138,7 @@ AFRAME.registerComponent("pen", {
this.el.object3D.getWorldPosition(this.worldPosition);
this.getNormal(this.normal, this.worldPosition, this.direction);
const color = "#" + Math.floor(Math.random() * 16777215).toString(16);
+ this.el.setAttribute("material", { color: color });
this.currentDrawing.startDraw(this.worldPosition, this.direction, this.normal, color);
},
diff --git a/src/hub.html b/src/hub.html
index 86a8be524..51db549c2 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -33,7 +33,7 @@
<a-scene
renderer="antialias: true"
networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;"
- physics="gravity: -6;"
+ physics="gravity: -6; debug: true;"
mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
freeze-controller="toggleEvent: action_freeze"
personal-space-bubble="debug: false;"
@@ -79,6 +79,7 @@
<a-asset-item id="watch-model" response-type="arraybuffer" src="./assets/hud/watch.glb"></a-asset-item>
<a-asset-item id="interactable-duck" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/interactables/Ducky/DuckyMesh-438ff8e022.gltf"></a-asset-item>
+ <a-asset-item id="interactable-pen" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/interactables/DrawingPen/DrawingPen-484ae5682f.gltf"></a-asset-item>
<a-asset-item id="quack" src="./assets/sfx/quack.mp3" response-type="arraybuffer" preload="auto"></a-asset-item>
<a-asset-item id="specialquack" src="./assets/sfx/specialquack.mp3" response-type="arraybuffer" preload="auto"></a-asset-item>
@@ -190,6 +191,22 @@
></a-entity>
</template>
+ <template id="pen-template">
+ <a-entity
+ gltf-model-plus="src: #interactable-pen; inflate: true;"
+ class="interactable"
+ super-networked-interactable="counter: #counter; mass: 1;"
+ body="type: dynamic; shape: none; mass: 1;"
+ grabbable
+ hoverable
+ draggable
+ scale="0.5 0.5 0.5"
+ >
+ <a-sphere scale="1.5, 1.5, 1.5" position="0 -0.18 0" radius="0.02" color="red" pen="camera: #player-camera; drawing: #my-first-drawing;"></a-sphere>
+ </a-entity>
+ </template>
+
+
<template id="drawing-template">
<a-entity
networked-drawing
@@ -202,7 +219,7 @@
colliderEndEvent: collisions; colliderEndEventProperty: clearedEls;
grabStartButtons: hand_grab; grabEndButtons: hand_release;
stretchStartButtons: hand_grab; stretchEndButtons: hand_release;
- dragDropStartButtons: hand_grab; dragDropEndButtons: hand_release;"
+ dragDropStartButtons: index_down; dragDropEndButtons: index_up"
collision-filter="collisionForces: false"
physics-collider
></a-mixin>
@@ -235,7 +252,6 @@
segments-height="9"
segments-width="9"
event-repeater="events: raycaster-intersection, raycaster-intersection-cleared; eventSource: #cursor-controller"
- pen="camera: #player-camera; drawing: #my-first-drawing"
></a-sphere>
<!-- Player Rig -->
@@ -381,6 +397,14 @@
id="my-first-drawing"
networked="template: #drawing-template;"
></a-entity>
+
+ <a-entity
+ gltf-model-plus="src: #interactable-pen"
+ class="interactable"
+ super-spawner="template: #pen-template;"
+ position="2.9 1.2 0"
+ body="mass: 0; type: static; shape: box;"
+ ></a-entity>
</a-scene>
<div id="ui-root"></div>
--
GitLab