Every time I push my code to Heroku, the deployment runs smoothly. However, I encounter a frustrating 404 error when trying to access

When deploying my app, I encounter an issue where the .glb file in my three.js project receives a 404 resource not found error. Despite trying to adjust the file path without success, the deployment of the entire project is flawless. For local running, I am utilizing Vite.js.

For more details, you can visit my Github repo at https://github.com/ElijahSchrock/Neo-Runner

You can access the deployed app on Heroku at

To view my package.json, click here: Here is my package.json

If you're interested in my create character function, check it out here: Here is my create character function

I also found insights from Don McCurdy's response on the threejs forum regarding this issue, which you can read here:

In addition, I have included both the static build pack and the nodejs buildpack in my setup. Any assistance would be greatly appreciated! Thank you! :)

javascriptherokuthree.jsvite

Answer №1

Your route to the glTF asset appears to have a minor hiccup. Instead of:

loader.load('./Neo.glb', (gltf) => {

try using:

loader.load('./model/Neo.glb', (gltf) => {

Answer №2

By utilizing AWS S3 to host my files and integrating the object URL into my glTF loader, I was able to successfully resolve this error. It's important to ensure that your CORS settings are configured correctly.

Answer №3

Hello Mr.Schrock, may I inquire if you have executed the NPM and ensured that the variables are passing through the selective bloom? Utilizing a component in layerville livewire seems like the optimal choice. Moreover, calling the function into the div and utilizing a boolean for an if else statement could prove beneficial. Remember to utilize node to deploy your react. Incorporate some swift elements into the app for jquery on Heroku or review your contributions in the branch.

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

Interacting with touch events in JavaScript on Android devices

I am facing an issue with my HTML page where a div is meant to function as an on-off switch momentarily. The functionality I have implemented looks like this: $('#btn').mousedown(function() { startAction() }) $('#btn ...

javascriptjqueryandroidmobilewebkit

Which kinds of data are ideal for storage within the Vuex (Flux) pattern?

Currently delving into the world of Vuex for the first time as I develop an application in Vue.js. The complexity of this project requires a singleton storage object that is shared across all components. While Vuex appears to be a suitable solution, I am s ...

javascriptvue.jsvuexflux

KnockoutJS - Using containerless control flow binding with predefined values

Inside a select control, I am using ko:foreach instead of the usual bindings. Everything is working perfectly, except that the initial value for "specialProperty" is set to unknown even when the select control is set to Option 1. It behaves as expected o ...

javascriptjqueryknockout.js

An error occurred with Express and Passport: ['ERR_HTTP_HEADERS_SENT']

Currently, I am diving into an ebook tutorial and have encountered a roadblock in a particular piece of code. The code is designed to take a username and password in JSON format through Insomnia or Postman, and it should return a login success cookie. Howe ...

javascriptnode.jsexpresspassport.js

Updating MongoDB with an unknown object can be a challenging task, but there

In my current project, I have set up a Mongoose model as follows: const userSchema = new mongoose.Schema({ userID: { type: String, require: true, unique: true }, username: { type: String }, serverID: { type: String, require: true }, roles: ...

javascriptnode.jsmongodbmongoose

Verifying that objects are eligible for garbage collection

My program in node.js receives a high volume of messages. Each time a message is received, I create a new object and pass the message content to it. Inside the constructor of the new object, various operations are performed, including some mongo tasks with ...

javascriptnode.jsgarbage-collectionjavascript-objects

On paste events, CKEditor will strip away all HTML tags except for div and span elements

I am trying to implement a feature in CKeditor where all HTML tags are removed when a user pastes content using Ctrl+v. The code I have written so far does not seem to work as expected. <script type="text/javascript"> CKEDITOR.on('instanceR ...

javascriptphpjqueryckeditor

Limiting the number of checkboxes selected in a Checkbox Group based on

I am working on a checkboxGroupInput that has 4 options (denoted as A, B, C, D). My goal is to restrict the selection to only 2 choices. The user should be able to pick a 3rd option. In this scenario, only the newly selected (3rd) and previously selec ...

javascriptjqueryrcheckboxshiny

Next/image is encountering an error due to an invalid Element type being generated

Trying to utilize the next/image feature to display an SVG image is causing me some trouble. Every time I attempt this, an error message pops up: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...

javascriptnext.js

Retrieve information filtered based on the query parameter

Utilizing react hooks for dynamic data rendering, I am focusing on two main tasks: a. Extracting URL parameters from the component's history props. b. Retrieving state data from the component's history props, which provides an array of objects ...

javascriptreactjs

Sometimes, React doesn't cooperate properly in the callback function of a setState operation

Imagine this scenario: callback = () => { ... } When is it appropriate to use this.setState({...}, this.callback); and when should I opt for this.setState({...}, () => { this.callback(); }); In order to maintain the validity of this within the ...

javascriptreactjssetstate

Unable to load a different webpage into a DIV using Javascript

Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with: function loadXMLDoc(filename) { var xmlhttp; if (window.XMLHttpRequest) { ...

javascripthtmlcss

Navigating the Foundation Topbar - Should I Toggle?

Is there a simpler way to achieve the navigation I desire, similar to the switcher for uikit? Instead of using data-toggler on each tag in my top bar, is there an easier method where I can click links in my top bar to display different content without go ...

javascripthtmlcsszurb-foundation

Utilizing API data as props within an Autocomplete component in Reactjs with Material-UI

New to Reactjs, I am currently exploring the implementation of the Autocomplete component from material-ui. My goal is to pass the API link as a prop to the element. However, I'm stuck on how to pass the json label name as a prop to be used in "getOpt ...

javascriptreactjsapiautocompletematerial-ui

JavaScript Function to Retrieve URL Parameter in PHPIn this tutorial

I'm currently working on an HTML5 game where each level has its own dedicated HTML page. The results of each level are saved in a JavaScript variable. My question is, how can I pass this information to the next page using the URL? I was considering ...

phpjavascripthtmlurl

Issues with jQuery slide operation

I'm facing an issue with jQuery and I can't figure out where it's coming from. Here is the error message that keeps showing up in the console: Uncaught TypeError: Object [object Object] has no method 'getElement' script_16.js:46Un ...

javascriptjqueryjoomlajquery-slide-effects

Getting the time difference relative to the current time using date-fns from a MySQL datetime - a step

I am trying to implement a relative time feature like ... ago in my react blog posts without relying on moment.js. The date of the post is stored in mysql using the datatime data type, for example 2023-02-01 21:25:33 This is what I have attempted in the c ...

javascriptreactjsdatedate-fns

Tips for maintaining the browser scroll bar at the top when switching routes in AngularJS

How can I ensure that the scrollbar is always at the top when a user is redirected to a different page after scrolling down on the home page? The autoscroll feature in the code below doesn't seem to be working. Any suggestions would be greatly appreci ...

javascriptangularjsbrowser

angular corresponding vue binding="$props"

If I wanted to take a shortcut, I could utilize v-bind="$props" to dynamically set key values as shown in the sample below : <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> ...

javascriptangularvue.js

Managing active dropdown menus in VueJS

I'm having trouble figuring out why my navigation menu and method to open subitems on click are not working correctly. [![dropdown_menu][1]][1] new Vue({ el: '#app', data: { //menu "menu_title": "a", "child_ro ...

javascripthtmlcssvue.jsvuejs2