diff --git a/src/assets/hud/action_button.9.png b/src/assets/hud/action_button.9.png new file mode 100644 index 0000000000000000000000000000000000000000..69af3b472d380dbea1e3d1df7ecd87a176638084 Binary files /dev/null and b/src/assets/hud/action_button.9.png differ diff --git a/src/components/set-yxz-order.js b/src/components/set-yxz-order.js new file mode 100644 index 0000000000000000000000000000000000000000..df03d62978f3fef2934499478d4c9f532f4f9fe2 --- /dev/null +++ b/src/components/set-yxz-order.js @@ -0,0 +1,5 @@ +AFRAME.registerComponent("set-yxz-order", { + init: function() { + this.el.object3D.rotation.order = "YXZ"; + } +}); diff --git a/src/hub.html b/src/hub.html index 6e50fc6165597981b5158e81de80ba400185ab59..991212013b04ae0f15a6fc413eebb6bd04ca4697 100644 --- a/src/hub.html +++ b/src/hub.html @@ -45,6 +45,7 @@ > <a-assets> + <img id="action-button" crossorigin="anonymous" src="./assets/hud/action_button.9.png"> <img id="tooltip" crossorigin="anonymous" src="./assets/hud/tooltip.9.png"> <img id="mute-off" crossorigin="anonymous" src="./assets/hud/mute_off.png"> <img id="mute-off-hover" crossorigin="anonymous" src="./assets/hud/mute_off-hover.png"> @@ -156,15 +157,17 @@ hoverable auto-scale-cannon-physics-body sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;" - position-at-box-shape-border="target:.delete-button" + position-at-box-shape-border="target:.action-buttons" destroy-at-extreme-distances + set-yxz-order activatable__increase-scale="buttonStartEvents: scroll_right; buttonEndEvents: horizontal_scroll_release; activatedState: scaleUp;" activatable__decrease-scale="buttonStartEvents: scroll_left; buttonEndEvents: horizontal_scroll_release; activatedState: scaleDown;" > - <!-- HACK: rotation component above is required for its side effect of setting YXZ order --> - <a-entity class="delete-button" visible-while-frozen> - <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity> - <a-entity text=" value:Remove; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity> + <a-entity class="action-buttons" visible-while-frozen> + <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0.125 0.01"> </a-entity> + <a-entity text=" value:Pin; width:1.75; align:center;" text-raycast-hack position="0 0.125 0.02"></a-entity> + <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 -0.125 0.01"> </a-entity> + <a-entity text=" value:Remove; width:1.75; align:center;" text-raycast-hack position="0 -0.125 0.02"></a-entity> </a-entity> </a-entity> </template> @@ -249,17 +252,17 @@ haptic:#player-right-controller; textHoverColor: #fff; textColor: #fff; - backgroundHoverColor: #ea4b54; + backgroundHoverColor: #ff3464; backgroundColor: #fff;" slice9=" width: 0.45; height: 0.2; - left: 53; - top: 53; - right: 10; - bottom: 10; - opacity: 1.3; - src: #tooltip" + left: 64; + top: 64; + right: 66; + bottom: 66; + opacity: 1.0; + src: #action-button" ></a-mixin> <a-mixin id="controller-super-hands" diff --git a/src/hub.js b/src/hub.js index f335d5cd35d9fece1731c4c4db775c71822f85f6..03b191d39c63e4d9cf72d18d8def26b413dd404e 100644 --- a/src/hub.js +++ b/src/hub.js @@ -113,6 +113,7 @@ import "./components/networked-counter"; import "./components/event-repeater"; import "./components/controls-shape-offset"; import "./components/grabbable-toggle"; +import "./components/set-yxz-order"; import "./components/cardboard-controls"; @@ -244,12 +245,12 @@ async function handleHubChannelJoined(entryManager, hubChannel, data) { console.log(`Scene URL: ${sceneUrl}`); const environmentScene = document.querySelector("#environment-scene"); - const objectsScene = document.querySelector("#objects-scene"); - const objectsUrl = - "https://farspark-dev.reticulum.io/0/raw/0/0/0/0/aHR0cHM6Ly91cGxvYWRzLWRldi5yZXRpY3VsdW0uaW8vZmlsZXMvZDI2ZTRiOWMtNmU4My00ZTFiLTk0NWEtOWViMTE3MTQ4ZjUwLmdsdGY_dG9rZW49ODk1NjI5NzQzNjQzYjljOGVhM2I2MTA2OTY4MzAxYTU"; - const objectsEl = document.createElement("a-entity"); - objectsEl.setAttribute("gltf-model-plus", { src: objectsUrl, useCache: false, inflate: true }); - objectsScene.appendChild(objectsEl); + //const objectsScene = document.querySelector("#objects-scene"); + //const objectsUrl = + // "https://farspark-dev.reticulum.io/0/raw/0/0/0/0/aHR0cHM6Ly91cGxvYWRzLWRldi5yZXRpY3VsdW0uaW8vZmlsZXMvZDI2ZTRiOWMtNmU4My00ZTFiLTk0NWEtOWViMTE3MTQ4ZjUwLmdsdGY_dG9rZW49ODk1NjI5NzQzNjQzYjljOGVhM2I2MTA2OTY4MzAxYTU"; + //const objectsEl = document.createElement("a-entity"); + //objectsEl.setAttribute("gltf-model-plus", { src: objectsUrl, useCache: false, inflate: true }); + //objectsScene.appendChild(objectsEl); if (glbAsset || hasExtension) { const gltfEl = document.createElement("a-entity");