Tag: aframe

How to control .glb model animations in A-FRAME via Three.js

aframe animation gltf javascript three.js

I’m trying to play a glb animation in A-FRAME with Three.js, now it works just for a second and then it stop, could someone help me please? this is my code: Answer Wait until the model is loaded with: update the animation in the renderloop – on each tick. You could use an interval or something else, but aframe has

Using an Object’s postion for an Event in AFrame

aframe html javascript three.js

I’m trying to make a component that checks the current position of a sphere in an AFrame scene and when it hits a specific coordinate and when it does it fires an event (In example below it resets it to its default position): I’m not sure what format is returned when .getAttribute(“position”) is called so that may be why it’s

making two animations at once in A-frame

aframe animation javascript

For example, by using camera rig, I want to move from A to B then B to C in just one single click. I normally write “to 0 0 0” in the event “onclick”. I want trigger both animations “1” and “1_1”. At the moment it is only the “1_1” that is triggered by a click. I’m using a timeline

AFrame updating material.offset for each object

aframe javascript

I made an AFrame component for creating hotspot, and I want to change material.offset.y of a hotspot when I hover it with cursor. So I first tried using AFrame animaiton attribute, but visibly, we can’t access to this property with animation. So I added a eventListener to the hotspot JS object and changing the getObject3D(‘mesh’).material.map.offset.y, but it update all hotspots

A-Frame Asset Management System blocks JavaScript code

aframe assets gltf javascript

I’m coding an A-Frame project for our University at the moment with a PHP Backend. Whenever I try to load an a-asset-item in the a-assets section, my JavaScript code stops working. I tried changing the gltf model to a glb and to a obj/mtl and I tried using a CDN model from a A-Frame tutorial. If I don’t load the

Disable the drag on screen in a-frame AR.js

aframe ar.js html javascript

I am trying to disable the drag feature of A-frame so that if a object is in front of your screen the user can’t just drag on the screen and remove it from your front to other place without even moving. Can anyone help me out with how I can do it? EDIT I have already tried look-controls-enabled=”false”, but it

Best Fit Rectangle From Set of Coplanar Points in Three.js

aframe javascript three.js

First off, I apologize if there is a solution for this somewhere, but I’ve done a great deal of digging through Three.js and A-Frame docs as well as Stack Overflow and haven’t found what I’m looking for. What I want to do is create a best-fit A-Frame plane from a set of Vector3s that I already know are coplanar. This

Reducing the size of the a-frame canvas to show other HTML elements

aframe canvas html javascript

If this is possible, can I change the size of the aframe canvas in code? I would like to display a form so that users can modify object parameters in the aframe scene. Answer See this question. How to remove fullscreen styles in A-Frame, reduce canvas size, or scroll a page with A-Frame scene? You can use the embedded component