Create a dynamic fbx model complete with textures and animations using three.js

I have been working on showcasing "animated 3D Models" on a webpage. These models come in the form of .obj, .mtl & .fbx files, some with textures and some without. I've managed to display .obj 3D Models on the webpage successfully (with texture and mtl file), but I'm facing difficulty in displaying .fbx 3D animated models with texture.

I've already searched extensively on Google, Stack Overflow, and Github (https://github.com/mrdoob/three.js/issues) but haven't found any solutions yet.

Here, I have two questions:

  1. Is it possible to showcase fbx 3D Models with texture using three.js?
  2. If it's possible, then how can I achieve this OR if not, what are the alternative methods available to render an fbx model with texture on a webpage?

Answer №1

Through extensive research, I have come to the realization that using a .fbx model file directly with three.js (up to r82) is not possible. However, there are alternative methods such as converting the .fbx file to .json (using the three.js Maya exporter) or .js (using Blender). Therefore, I have decided to proceed with the .json file format. Special thanks to @mlkn for your recommendation.

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

How to Get into a Nested Class in JavaScript

I'm struggling to articulate my question, but I know there's a solution out there. I have profile cards in HTML, each with the class "card" containing two numbers. My goal is to display a progress bar specific to the % relationship of these numbe ...

Tips for accessing an Angular service from different Angular controllers

I am a beginner with angular js and I am currently exploring ways to call the service provided in the code snippet below from a controller. The service is defined as follows. app.factory('myappFactory', ['$http', function($http) { v ...

Create custom dynamic asset tags in AngularJS inspired by Mixture.io's features for seamless HTML templating

Curious about the potential for creating dynamic asset tags within Angular and, if so, the method to achieve this. Here's the backstory: I've been utilizing Mixture.io for templating and have become accustomed to its seamless and adaptable natur ...

Dealing with cascading menu in knockout viewmodel

I have incorporated knockoutjs into my current project. One particular requirement I encountered was the need to create a nested menu within my viewmodel. Here is how I implemented it: self.menu = [ { name: 'Services', su ...

Tips for sending a reply following several requests to a third-party API in Node.js

I've been tackling a project that involves making numerous requests to a third-party API and then sending an array of the received data back to the client. Since the requests to the API are asynchronous, I'm encountering an issue where if I place ...

Tap on the child to reveal their parent

I am working with a family tree that includes dropdown menus containing the names of parents and children. Each child has a link, and when I click on a child's link, I want their father to be displayed in the dropdown menu as the selected option. Can ...

My stored variable in the php session is not being recalled properly

Currently, my PHP script is generating new files based on user input. I want all documents to be created using the initial input to ensure consistency. In the first PHP script, I set the variable as follows: session_start(); $_SESSION["FirstName"] = $_POS ...

Problem identified with Vue.js: The Log in screen briefly flashes before redirecting the authenticated user (resulting in a full page refresh)

My routing is functioning properly, utilizing navigation guards to prevent users from accessing the login or register routes once they are signed in. However, when I manually type '/auth/signin' in the address bar, the login screen briefly appear ...

Using Grails to create remote functions with multiple parameters

Currently, I am able to send one parameter to the controller using the code snippet below in Javascript: <g:javascript> var sel = "test"; <g:remoteFunction action="newExisting" method="GET" update="updateThis" params="'sel='+s ...

When a React page is re-rendered using useEffect, it automatically scrolls back to the

Every time I utilize the <Tabs> component, the onChange method triggers the handleTabChange function. This leads to the component being called again and after repainting, the useEffect is triggered causing the page to scroll back to the top. How can ...

receiving onPaste or onChange events within a component that generates input fields

My goal is to achieve the following functionality: <MyTextInput onChange={console.log("Change")} /> This particular component serves as a container for <input type="text" /> without triggering any action when text is typed (the purpose of usi ...

When is it necessary to use JSON.parse(JSON.stringify()) with a Buffer object?

I am currently working with Buffer objects in my existing code. let dataObject = JSON.parse(JSON.stringify(data)); At first glance, it seems like the above code is redundant and doesn't achieve much. However, replacing it with: let dataObject = data; ...

The connections between children in the Highcharts Org chart are getting tangled up

I am facing an issue with the organization chart I created using highcharts. Specifically, at the 3rd level, the links are becoming merged or overlapped with other child links. The data for the chart is being sourced from an ERP system and contains informa ...

Updating a global variable in Angular after making an HTTP call

I'm facing a challenge where I have a global variable that needs to be updated after an HTTP GET call. Once updated, I then need to pass this updated variable to another function. I'm struggling to figure out the best approach for achieving this. ...

Managing dependencies in YARN or NPM by ensuring the installation of package versions that are compatible with specific dependency versions

Consider a scenario where the dependencies section in the package.json file looks like this: "dependencies": { "A": "1.0.0" } Now, let's say that the current version of package A is 3.0.0, but for our project we specifically need version 1.0 ...

What sets apart BufferGeometry from merged geometry in THREE.js?

From my understanding, BufferGeometry offers computational efficiency. Merged geometry, on the other hand, is efficient as it consolidates into 1 render call. I find creating a merged geometry to be simpler, especially for beginners like myself. Aside fro ...

Managing simultaneous access to a variable in NodeJS: Best practices

For instance: var i = 0; while(true) http.request('a url', callback_f); function **callback_f**(){ **i++**; } In this straightforward scenario, multiple requests could unintentionally increase the value of i simultaneously. How can I creat ...

Refreshing a page occurs every 30 seconds or upon the user submitting a form

My PHP page consists of various includes for different sections of a video website. One of these sections is a comments area where users can submit their feedback to a database successfully. However, I want to ensure that only the specific included page/di ...

What causes the Woocommerce checkout button to be blocked on the checkout page?

I am perplexed by WooCommerce's decision to block this section of the screen with an overlay. Under what circumstances would it do so? checkout page screenshot ...

Arranging HTML elements using JavaScript or jQuery

Something seems off. The sorting doesn't work as expected. Check out the JavaScript code below: function sortDescending(a, b) { var date1 = $(a).data('date'); var date2 = $(b).data('date'); return date1 > date2; } ...