Loading textures with Collada loader in Three JS

Encountering an issue with the threeJS collada loader. Upon receiving a dae model with all its textures from the backend, I parse the images (textures) and create an array of materials.

let materials = [];
textures.forEach((texture) => {
  let loadedTexture = THREE.ImageUtils.loadTexture(texture.url);
  let material = new THREE.MeshPhongMaterial({ map: loadedTexture });
});

https://i.sstatic.net/Xm05x.jpg

Subsequently, when loading the dae model, I attempt to update my array with materials:

colladaLoader.load(daeModelFile, (collada) => {
  let model = collada.scene;

  dae.traverse( ( child ) => {
    if ( child instanceof THREE.Mesh ) {
      child.material = materials;
    }
  });

  mainScene.add(model);
});

However, instead of achieving this result: https://i.sstatic.net/9fB6n.jpg

I end up with this outcome: https://i.sstatic.net/Oea7A.jpg

Answer №1

If you're working with a dae file using THREE.ColladaLoader2, there's no need to manually add textures - the loader takes care of that for you. To see an example, check out the source code here:

By the way, it's recommended not to use THREE.ColladaLoader anymore as it's an outdated version. Instead, switch to THREE.ColladaLoader2 which will be introduced in the upcoming release.

R87

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

Adding the Authorization header in an Ajax request within ExtJS can be easily done by including the

I've been struggling to upload a file using ExtJS and web API. The issue I'm facing is that when trying to send an authorization header to the server, it always returns as null. I even attempted to include the header in the XHR request within the ...

Using Styled components and react-router-dom v6 to emphasize the active navigation link upon clicking

I'm just starting out with react and I am trying to figure out how to keep my hover style active while the current page is open. I think I need to set a condition but I am not sure how. const StyledLi = styled.li` `list-style: none; displa ...

What is the reason behind the failure of next/script with Google reCAPTCHA?

Currently, I am in the process of upgrading from next js version 8 to version 11. I wanted to take advantage of the amazing next js feature for "next/script". However, when I tried to implement it for Google reCAPTCHA using "react-recaptcha": "^2.3.10", th ...

`Are you incorporating Material UI tabs with React Router in your project?`

Looking for help with a project utilizing react/typescript. Here's the react router configuration: const Root = () => ( <> <NavBar/> <Router> <Route path="/" component={Home} /> <Route ...

Unable to customize the appearance of the error page that pops up when JavaScript is not enabled due to restrictions on media-specific

I'm currently working on enhancing my website by adding a custom error page specifically for when javascript is disabled. I've already implemented a component within _document.js <body> <noscript> <ErrorPage /> & ...

New parents, same name D3.JS

Currently utilizing d3.js to visualize a tree structure. When parsing the JSON object containing nameOfNode and NameOfParent, encountering an issue when there are two nodes with the same name. Seeking recommendations on the most effective way to address ...

Is combining Nuxt 3 with WP REST API, Pinia, and local storage an effective approach for user authentication?

My current project involves utilizing NUXT 3 for the frontend and integrating Wordpress as the backend. The data is transmitted from the backend to the frontend through the REST API. The application functions as a content management system (CMS), with all ...

Combining 2 objects in vue.js that share a common field name

Currently, I am attempting to merge two objects based on a shared key, specifically when they have two fields with the same name but differing values. var players = [{ id : 'a', name : "player1",team:1},{ id : 'b', name : &quo ...

Establishing connections to numerous databases using ArangoDB

I am currently developing a product that involves the dynamic creation of a new database for each project, as new teams will be creating new projects based on their specific needs. The backend of the product is built using Node.js, Express.js, TypeScript, ...

Is there a way to transmit data to another page upon clicking a button?

Greetings! As I work on developing an ASP.NET JavaScript application in SharePoint, I encounter a specific issue. My project consists of two pages: default.aspx and addnewitem.aspx. On the default.aspx page, there is a gridview with an edit button. Ideally ...

Using the "i" parameter in a Lodash for loop results in undefined, however, it functions properly with specific values set

My goal is to use Lodash to search for specific integer values in an object and then store some of those values in an array. The integers are variable and come from a separate array, but I am consistently getting undefined as the result. If I manually inp ...

Is there a way to automatically adjust the size of an input field after dynamic spans have been

I am looking to replicate the tagging functionality found on StackOverflow when posting a new question. In this case, spans are dynamically added using an input field located next to them. Here is an example: <div> <div id="multiple-span"&g ...

Unexpected reduce output displayed by Vuex

In my Vuex store, I have two getters that calculate the itemCount and totalPrice like this: getters: { itemCount: state => state.lines.reduce((total,line)=> total + line.quantity,0), totalPrice: state => state.lines.reduce((total,line) = ...

Retrieve all elements from an array that has been imported through the fs module

To extract the values from the array jsonParsed.students[actStudent].evnetsPartaken, which may look like [1,2,0] (note: check attachments for full data), I need a way to reference each value in correlation to the event number in the configEvents JSON array ...

What is the best way to implement a custom NgbDateParserFormatter from angular-bootstrap in Angular 8?

Currently, I am working on customizing the appearance of dates in a form using Angular-Bootstrap's datepicker with NgbDateParserFormatter. The details can be found at here. My goal is to display the date in the format of year-month-day in the form fi ...

Saving a jimp resized image in a mongoDb database: A step-by-step guide

Does anyone have advice on saving a resized image using Jimp directly to MongoDB database in a Node.js project with Express, Multer, and GridFS? The write method I am currently using only writes to a folder. ...

Are your file uploaders malfunctioning by saving empty image files?

I am currently working on a file uploader using JavaScript and Classic ASP. The process involves importing an image into a canvas, converting it to a base64 URL, and then sending that URL to the ASP script for decoding and downloading. Although my AJAX re ...

I am facing an issue where the module pattern functions perfectly on JSBin, but fails to work properly

As a backend developer, I typically only write JavaScript when absolutely necessary, and not always in the best way. However, I have decided to turn over a new leaf and start writing more organized code that follows best practices as much as possible. To ...

Error message: double AJAX call detected within an AJAX response

Currently, I am working on integrating a file with an API. The API initially sends some HTML and JavaScript to generate a search form, which is followed by processing the query from that search form. The issue arises when I attempt my second request, trig ...

Encountering issues with scope: Unable to retrieve value and receiving an error message stating 'Cannot assign value to undefined property'

var mainApp = angular.module("Main", []); mainApp.controller("CtrlMain", [ function ($scope) { $scope.amount = 545 }]);` var app = angular.module("Main", []); app.controller("MainCtrl", [ function ($scope) { $scope.value = 545 ...