The aframe module is unable to detect the embedded .gltf scene within the <a-gltf-model/> tag, resulting in a 404 Not Found error when using node.js

When using aframe, I encountered an issue where the embed .gltf scene was not being recognized inside 'a-gltf-model' - returning a 404 Not found error when accessed through node.js. However, placing the src attribute into 'a-emity' resulted in the scene appearing on the page but only as a small rainbow with dimensions of height and width set to 0. Adjusting the position did not help either. The starter scene (inline) worked fine.

In this case, there are two files located in the root directory. The first file is 'index.js':

var express = require('express');
var app = express();
var path = require("path");

app.get('/', function (req, res) {
    res.sendFile(path.join('C:/web/index.html'));
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});



Below is the content of 'index.html':

<!DOCTYPE html>
    <html>
      <head>
        <title>test aframe scene</title>
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
          <a-gltf-model src="scene/archilogic/export.gltf"></a-gltf-model>
        </a-scene>
      </body>
    </html>



p.s. Apologies for any confusion, I am relatively new to this and this is just a test scenario. I had experience working with Blender previously. The original scene can be found here

Answer №1

This issue indicates that the location of your model in your code does not match its actual location; without the full code, it is challenging to provide specific assistance. For additional guidance, refer to A-Frame documentation on 3D models and hosting.

UPDATE: After reviewing the code you provided, please note that your Express server only handles requests on the / URL. To enable loading images and models through it, you must configure it to serve additional files. Referencing Serving Static Files in Express:

app.use(express.static('C:/web'))

All necessary files should be placed in this folder.

Furthermore, be aware that Archilogic (provider of the glTF file) uses an outdated version of glTF incompatible with newer versions of A-Frame. If the model doesn't display here, it won't render in A-Frame. Ensure you have glTF 2.0 format.

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

Leveraging electron-usb alongside electron

I attempted to integrate the electron-usb library into my electron project. Upon running npm start with require('electron-usb') in my index.html file, an error is displayed in the console: Uncaught Error: The specified procedure could not be fo ...

Rejuvenating JWT's with a refresh token

As I develop my SPA app along with its REST API, I find myself unsure of the best practice for refreshing the JWT using the refresh token. Should I wait until I receive a 401 HTTP status from the server (indicating the JWT has expired), or should I proac ...

Unveiling the enigma: Kubernetes deployment rendered with undefined environmental

I recently posted a question on Stack Overflow having a similar issue. I followed the instructions provided in the answer of this post: How to get access to Kubernetes container environment variables from Next.js application?. However, even after calling m ...

Develop a mobile application utilizing reactjs based on my website, not native

I am in the process of creating a mobile application that mirrors my existing website built with reactjs. As I was researching on reactjs, I wondered if it is possible to convert my reactjs code from the website into code for the mobile application. Any s ...

React page is not loading properly after refreshing, displaying unprocessed data instead

Hello everyone! I am currently working on developing an app using Node, React, and Mongoose without utilizing the CRA command, and I have also incorporated custom webpack setup. Initially, I was able to build everything within a single React page (App.jsx ...

Encountering error while using node-fetch in React application - "Module 'node:http' not found"

In my setup, I am using Strapi as a backend and React as a frontend. My main objective is to retrieve data from the API in the backend using any available tool. Initially, I attempted to use Axios for this task but encountered an issue when making a GET ca ...

Incorporating ngrx/Store into a current Angular application

Currently, I am working on an Angular 7 project that consists of numerous components communicating with an API to update data. The constant refreshing of the data using setTimeout has made it quite overwhelming as all the components are pulling data from t ...

Tips for modifying the function of an Electron application using an external JavaScript file

This is the project structure I envision. https://i.stack.imgur.com/ocRp9.jpg kareljs folder houses an Electron app, and upon running npm start within that directory, a window appears and executes the run method of karel.js when the button Run Karel is ...

Directing internal requests from Microservices within a private subnet on AWS

I am currently facing a challenge with my micro-services that are deployed using ECS in private and public subnets. These microservices communicate with each other over REST and require knowledge of each other's IP addresses. As I do not have a domain ...

Utilizing postBack to send chatbot responses with BotFramework v4 and Node.js

I'm looking to send a postBack text message to my bot, but I need help with the correct syntax. Here's the code snippet: if (postback.payload == "WHAT_IS_MENTAL_HEALTH") { await turnContext.sendActivity("TO-DO: Forward on 'What Is Me ...

Tips for loading images in an Express.js app deployed on Vercel

I am currently developing a GitHub banner generator using express js. The code is functioning perfectly fine on my local machine, but when I attempt to deploy it on Vercel, all the image files seem to disappear and I encounter a no such file or directory f ...

"Exploring the process of sending an inline keyboard to a Telegram bot via the Inline editor in Dialogflow ES (Fulfillment

At times, I utilize Dialogflow ES Fulfillment for creating Telegram bots. When trying to send the inline_keyboard filled with API data from the Inline editor section to complete the functionality, I encounter an issue. Ideally, I would like to send a stati ...

Unexpected results from the NPM v3 console

Since switching to npm 3 with node.js 5, my console output has taken on a new look: My font of choice is Menlo Regular for Powerline. ❯ echo $TERM xterm-256color ❯ locale LANG="en_US.UTF-8" LC_COLLATE="en_US.UTF-8" LC_CTYPE="en_US.UTF-8" LC_MESSAGES ...

The issue of CSS and JS files not loading properly arises when attempting to pass data through the URL

working link -> http://example.com/edit/page -> http://example.com/assets/images/picture.jpg broken link -> http://example.com/edit/page/123 -> http://example.com/edit-page/assets/images/picture.jpg When I remove 'edit-page' from ...

Installation of global npm packages in Node.js on Windows encountered errors due to issues other than the path configuration

Having encountered a perplexing issue, I recently installed the latest version of Node.js (v.10.*) on my Windows 7 PC. My attempts to globally install certain packages like gulp and yoeman have been met with errors. Upon inspection, it appears that many pa ...

How can I retrieve the user id of the current logged-in user in Odoo and Node.js?

I am looking to fetch the user-id of the currently logged in user. To achieve this, I am utilizing the odoo-xmlrpc node package to establish a connection between my express application and an Odoo instance. odoo.execute_kw("res.users", "search_read", para ...

How can I set a header to be automatically included in every "render" response in Node.js/Express?

One of the challenges I face involves implementing "controllers" in my code: app.get('/',function(req,res){ var stuff = { 'title': 'blah' }; res.render('mytemplate',stuff); }); In particular, I'm worki ...

Encountering an issue when trying to execute the npm start command in the Windows 10 command prompt

Need assistance with a React error. I encounter this screen when attempting to run the command npm start after creating a new React project. ...

Executing npm commands within a complex folder hierarchy

I am facing an issue where I can only execute my npm scripts like npm run dev or npm run build when my folder is placed on the Desktop. However, when I try to move the folder into my directory structure, it throws the following error: npm run dev > &l ...

node operates in an asynchronous manner

In my Express application, I am incorporating ACL (Access Control List) using the node_acl library. This is how my acl.js file looks: var mongoose = require('mongoose'), node_acl = require('acl'), acl; mongoose.connect('mongodb:/ ...