The NFT image tracking is functioning properly on the local device, however, it is encountering an error on

Having recently started working with AR.js, I've been experimenting with running NFT markers using Three.js and a custom image to display a model. While everything runs smoothly on localhost, I encountered a 404 "onError" message when trying to upload it to my GitHub page from the ar-nft.js file. I attempted to update the link in ar-nft to , but the error persisted. My assumption is that the descriptors URL cannot locate the NFT data files on the server. If this is the case, I'm unsure of how to properly link them.

You can find the entire project at https://github.com/pillipillow/ARjs-with-Threejs

The code snippet below is taken from https://github.com/pillipillow/ARjs-with-Threejs/blob/main/nft-tracking.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Viewport</title>
    <link rel ="stylesheet" href="css/main.css">
</head>
<body>
    <script src = "libs/threeJS/three.min.js"></script>
    <script src = "https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-nft.js"></script>
    <script>THREEx.ArToolkitContext.baseURL = "libs/arJS/"</script>

    <script type= "module">
        import { GLTFLoader } from './libs/jsm/GLTFLoader.js';
        
        var scene, camera, renderer, clock;

        var arToolkitSource, arToolkitContext;

        var markerRoot;

        var model;

        // Remaining JavaScript code...
       
    </script>
</body>
</html>

Answer №1

Be sure to check out the NFT-Marker-Creator tool for creating NFT markers. Here's a sample setup:

<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">
</script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

Don't forget to also refer to the official documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to add a fade-in and slide-in effect to this dropdown JavaScript, as well as a fade-out and

Although I lack the necessary knowledge of Javascript, I am aware that my request may be a bit much. The code I currently have is directly from the w3school dropdown-list demo. Would it be possible for you to help me implement a fade in and slide in effect ...

Utilize React MaterialUI's ExpansionPanelSummary by incorporating a counter to a specific div id

I am in need of a feature that will automatically increment a counter in the div id every time the render function is invoked. The main goal is to ensure that each div has a unique identifier. Below is the current render function implementation - render ...

Editable content <div>: Cursor position begins prior to the placeholder

Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this? <div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="o ...

incorporating my unique typographic styles into the MUI framework

I'm currently working on customizing the typography for my TypeScript Next.js project. Unfortunately, I am facing difficulties in configuring my code properly, which is causing it to not work as expected. Can someone kindly provide assistance or guida ...

Data string not being converted correctly to date format

Here is a table I am currently working with: ID DateColumn 1 3/7/2019 5:29:38 AM 2 3/8/2019 5:28:38 AM 3 3/7/2019 5:30:38 AM 4 3/7/2019 5:31:38 AM The date column in this table is being processed as a string when bound to the grid. To ...

Screen readers are unable to "read" text that is identified through aria-describedby

When enhancing my web application for accessibility, I encountered a challenge. I have implemented two required fields in a form that should display separate error messages as spans. To accomplish this, I am utilizing aria-invalid to signal when the fields ...

ReactJS: Trouble encountered while parsing information from JSON data

Currently, I am facing an issue while trying to pass data from my JSON file to my ReactJS application. The error message that I am encountering is as follows: TypeError: Cannot read property 'mainPage' of undefined Upon console.logging siteDa ...

Relocate the resizable handles in jQuery outside of the div elements

I currently have 3 nested divs. Using jQuery $(function() { $("#div1").resizable({ handles: "n, e, s, w, nw, ne, sw,se" }); $("#div1").draggable(); }); Within the HTML structure <div id="div1" style="left: ...

What causes the $router.push method to direct to the /summoner/username/ URL instead of just /summoner/username when using { name: 'summoner', params: { summonerName: summonerName }}?

I am facing an issue while trying to execute a function that redirects the user to another page upon clicking a specific element. The problem arises when using: this.$router.push({ name: 'matchlist', params: { summonerName: summonerName }}) It ...

Div element to animate and vanish in a flash

I'm attempting to create a smooth slide effect for a div element before it disappears. Below is the code I am currently using: function slideLeft(element) { $("#" + element).animate({ left: "510" }, { duration: 750 }); document.getEle ...

Putting AngularJS controller through its paces using Jasmine

Here is the code for my NewPageCtrl.js file: angular.module('NewPageCtrl', []).controller('NewPageController', function($scope, $document) { $scope.showMe = false; }); And here is the content of test.js: describe('NewPageC ...

Setting the response type to text in Angular 6 when making an http call

Attempting to send an HTTP request to the Spring REST API, which returns a string value ('success' or 'fail'). However, I am uncertain of how to specify the response type as a string value when making the call to the API. The error mess ...

Customizing listview appearance in asp.net with css and enhancing with javascript

When I print, the css class is not being used although it appears when using the program <script type="text/javascript"> function printDiv() { var divToPrint = document.getElementById('DivIdToPrint'); ...

Include a class above the specified element; for instance, apply the class "act" to the "<ul>" element preceding the "li.item1"

Hello there! I need some assistance, kinda like the example here Add class and insert before div. However, what I really want to do is add the class "act" to a class above that matches the one below: Here's how it currently looks: <ul> ...

I'm looking to include a field card into the to-do table I built using .Net, but I'm not sure where I made a mistake

HTML Challenge I have set a goal to dynamically add a DOM element using JavaScript when the "Add HTML Element" button is clicked. The process involves clicking the button, which opens a modal for inputting necessary information. After fil ...

Leveraging the same React component in multiple instances and streamlining requests - NextJS vs React

Currently, I'm working on a chat application using NextJS 14. Each time a message is sent or received, there is a small icon next to the chat message that represents the user who sent the message. To achieve this, I have a ChatMessageUI component tha ...

Here's how you can arrange a list starting with the first item and then searching for a specific string using md-autocomplete in

As a newcomer to angularJs, I am looking for ways to filter search results more efficiently. Check out this example here: https://codepen.io/anon/pen/mpJyKm I am trying to customize the search result by filtering based on query input. Specifically, I wan ...

Inquiry about Tree Traversal in Javascript using Jquery

Consider the following scenario: <ul> <li>Item 1</li> <li>Item 2 <ul> <li>Sub Item</li> </ul> </li> <li>Item 3</li> </ul> This list is dynamically generated by another piec ...

The issue of excessive recursion in Typescript

Currently, I am in the process of learning Typescript while working on some exercises. While attempting to solve a particular problem, I encountered an error related to excessive recursion. This issue arises even though I created wrapper functions. About ...

Dealing with React Native: Navigating App Store Rejections and Embracing IPv6

In my react-native client for a website, the login page offers two options: manually enter the login code or scan it using a barcode scanner. I have extensively tested the app on real devices and emulators, and it's functioning correctly. However, all ...