aframe

How can I reset the camera position when the user clicks the enter VR button in an A-Frame scene? I set a nice camera position for desktop wasd-controls users, but want to reset the position and rotation when a Vive user enters VR. I followed the pattern of this answer to setup the camera initially: <!-- Player --> <a-entity id='cameraWrapper' position='1 1.8034 1' rotation='-35 40 0'> <a-entity camera look-controls wasd-controls="fly: true"></a-entity> </a-entity> and here I attempt to reset the position and rotation with the window.onvrdisplaypresentchange event from the WebVR API: // // if

I installed A-Frame by npm install aframe --save. When I use: import 'aframe'; // or use: require 'aframe'; import { Component } from '@angular/core'; @Component({ selector: 'app', template: ` <a-scene></a-scene> ` }) export class AppComponent {} I got the error: zone.js:1046Uncaught TypeError: Cannot assign to read only property 'detachedCallback' of object '#' I checked this Angular_VRDemo , but still did not figure out myself. I guess it because aframe library doesn't implement some properties (like detachedCallback and other) by creation custom element. https://github.com/aframevr/aframe

I'm totally new to VR and am working on a Vr space shooter in AFrame for a class project and was wondering if there is any documentation/standards for TDD in AFrame. Could anyone point me in the right direction? Build your application almost entirely in A-Frame components: https://aframe.io/docs/0.4.0/guides/writing-a-component.html Then test the components. Just about every component in the A-Frame codebase has unit tests: https://github.com/aframevr/aframe/tree/master/tests/components The component template in angle also has a unit test setup. https://github.com/aframevr/angle/tree/master

I am trying to embed a .OBJ model into an element so that it is confined to a specific width and height, instead of a full page canvas. I'm trying to replicate the "scene" embedded into the header of https://sketchfab.com/ . I would like the camera in my scene to pan round the central axis of the model(just like in the example). I'm having trouble accomplishing this... so far, I am able to successful load the following afame scene into my browser: <a-scene> <a-box color="#6173F4" width="4" height="10" depth="2"></a-box> </a-scene> But I can't get the scene to be resized and confined within a

I am trying out a-frame and can't find anything about how to drag and drop elements and have been looking for it for hours! Is anyone familiar with a-frame? Thanks thats my code so far: <a-scene> <a-cursor></a-cursor> <a-assets> <img id="enemy-sprite" crossorigin="" src="mustache1.jpg"> </a-assets> <a-image look-at="#player" src="#enemy-sprite" transparent="true" position="0 1.8 -4"></a-image> <a-camera id="player" position="0 1.8 0"></a-camera> <a-sky src="street.jpg"></a-sky> EDIT: browser/home.html: <scene scene-id="sceneId"></scene> browser/js/app/directives/screne.html: <a-scene> <a

I'm building a web app which has 360 degree images loaded into an a-sky primitive. I'm using aframe-react . There are total of 20+ 360 degree images and only one img asset inside a-assets . once user switches scene react will change src of asset img and scene will re render. Everything works fine but it's using lot of memory because of caching. One time it used 4GB+ memory. In mobile the web page crashes after switching through ~8+ images. How do I handle this situation? I tried looking into THREE.Cache but images are not cached there. Is this memory usage has anything to do with using React?