aframe-ar | Frame support for browser-based augmented reality | Augmented Reality library

The animation id needs to be unique - you have four animations animation__1_0_f0

Here only the first animation works (same ids)

tldr.

Afaik arjs has hardcoded sizes and multiple boundaries all over the place to keep the library universal (different devices with different aspect ratios, mobile portrait vs landscape etc...).

Re-creating it all with "embedding" options would be a huge project so I'll focus on a simple example with a non - resizable window.

Disclaimer: most of the following is just my take, mostly showing which parts I changed and why. All of this could be done in many other ways.

0. a wrapper element

So the idea is to be able to embed the video + scene into some div, like here

You can see both the video and scene are contained within a div - #arjs-cell. So just after the namespace I've added my variable for keeping my wrapper element, and a setter, which will also reparent the video:

(Assuming there are no console errors suggesting incorrect cubemap paths, or wrong extensions)

If your model looks like this:

And you want it to be more like this:

Then the answer lies in two factors - metalness, and roughness.

• roughness determines whether the material is like a mirror (0), or completely diffuses the reflection (1).
• metalness determines whether the material is metallic (1), or not (0).

You can deal with this in at least two ways:

• Modify the materials in a modelling software like blender, or maya.
• Modify the properties within an a-frame custom component.

A component would have to wait until the model is loaded, and change all (or some selected) model nodes. Like this:

According to the documentation, you can set the look-controls "touchEnabled" property to false, it should solve your issue.

https://aframe.io/docs/1.0.0/components/look-controls.html

It should do with something like this

You need to use event Delegation so your DOM is listening to the click event for dynamically appended element. by using .on

Also to get the value of p you need to use attr to retrieve the value of clicked item.

I have added some comments to each line as well. Change your click function to this below and it should work fine.

Just FYI - You also do not need the function deletar. Its up-to to have it or not. Event delegation on click will call .deletePrato and will remove the that item you want to.

Run snippet below.

This problem happens because one needs to ask for camera permission. To fix it, I changed the iframe to

The simple way i can think of is to completely disable all alert by altering alert functionality when the document is "ready."

The marker you are using is a .jpg image which is not what a-nft need. You need to make the NFT from your image using this Carnaux NFT Marker Creator (which takes time)

Or follow this docs for Node version AR.js NFT Marker Creator Docs

Edit: Also, you are using but with .mp4 (video).

gltf-model is for .gltf or .glb format (3D model). If you want to use video use a-video

The model won't show up because of two factors:

1. The model is huge and off - centered. Scaling it by 0.01 moves it a bit towards the center.

If your model shows up in Dons gltf-viewer - always try out your model in vanilla a-frame - at least in a fiddle. Its easy to inspect, debug, and you can be sure whether a-frame is causing the trouble.

1. Glitch assets is not a folder. It may look this way for our convenience, but it's just a bunch of links. So scene.gltf is searching for scene.bin in its current directory (edit and search the gltf file - its human readable), but it's not there.

Replacing the paths with glitch urls is a bad idea (usually there are way more paths than just the .bin). You should push the model into a github repository, where the directories work as expected.

Working arjs glitch here.