aframe | : a : Web framework for building virtual reality experiences | Augmented Reality library
kandi X-RAY | aframe Summary
kandi X-RAY | aframe Summary
:a: web framework for building virtual reality experiences.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Initialize a new WebGL renderer .
- Constructs a WebGL textures
- Creates a new ColorState .
- Create a fog object .
- Create a binding state object .
- Creates the WebGL program objects
- Creates state object from parsed file
- Creates a new WebVRVR instance .
- Parse a JSON model in FBXTree . Objects . Geometry .
- Shows the shadow map .
aframe Key Features
aframe Examples and Code Snippets
Lines of Code : 65License : Strong Copyleft (CC BY-SA 4.0)
Copyconst AFRAME = window.AFRAME;
/*
* Scales the object proportionally to a set value given in meters.
*/
AFRAME.registerComponent('natural-size', {
schema: {
width: {
type: "number",
default: undefined // meters
},
let body = el.body // el = aframe entity
body.velocity.set(0,0,0);
body.angularVelocity.set(0,0,0);
body.vlambda.set(0,0,0);
body.wlambda.set(0,0,0);
// Register all the ng-generated tags in your application so that a-frame
// recognizes them as one of it its own, and thus properly inserts them into the
// scene. If ng tags are not registered with a-frame then ng will only insert
// th Hello AFrame and Angular2
plane images do not display
// get three.js object from aframe entity
var el = document.querySelector('#my-element');
var object = el.getObject3D('mesh');
// compute bounding box
var bbox = new THREE.Box3().setFromObject(obj);
console.log(bbox.min, bbox.max)
import AFRAME from 'aframe';
AFRAME.registerComponent('score-counter', {...});
import 'aframe-helper'
$(document).ready(function() {
// Page is fully loaded, generate the iframe and set attributes
var aFrame = $('');
$(aFrame).attr('src', 'https://www.youtube.com/embed/EU7PRmCpx-0');
$(aFrame).attr('width', '560');
Community Discussions
Trending Discussions on aframe
QUESTION
I am using a networked A-frame to generate a new entity when the page is loaded. I want to add a few functionalities on those entities like hover, on click, etc. I tried making it clickable but it didn't work.
...ANSWER
Answered 2022-Mar-30 at 09:13If you want to use your mouse, you need a cursor which will map 2D mouse clicks onto 3D rays checking whats under the mouse cursor:
QUESTION
I don't want the player to go through walls. I tried aframe extras but it doesn't work in current aframe version. Is there any other way or solution that works in Aframe 1.3.0?
...ANSWER
Answered 2022-Mar-17 at 23:18You can use the simple-navmesh-constraint components from AdaRoseCanon ( it's working fine with a-frame 1.3.0):
Source code here: https://github.com/AdaRoseCannon/aframe-xr-boilerplate
Demo here: https://aframe-xr-starterkit.glitch.me/
QUESTION
I am using A-Frame and pdf.js to create an application to view PDF files in VR. The application works as expected on desktop, including advancing to the next page of the PDF document and re-rendering to a canvas.
When running in a browser in VR (tested with Quest 2), the first attempt renders as expected. However, when rendering a second document page to the canvas, the new image fails to appear unless exiting VR mode, at which point the new texture appears as expected.
I have tried setting the associated material map.needsUpdate repeatedly (in an A-Frame component tick loop) to no effect. While experimenting, I also noticed that if you try to render a new PDF page a second time and then another page a third time (advancing by two pages while in VR mode), when exiting VR mode, only the texture from the second time appears; the data from the third render appears to be lost - I wonder if this is related to the primary issue.
Code for a minimal example is below, and a live version is available at http://stemkoski.net/test/quest-pdf-min.html . When viewing the example in desktop mode, you can advance to the next page by opening the browser JavaScript console and entering testBook.nextPage(); and see that the image changes as expected. You can test in VR mode with a Quest headset; pressing the A button should advance to the next page.
The question is: how can I render pages of a PDF document to the same canvas, multiple times, while in VR mode in A-Frame?
...ANSWER
Answered 2022-Mar-05 at 14:51Found an answer here:
requestAnimationFrame doesn't fire when WebXR is engaged
Its quite relevant because pdf.js uses requestAnimationFrame by default when rendering the image onto the canvas.
It can be toggled though - the pages render function has an option intent, which is later on used to determine whether to use requestAnimationFrame.
The sources You use are slightly different (older?), but if you search for creating the InternalRenderTask in the render function of the ProxyPDFPage - it's all there:
QUESTION
I want my A-frame camera to be behind the model and work as a TPP. I want a model to sync with the camera and rotate and move where ever the camera is moving but it should not move if the camera is pointing up and down it should not look like the model is stuck on the camera.
...ANSWER
Answered 2022-Mar-03 at 18:25The easiest way would be simple reparenting:
QUESTION
I have some code that restricts the camera movement in A-frame so when the camera moves 10 spaces away from the starting point, they are teleported back to the position 0, 1.6, 0. Currently, this works is the players x or y axis moves 10 spaces away from their starting point. How can I modify this so the player is only teleported back if only their y position moves 10 spaces from their starting point? Code:
...ANSWER
Answered 2021-Oct-04 at 09:51If you want to check only the y axis, then it's as simple as checking the difference of two numbers:
QUESTION
I've created a proof-of-concept SPA (source code / demo) which loads stereoscopic images from a web server and renders them in stereoscopic 3D using the aframe-stereo-component for A-frame.
Testing this on a Quest 2 in the Oculus Browser and Firefox Reality, this works fine: each image appears in 3D when viewed in immersive VR mode via WebXR.
However, after scrolling through a number of images (usually 8 to 12), the slideshow stops working. In Firefox Reality, this manifests by the app just freezing and becoming unresponsive.
In Oculus Browser, the image description is displayed but the image area remains black. Connecting the Quest 2 to a PC with adb and inspecting the page using Chrome DevTools, I can see the following output when this occurs:
...ANSWER
Answered 2021-Oct-04 at 09:18The asset management system (a-assets) is intended to help with preloading assets, not throwing them in and out at runtime.
Removing the element from the assets won't dispose the texture (which is cached within the material system).
You can access and clear the cache, but I'd try managing the images 'manually',
loading the image via
new THREE.Texture(src)like the material system doesapply the material with
QUESTION
I'm using Javascript and A-frame. I want to be able to get a random block from the list of blocks and I want it to move down by 1. I can't seem to get any of the blocks to appear randomly on the load current. Below is the code I created to make my tetris board but it's currently giving me slight issues.
I am getting the error
...ANSWER
Answered 2021-Dec-28 at 22:45Not sure where did you get document.clone(element) as the document object doesn't seem to have a cloning utility.
There is a element.cloneNode() method which works fine - we can use it within a custom component, which will also handle the entity lifecycle:
QUESTION
I have a scene I've created using A-frame (https://aframe.io) where currently I have a green box glued to the camera at all times. When the camera turns, the box will move alongside the camera. What I'm wondering is how can I set the box to the top right corner of the screen no matter what the device is. Currently I'm using the position aframe property to position the box at the top right but on smaller devices the box won't show and on bigger devices it's in the middle of the screen. How can I make it so the box is glued to the top right no matter what the screen size is?
Current code:
...ANSWER
Answered 2021-Dec-22 at 01:25You could use the pythagorean theorem to place a green box at the top-left corner of the camera. However, I think given your use-case it would be easier to simply render a separate scene in the corner using the Renderer.setViewport() method
See the code sample below. In essence you're creating 2 scenes, and 2 cameras. The main scene will contain your 3D world and probably a perspective camera to look at it. The small scene will contain perhaps a simple plane and an orthographic camera to render it flat without perspective. Then on each frame you:
- Clear the renderer's buffers
- Render main across the entire window
- Clear only depth buffer, preserving the color
- Render small scene in a 100x100 box on top of step 2
QUESTION
I'm starting to learn aframe and want to use it with an Oculus Quest 2. I have the hands displayed and I'm trying to move around the VR world but when I move the hands don't move ... how to make the hands follow the camera? thanks
This is my code
...ANSWER
Answered 2021-Dec-19 at 07:56I finally found ...
At the beginning I put the controllers in the camera ... but I had to put them in #rig
QUESTION
I am using A-Frame 1.2.0. I have a gltf model on scene and I want to add flat shader this model.
...ANSWER
Answered 2021-Dec-13 at 12:05In a-frames version of threejs (modified 125) , You need to "tell" the material, that your model utilizes "skinning" for animations:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install aframe
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
