Exporting Colada textures for use in Three.js

I have some files in .FBX format that need to be converted to Collada so I can use them in Three.js. While I was able to convert them using FBX Converter, I discovered that the textures were lost in the process. How can I convert these files while retaining the textures?

Here is a link to one of the models converted with FBX Converter: pearl.dae

Additionally, here is a link to another model which I exported as FBX_DAE in Maya 2013: model2.dae I simply imported the FBX and exported it as FBX_DAE.

The model exported in Maya has textures when doing a quick preview on Mac, but when loaded in Three.js, the textures are missing.

Similarly, the pearl.dae file converted with FBX Converter also lacks textures both in quick preview and in Three.js.

Below is my loader code:

var Loader = new THREE.ColladaLoader();
        Loader.options.convertUpAxis = true;
        Loader.load('./models/pearl.dae', function(collada){
            Bracelet = collada.scene;
            Skin = collada.skins[0];

            Bracelet.scale.x = Bracelet.scale.y = Bracelet.scale.z = 1;
            Bracelet.updateMatrix();

            init();
            render();

        });

If anyone could provide assistance, it would be greatly appreciated.

Answer №1

After reviewing your model files, I noticed that the pearl.dae file does not make any references to textures. It is recommended to review your FBX converter settings and address any errors or warnings that may arise. On the contrary, model2.dae does reference a texture with the relative path of "../../Model/Nialaya_perla.fbm/Perla_diffuse.jpg" (please note that the texture is located outside of the model file). I am uncertain if Three.JS will automatically load textures from Collada model files, but if the path is incorrect, it will result in failure. Based on my experience with Three.JS, it is generally more effective to manually load textures, create shaders, and apply them to simple models using code. This approach allows for greater control over the final appearance.

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

Comparing the benefits of using pure() versus React.PureComponent

Can someone help me understand the distinction between the pure() function in the Recompose library and React.PureComponent? It seems like they both aim to tackle a similar issue. Any insights would be appreciated. ...

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

What causes the discrepancy in results between Javascript sha1 and PHP5 sha1 when generating hashes for utf-8 strings?

I'm facing an issue with utf-8 characters in a string. The PHP sha1 and Javascript sha1 are generating different codes for the same string "abc艾". Can anyone assist me with this? Thank you in advance. PHP code: $str = "abc艾"; $result = sha1($st ...

Converting data to a JSON string using jQuery's AJAX method

When I use document.write() for JSON data, it works fine outside of the AJAX call, but not inside the .done() function. I even tried removing the dataType: 'json' parameter, but it still didn't work. $.ajax({ url: "http://api.wundergrou ...

Determine the length of the string using an angular design

I have an input field and a span set up like this: <input type="password" name="account_password" placeholder="Enter your new password" autocomplete="off" ng-model="res.account.new_password" required="" ng-minlength="res.minlength" class="form-control" ...

Troubleshooting issue: Ajax jQuery post method not functioning properly when querying MySQL database through PHP

I am facing an issue with my HTML form where a JavaScript function is supposed to run on page load. The function sends a town name via an Ajax post call to a PHP function in order to retrieve details from a MySQL database. Here is the Ajax call within the ...

The issue of empty req.body in POST middleware with Medusa.JS

Feeling completely frustrated with this issue. Grateful in advance to anyone who can lend a hand. Any insights on why req.body is showing up empty? Medusa.JS should be utilizing bodyParser by default, correct? It was functioning fine earlier today but now ...

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

Passing props to component data in Vuejs: Best practices

I'm experimenting with Vue 2.0 and I've encountered a bit of confusion. How can I properly pass props to a component's internal data? I've followed the documentation, but it still seems unclear. HTML <service-list :services="model"& ...

Bring in content using transclusion, then swap it out using AngularJS

I am looking to develop a custom directive that will transform : <my-overlay class="someOverlay"> <h4>Coucouc</h4> </my-map-overlay> Into : <div class="someOverlay default-overlay"> <h4>Coucouc</h4&g ...

JavaScript code encounters difficulties parsing HTML source

I'm attempting to reconstruct the WhateverOrigin service, which can be found at this link: Nevertheless, when I try running it in my web browser, this code that functioned perfectly with WhateverOrigin no longer functions properly with my imitation s ...

Tips for effectively closing div elements

How can I modify this accordion to close when a user clicks on another link, and also change the image of the open "p" tag? Currently, clicking on a link toggles the content and changes the image. However, what I am struggling with is closing the previousl ...

What are the reasons behind the unexpected behavior of the replace() method in the newest Safari update?

What is causing the JS method replace() to behave incorrectly in Safari version 11.1 when using "$<" in the second argument? For example: "aaaXXXbbb".replace(/XXX/, '_before_$<_after_') The actual result is: "aaa$<_after_bbb" The ex ...

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

Creating a stylish navigation bar with custom components using Material UI and React

I've been experimenting with the BottomNavigation component from Material UI, but instead of using labels and text, I want to incorporate custom-made ImageButton components. Here's the code snippet from Material UI: import React from 'rea ...

Receiving a response from an XMLHttpRequest() within a function

I've come across a situation where I have a function called isOnline(), and here's how it looks: function isOnline() { var request=new XMLHttpRequest(); request.onreadystatechange=function() { if(request.readyState==4) { ...

Executing JavaScript - Triggering an 'onClick' event within a For loop to dynamically load multiple hyperlinks

I am currently working on creating a listview using JSON data. However, when I call an 'onclick' function from a For loop, the link opens in a new window and loads three URLs into the browser's URL input. Is there a way to modify the code be ...

Retrieving information from Firebase using React

Is there a way to retrieve data from Firestore? import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; const firebaseConfig = { apiKey: "AIzaSyCNBAxjeKNoAPPjBV0 ...

Utilizing the spread syntax for elimination

I want to remove a key. Check this out console.log(state); When I do, I get {1: {here is next object}}, next const { 1: deletedValue, ...newState } = state; console.log(newState); console.log(state); But then I end up with {1: {here is next object}} ...

Next.JS: The Key to Long-Term Data Storage

How can we retrieve and maintain data during app initialization or user login so that it persists throughout the application? Currently, every time a page is refreshed, the context is cleared and attempting to use getServerSideProps results in undefined ...