aframe

I'm working on an A-Frame VR project and having issues getting video playback on the a-videophere element. The guidelines I've followed: - Place playsinline or webkit-playsinline inside of video asset and include meta tag in head. - Load video source during window load, then use a button to start the playback. - I'm aware of the autoplay issues for video playing in mobile. I've looked around all over stack overflow to find solutions, the latest one I tried is here , so please don't flag me for duplicate question. The JS in this question is even a modification of that other question. Before you

I'm creating a VR Editor using AFRAME... I need to create an event when the user clicks on an element by mouse and to do deferent action when clicking by Aframe camera cursor. I found the <a-scene cursor="rayOrigin: mouse"> but this would do the same click event on both mouse and cursor click. is that possible in AFRAME? Discriminate by the cursor element: AFRAME.registerComponent('on-click', { init: function () { var self = this; this.el.addEventListener('click', function (evt) { if (self.el.sceneEl === evt.detail.cursorEl) { console.log("MOUSE"); } else { console.log("CURSOR"); } }); } });

I am attempting to use argon.js server side so that I can convert lla coordinates to a predefined reference frame. I'm not rendering any graphics of course, I'm just using it to convert values. See SO question Using Geo-coordintes Instead of Cartesian to Draw in Argon and A-Frame for details. Per that thread, I am trying to create a cesium entity for a fixed coordinate which I will later use to create other entities relative to it. When I do, everything runs until I get to the last line of the program var gtrefEntityPose = app.context.getEntityPose(gtrefEntity); where I receive Error: A frame

I am trying to make an app which adds models from google poly in GLTF format. I had the issue of some models being extremely large when added on the scene which I solved by computing their size with bounding box max and min values and setting the scale amount. Now after adding the objects to the scene when I open the inspector and drag to scale objects, even with a small amount of drag the objects becomes very large. If there is any way to reset the scale value of loaded objects so that default value can be the value which I computed and this can also solve the drag to scale issue. Note: The

I'm trying to build a hotspot editor for 360 images within A-Frame. The idea is that you could draw on an equirectangular panorama and then this tool would convert the shapes into planes with THREE.ShapeGeometry. I can get X/Y coordinates for each shape's nodes from a JS vector editor and the planes rendered in A-Frame. However, I'm having problems getting them positioned correctly atop the skybox. I know I need to do some kind of equirectangular projection but am unsure how to approach that in this context. Any ideas? Screenshot of vector editor to show what I mean It’s not clear how you want

Does anyone know how to create a button in aframe One way to create a button with A-Frame would be to use the <a-box> primitive combined with a cursor. The following is a simple demo: <a-scene> <a-entity position="0 .6 4"> <a-camera> <a-entity id="mycursor" cursor="fuse: true; fuseTimeout: 500; max-distance: 30;" position="0 0 -5" geometry="primitive: ring" material="color: blue; shader: flat"> </a-entity> </a-camera> </a-entity> <!-- "button" --> <a-entity id="refresh-button" geometry="primitive: box" material="color: red" position="0 0 -2"></a> </a-scene> <script> document.querySelector('

I'm trying to use Aframe in my angular 2 project. I imported the library in my index.html but I still can't use the aframe directive, for example: <a-scene> <a-box color="red"></a-box> </a-scene> Throws the error: Template parse errors: 'a-box' is not a known element: 1. If 'a-box' is an Angular component, then verify that it is part of this module. How I can import such library to my angular 2 project and use it's directives? I fixed doing this: I Try adding: import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; to app.module.ts then i add it to the NgModule Schemas: @NgModule({ schemas: [