The collada loader in three.js assigns the UV texture's color to every model in the scene

Apologies for my poor English skills. I am encountering an issue with the Collada loader in Three.js. In Blender, I have a cylinder with a UV texture applied to it, and when I render it everything looks fine. However, upon exporting and loading it into Three.js using the Collada loader, the color associated with the image gets applied to the entire model as shown here. Originally, the model is supposed to be red.

This is how I load my model:

 var loader = new THREE.ColladaLoader();

  loader.options.convertUpAxis = true;

  loader.load( 'untitled.dae', function ( collada ) {

    var dae = collada.scene;

    var skin = collada.skins[ 0 ];

dae.position.set(0,0,0);
dae.scale.set(25,25,25);

Here is a link to my Collada file if you want to take a look. What could be going wrong here? Is there an issue with the way I am exporting the model or am I missing some attributes during the export process? I am relatively new to web 3D programming.

Answer №1

My solution was to stop creating separate materials for color and texture, and instead switch to using obj/mtl import in Blender. This resolved my issue. Also, don't forget to clip the image texture in the Blender texture settings under image sampling.

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 vanishing act: Semantic UI menu disappears when you click

My objective is to create a persistent left-side menu using Semantic-UI. I want to implement two different states for the menu - one with text for each item and another with an image for each item. However, I am facing some challenges that have me complete ...

Ways to locate the origin of a connect ECONNREFUSED issue in node.js

I recently inherited a complex nodejs application that communicates with 5 other applications via various network interfaces, mainly HTTP REST APIs. Occasionally, I encounter errors that are caught to prevent the application from crashing, but I struggle t ...

How do you define a global variable with Javascript and Jquery?

I am attempting to create a global jQuery object variable in order to be able to access it from various functions. Here is my current approach: var object_list = $("#object_list"); var list_length = object_list.find("li").length; $(document).on('ke ...

`Getting smaller screen hides navigation menu - CSS problem`

As I work on developing my website, I have encountered a small issue with the top navigation bar. It functions perfectly at a certain screen resolution, but when I adjust the browser window or view the site on my iPad, the navigation bar disappears. I&apos ...

Developing in Java Script with ENVDTE involves adding a new project to an existing solution and placing it in a designated sub-folder for organization purposes

Currently, I am working on developing a Visual Studio extension for a new C++ project template using Visual Studio 2010. The approach I am taking involves utilizing the .vsz template method and customizing the default.js code to suit my requirements. Withi ...

Utilizing JSON and AJAX to mine data from databases

I've been working on creating a basic "search" box using Javascript, AJAX, PHP, and JSON. I'm focusing on the "world" database that I downloaded from the MySQL website for this particular project. I've hit a roadblock when trying to retrieve ...

The behavior of Ajax is resembling that of a GET method, even though its intended method

Greetings, I am currently facing an issue while coding in Javascript and PHP without using jQuery for Ajax. My aim is to upload a file over Ajax and process it in PHP. Here is the code snippet: index.html <html> <head> <title>PHP AJAX ...

Create a custom BoxGeometry with curved edges using Three.JS

Looking to create a curved BoxGeometry in Three.Js, but unsure of how to achieve it. The end result should resemble the image shown here: enter image description here My current code is as follows, however, it does not produce the desired curved effect. ...

Is there a way to replicate this elevation design using three.js?

I'm currently working on creating an earth mesh, and I'd like the surface to resemble the image below rather than using a standard bump map. Any assistance or guidance on how to achieve this would be greatly appreciated. Thank you! https://i.ss ...

What is the best way to keep an image in place so that text doesn't shift it?

TLDR: I am struggling with keeping an image in place on my website while text is dynamically added to the screen above it using JavaScript. In my coding course, we were tasked with creating a calculator that calculates total costs based on user input. I w ...

Slot context remains unclaimed

Context not available... Vue.component("custom-table", { name: 'CustomTable', template: "#custom-table", created: function() { console.log('Created', this.rows); }, mounted: function() { console.log(&a ...

Step-by-step guide to implementing a datepicker textfield with Vuetify 3

I'm currently exploring Vuetify 3 and aiming to implement a textfield that serves as a datepicker. For reference, you can find a similar example in the Vuetify 2 documentation here. Unfortunately, the Vuetify 3 docs do not yet include an example like ...

Troubles encountered during the installation of Visual Web Developer 2010?

Here is the situation I'm facing: After encountering some issues with PHP while working on an ASP.net project, I decided to reinstall everything. The installation of Apache, MySQL, and PHP went smoothly, but now I seem to be facing some problems. I ...

Debugging client-side TypeScript with Node

Is it possible to debug client-side .ts typescript files directly from Visual Studio (2015) with breakpoints and watches? Most solutions online recommend using browser devtools like Chrome. But can it be done in Visual Studio? After creating a .ts script ...

Navigating the Basics: Understanding the Four Quadrant Selection Grid in a Material UI & React Pop-Up Form

Sorry if these questions seem silly. I'm diving into React & Material-UI without a mentor to guide me, relying on documentation and tutorials. Is there a better place for quick beginner questions? Maybe a chat forum or Slack group? Not sure if Stack i ...

Setting the initial state for your ngrx store application is a crucial step in ensuring the

I'm completely new to ngrx and I'm currently exploring how to handle state management with it. In my application, each staff member (agent) is associated with a group of customers. I'm struggling to define the initial state for each agent ob ...

Issue with Ionic app causing code execution to hang when the Back Button is pressed

I am currently working on an application using Ionic and React. There is a page in the app where users can upload images from the camera or gallery, which are then saved as binary data in a database (indexed db using Dexie). Everything seems to be function ...

The process of converting an HTML Table into a secured PDF file using JavaScript

I am looking to export data from an HTML table to a PDF file using React JS or pure Javascript, with the requirement that the PDF file must be password protected. While researching, I found libraries such as jspdf, node-qpdf, and jsreport-pdf-password bu ...

Exploring Node and Express Request Query

I'm struggling with a specific endpoint setup in my code. // GET /api/logs/ app.get('/api/logs', function (req, res) { if (req.query.reverse === true) { res.send((mainModule.logs).reverse()); } else { res.send(mainModule.logs) ...

The condition is not functioning properly when the array's length is greater than 1

Within the primary controller, there is an if-else statement: var entity = shareDataService.getModalEntity(); if (entity = "NULL" || entity.length === 1) { myDataPromise = getDataService.getDataFromREST(security); console.log("HERE") } else { ...