Error encountered while trying to render a Threejs FBX Object - undefined 404 (Resource not found)

I am facing an issue while loading a set of .fbx objects using FBXLoader on a WebXR App.

window.fbxLoader.load("/assets/modelate_FBX/Vaza%208067134/Vaza 8067134.fbx", function( object ) {
    const flower = this.scene.children.find(c => c.name === 'sunflower');
    window.sunflower = this.scene;
});

Every time I run the app, I encounter the following console error:

undefined:1 GET http://localhost:8887/assets/modelate_FBX/Vaza%208067134/undefined 404 (Not Found)

I have double-checked the object path and it seems correct, as I was able to render GLtf files successfully before. However, rendering FBX files is proving to be challenging.

I anticipate that specifying a path for the texture models might resolve the issue. But truth be told, I am a bit confused at the moment.

javascriptthree.jsaugmented-realitywebxr

Answer №1

Avoid using localhost as your object path! It will not work. Instead, use the path 

/assets/modelate_FBX/Vaza%208067134/Vaza 8067134.fbx
.

This is an example of how the FBXLoader should be implemented:

window.fbxLoader.load("/assets/modelate_FBX/Vaza%208067134/Vaza 8067134.fbx", function( object ) {
    const flower = this.scene.children.find(c => c.name === 'sunflower');
    window.sunflower = this.scene;
});

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

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

What is the best way to add a filter to a nested array?

I am currently facing a challenge in creating a multiple filter for multiple arrays without duplicating the nested array. I am working with vuejs and some plugins that are relying on the array, so my only option is to filter it without modifying it. Using ...

javascriptarraysvue.jsfilter

Using jQuery's setInterval to consistently refresh the value of a data attribute

I am struggling to dynamically update the data-left value of a div with the class name "tw_marquee_scroller" every 1 second. The intended behavior is for the value to increment by 10 each time, starting at 10 and increasing by 10 in subsequent seconds. H ...

javascriptjquerysetinterval

Animating file transfer can be achieved using either JavaScript or CSS

My goal is to create a visual representation of file transfer, such as moving a file from one folder to another. I have successfully achieved this using JavaScript with the following code: <script type="text/javascript> var img; var animateR; var an ...

javascriptjquerycssjquery-animatecss-animations

Setting the overlay video to match the input video size in FFMPEG

Currently, I am incorporating FFMPEG wasm into a NextJS project. However, I believe that general FFMPEG solutions will suffice since FFMPEG wasm is capable of interpreting standard FFMPEG commands. My objective is to superimpose an overlay video onto the ...

javascriptreactjsffmpegnext.jsffmpeg-wasm

Execute the function only in response to changes in the data

I have a scenario where I am making an ajax call every 3 seconds to keep my app updated with rapidly changing information. However, the expensive function that I run inside the $.done() callback is causing my app to slow down. I want to optimize this proce ...

javascriptvue.jsvuejs2

Looking for a solution to troubleshoot issues with the updateServing function in JavaScript?

I am attempting to create a function that will calculate the portion sizes for the ingredients on my website. This function is located in the Recipe.js file and appears as follows: updateServings(type) { // Servings const newServings ...

javascriptjquerynpm

Guide to centering a Material UI Table on a webpage

Is it possible to center the <Table> within a fixed width <div>, and have a scrollbar appear when the browser is resized, while maintaining the fixed width of the <Table>? Thanks in advance. This is my current setup: <div> ...

javascripthtmlcssreactjsmaterial-ui

The anti-aliasing feature in THREE.JS is not functioning properly when using multiple scenes

How can I ensure that anti-aliasing works correctly on smaller scenes overlaid on top of larger scenes? Take a look at this interactive example: https://jsfiddle.net/gilomer88/j974zmq0/6/ When clicking on any of the cubes in the scene, a new smaller "det ...

three.jsantialiasing

Passing a Typescript object as a parameter in a function call

modifications: { babelSetup?: TransformationModifier<babel.Configuration>, } = {} While examining some code in a React project, I came across the above snippet that is passed as an argument to a function. As far as I can tell, the modifications p ...

javascriptangulartypescriptobjectarguments

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...

javascripthtmlcssdrop-down-menu

Building a Next.js application in a docker container on a local machine using minikube is successful, however, the build fails when attempting to build it on a staging environment

I've encountered a puzzling issue. My next.js app is running in a docker container. It builds successfully on my local Ubuntu machine with minikube and ks8 orchestration, but it gets stuck indefinitely during the build process on the staging setup. T ...

javascriptnode.jsdockerkubernetesnext.js

"Create a set of arrays within an object that are duplicates four times, and then dynamically manipulate the first item within each array

Here is the layout of my array object: const foo = {"data":[ [1,'asdf'], [2,'lorem'], [3,'impsum'], [4,'test'], [5,'omg'], ]} I am looking to replicate each array four times and increment the first item ...

javascript

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

I have a form with a list of users and checkboxes below their names. Each user has a button that should select all checkboxes assigned to them. Below is the code for the dynamically created buttons and checkboxes. The included function takes the form name ...

javascriptphpjqueryhtmlcheckbox

Expanding functions consist of numerous components

How can I modify this script to work on multiple elements? For example, if a user clicks on a specific link (see demo) labeled "I'd like to expand the article linked here", only that particular link should expand an element, not all like it currently ...

javascriptjquery

Why does the <select> dropdown flash when I select it?

Currently utilizing Angular 1.3 and Bootstrap 3.3.x CSS without the JS functionality. There is also an interesting animated GIF embedded within. <div class="form-group"> <div class="col-lg-3"> <label clas ...

javascripthtmlcssangularjs

What steps can be taken to resolve the error message "t.onSubmit is not a function" that occurs upon form submission?

Upon submitting a form, it should trigger the onSubmit method function. However, an error is being returned instead: TypeError: "t.onSubmit is not a function". I've attempted to address this issue by researching similar problems and solutions provide ...

javascriptvue.js

What is the best way to execute tests in different environments with Protractor?

Is it possible to execute specifications in various environments? Maybe by adjusting the protractor-config file? Could we do something along the lines of specs: ['../tests/*.js', server1], ['../more_tests/*.js', server2] within the ...

javascriptnode.jsangularjsmocha.jsprotractor

When faced with the error message "Typescript property does not exist on union type" it becomes difficult to assess the variable

This question is a continuation of the previous discussion on Typescript property does not exist on union type. One solution suggested was to utilize the in operator to evaluate objects within the union. Here's an example: type Obj1 = { message: stri ...

javascripttypescripttypesunion-types

Best practices for incorporating and leveraging node packages with Laravel Mix

As I embark on my Laravel (v 8.x) Mix project, I am encountering challenges when it comes to incorporating JavaScript from node modules. To kick things off, here is a snippet from my webpack.mix.js: mix.js('node_modules/mxgraph/javascript/mxClient.mi ...

javascriptlaravelnpmwebpacklaravel-mix