The ThreeJS FBX model exhibits one-sided characteristics

I'm having trouble loading an FBX Model in ThreeJS. When I load the model, it only appears from the bottom and not from the top. It seems like only one side is being rendered.

Does anyone have any ideas on how to fix this issue?

This is my load function:

_LoadAnimatedModel() {
      const loader = new FBXLoader();
      loader.setPath('./resources/models/');
      loader.load('track.fbx', (fbx) => {
        fbx.scale.setScalar(0.1);
        fbx.traverse(c => {          
          c.castShadow = true;
      });

          const anim = new FBXLoader();
          anim.setPath('./resources/models/');
          anim.load('track.fbx', (anim) => {
            const m = new THREE.AnimationMixer(fbx);
            this._mixers.push(m);
            const idle = m.clipAction(anim.animations[0]);
            idle.play();
          });
          this._scene.add(fbx);
      });
  }

The same issue occurs when I load it into the

Here's a Picture from the Bottom Perspective

And Here's a Picture from the Top Perspective

When I exported it without animations, it displayed correctly on screen. Does anyone have any tips on exporting as FBX from Blender properly?

Answer №1

If you're encountering a similar issue, I was able to resolve it by increasing the thickness of my track and selecting "Apply Modifiers" during the export process in Blender.

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

The HTTP GET request was successful, however, there is no data being displayed on the screen

I am currently facing an issue with fetching data from a web server. The data is retrieved successfully as I can see the object in the console log, but it does not render in the component template. export class CountrydetailsComponent implements OnInit { ...

Initiating Database Countdown (date)

My goal is to create a live countdown timer that updates based on the date retrieved from a MySQL database, without the need for manual refreshing. Here's the code snippet: <?php $date = strtotime($row_tournaments['date']); $re ...

What methods are available for implementing hover effects within attributes using a JavaScript object?

const customPanelStyle = { 'background-color': 'red', 'border': '1px solid green', ':hover'{ 'background': 'blue' } } class some extends React.Component{ rende ...

Displaying information in Angular2

I'm currently facing an issue where I am unable to display certain information from my API in my view, even though the console is showing me that the necessary data is being retrieved. Below is a snippet of my Angular service: getById(id){ retu ...

Tips for simulating a dropdown selection from a remote location

I have multiple dropdown selection menus where changing the option in one menu affects the options in the next menu, and so on. I want to programmatically trigger a change (without user interaction) in the dropdown menu that will activate the JavaScript f ...

AngularJS allows for the execution of several asynchronous requests to a single API function, each with unique parameters

How can I asynchronously call 3 independent API methods so that as soon as any one of them has completed, I can work with the response without waiting for the others to finish? I am looking for a solution similar to System.Threading.Tasks in C#. var pro ...

Encountering an ERROR with the message "Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError" while attempting to apply a filter to

My mat table includes a filter that utilizes chips to sort by multiple criteria. Upon my initial attempt to filter and save the criteria, I encountered an error called ExpressionChangedAfterItHasBeenCheckedError. The error message indicates a transition f ...

Creating a Duplicate of the Parent Element and its Child Elements using jQuery

Here is a code snippet I have that adds a new paragraph when a button is clicked. Currently, the script clones the "sub" div and appends it to the "main" div. However, the issue is that it only copies the content of the "inner" div within the "sub" div ins ...

Fixing font conversion using fontface.js is a straightforward process that can be easily achieved following

In my three.js scene, I am trying to create text using the THREE.TextGeometry class. Unfortunately, the text is not rendering correctly due to issues with curves, as shown in the image below: https://i.sstatic.net/sdbPk.jpg The characters with straight ...

"Enhance your three.js experience with a zoom-in feature at

Currently, I am utilizing three.js and THREE.OrbitControls for animating my project. However, I am facing difficulty in figuring out how to change the zoom level with a button click. After some research, it seems like these functions are responsible for ha ...

Creating a new row dynamically in reactable is a useful feature that can enhance the

My goal is to add a new row when clicking on an accordion, specifically while expanding using reactable. I have included the expected outcome below. I have displayed structured data in a table using Tr and Td from reactable, but I am uncertain how to add t ...

Discovering a user's role in a WordPress site within an Angular application

I am currently in the process of integrating an Angular application into a WordPress theme. Certain Angular components need to verify if a user is logged in and has a specific role in order to display certain content. Since WordPress is built on PHP and An ...

I'm curious as to why my NodeJS application, once packaged with Zeit pkg, is functioning as a background process specifically in Linux Mint Cinnamon 19

Welcome! Currently using Linux Mint Cinnamon 19.1, I am working on a NodeJS project and aiming to package it into a single executable utilizing zeit pkg, targeting both Linux and Windows platforms. The packaging process is going smoothly, but... An Issue ...

Is there an easier method to utilize ES6's property shorthand when passing an object in TypeScript, without needing to prefix arguments with interface names?

When working with JavaScript, I often find myself writing functions like the one below to utilize ES6's property shorthand feature: function exampleFunction({param1, param2}) { console.log(param1 + " " + param2); } //Usage: const param1 = "param1" ...

What is the proper method to trigger a re-render of a React functional component with the useEffect

Within my top-level component, I am utilizing a library to determine if a user’s browser is in light or dark mode. This information is then used to set the theme for the application, which includes HTML Canvas elements (it's crucial to note that the ...

Having trouble resolving '@auth0/nextjs-auth0' during deployment on Vercel? Check out this error message: "Can't resolve '@auth0/nextjs-auth0' in '/vercel/path0/pages'"

I recently deployed a project on Vercel and have been working on enhancing the layout to achieve a minimum viable product (MVP). As part of this process, I decided to switch my authentication method to @auth0/nextjs-auth0 package for Next.js. After running ...

What are some alternatives for appending after something?

<table border="2"> <tr><td>one</td><td>two</td></tr> <tr><td>one</td><td>two</td></tr> <tr><td colspan="2" id="new" >add new</td></tr> </ta ...

Using jQuery to determine if a radio button has been selected on a price calculator

Having a JavaScript code that calculates the total price based on radio/checkbox selection. JQUERY var price = 0; $('.price-input').click(function () { if ($(this).is(":checked")) { price += parseInt($(this).attr("data-price"), 10); ...

Calculate the size of an array containing non-consecutive indices

Have you ever noticed how JavaScript's .length property calculates the length of an array by adding one to the last numerical index? Do you know a solution for accurately determining the element length of arrays with non-consecutive indexes? //Perf ...

Tips for accessing the "data" of a PHP array using AJAX

My code snippet using Ajax: $.ajax({ type: 'post', url: 'url.php', dataType: 'JSON', success: function(data) { id = // Need to extract the ID data from 'data' } }); ...