webvr

a-frame vr how to drag and drop assets / elements insight a picture?

由 醉酒当歌 提交于 2019-12-05 21:38:41
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

How to mange memory used by A-Frame?

由 倖福魔咒の 提交于 2019-12-04 19:38:01
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?

How to enable WebVR on Google Chrome?

由 家住魔仙堡 提交于 2019-12-04 08:16:17
I am trying to create a WebVR scene. For this task, I want to enable WebVR on Google Chrome. My OS is Windows 8. I open flags using chrome://flags/ . WebVR is not there. How can I enable it? Official channels of Google Chrome do not support WebVR. (now they do, see below) There is an unofficial build of chrome that does. FYI Firefox Nightly also supports WebVR in their official and current release, as does Samsung Internet Beta for GearVR (the latter after some configuration). UPDATE: Chrome Android now works with WebVR if you enable chrome://flags/#enable-webvr . See this manual on how to

AFrame: How to render a camera to a texture

由 萝らか妹 提交于 2019-12-04 05:27:37
问题 I'm trying to have a second camera to show a "from the sky" view of an AFrame scene. I've learned how to do it using a 2D canvas for rendering, following this example: But I wonder if this could be done without using a external <div> , something like rendering directly to some asset, or maybe directly to the texture... My current code is: <html> <head> <script src="//aframe.io/releases/0.8.2/aframe.min.js"></script> <script> // Original code: // https://wirewhiz.com/how-to-use-a-cameras

Three.js - VRControls integration - How to move in the scene?

由 筅森魡賤 提交于 2019-12-03 22:12:49
问题 I use Three.js to render and move (my orbitControl changes camera.position) in a small scene. Now I have an oculus rift. So I added VRControls and VREffect. There is no problem to move the head. But I can no more move in the scene because VRControls override the camera parameters : object.quaternion.copy( state.orientation ); // object is the camera I thought that it was easy to correct : I have only to update the camera instead of overriding it : object.quaternion.copy(stateOrientationQuat

How to get bounding box information from a 3D object in aframe?

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-02 11:55:01
问题 I am working on an aframe project that involves loading 3D objects of unknown sizes into my scene. Naturally I would want to resize the object to a certain size (like fixed height) before I put it in the scene. But how do I extract information like width, height and depth from the object's bounding box? 回答1: You'll need to use A-Frame's underlying three.js APIs here. That answer has been posted for three.js before, but here's an A-Frame version: // get three.js object from aframe entity var

How to change the rotation axis for an animated A-Frame object?

由 こ雲淡風輕ζ 提交于 2019-12-02 06:37:56
问题 Somewhat related to this question, I can't seem to find an 'in-framework' way to change the rotational axis for an A-Frame object (like Earth's tilted axis, for example). The linked question refers to changing the rotation pivot point by wrapping the object in a parent entity which will offset the child entity (see below): <a-entity rotation="0 45 0"> <!-- Parent entity --> <a-box position="0 1 0"></a-box> <!-- Child entity --> </a-entity> I've adopted a similar method but rather than offset

How to get bounding box information from a 3D object in aframe?

由 自闭症网瘾萝莉.ら 提交于 2019-12-02 06:34:35
I am working on an aframe project that involves loading 3D objects of unknown sizes into my scene. Naturally I would want to resize the object to a certain size (like fixed height) before I put it in the scene. But how do I extract information like width, height and depth from the object's bounding box? You'll need to use A-Frame's underlying three.js APIs here. That answer has been posted for three.js before , but here's an A-Frame version: // get three.js object from aframe entity var el = document.querySelector('#my-element'); var object = el.getObject3D('mesh'); // compute bounding box var

Alpha Animation in Aframe for a-object-model

由 こ雲淡風輕ζ 提交于 2019-12-02 06:02:19
问题 I have one 3d object with its obj and mtl file which is displayed using in Aframe. I want to apply animation on it which change its Alpha value gradually for Fade out effect. I went through AFrame doc. but couldn't find anything related to 3d object alpha animation. 回答1: The built-in material component primarily works with primitives, so material="opacity: 0.5" and similarly opacity="0.5" will not work here. You'll need to modify the THREE.js materials created by your model, using a custom

AFrame: How to render a camera to a texture

由 戏子无情 提交于 2019-12-02 04:53:25
I'm trying to have a second camera to show a "from the sky" view of an AFrame scene. I've learned how to do it using a 2D canvas for rendering, following this example : But I wonder if this could be done without using a external <div> , something like rendering directly to some asset, or maybe directly to the texture... My current code is: <html> <head> <script src="//aframe.io/releases/0.8.2/aframe.min.js"></script> <script> // Original code: // https://wirewhiz.com/how-to-use-a-cameras-output-as-a-texture-in-aframe/ // AFRAME.registerComponent('view',{ 'schema': { canvas: { type: 'string',
订阅 webvr