Unexpected outcome when applying texture to Collada mesh in Three.js

After following the Three.js ColladaLoader example, I exported a Cinema4D soda can model (made up of 4 meshes) to a .dae file. I am specifically trying to add a texture to the body of the can.

In Cinema4D, I created a texture based on a UV map of the mesh (spherical). However, when I attempt to apply the texture to the mesh, it only displays as a solid white fill. The relevant code has been included in this Codepen. Here is a brief snippet:

loader = new THREE.ColladaLoader();
loader.load('can.dae', function (collada) {
    can = collada.scene;

    can.traverse(function (node) {
        var textureLoader

        if (node.name == 'wrapper') {
            textureLoader = new THREE.TextureLoader();

            textureLoader.load('wrapper.png', function (texture) {
                node.material = new THREE.MeshBasicMaterial({
                    map: texture
                });

                node.material.needsUpdate = true;
            });
        }
    });

    scene.add(can); 
});

The image below illustrates the issue. Despite providing a red wrapper.png texture, the can's wrapper appears as a solid white fill. I have experimented with various mapping and wrapping modes without success. Any assistance would be greatly appreciated!

https://i.sstatic.net/7cb6L.png

Just to clarify, CORS issues have already been ruled out.

Answer №1

After incorporating a cube into your loader and applying the material, it functioned as expected. This suggests that there may be issues with the UV coordinates assigned to your mesh. It's possible that your authoring software is utilizing an automatic cylindrical mapping method that isn't exporting the UVs correctly. What specific software are you using for authoring?

            scene.add(new THREE.Mesh(new THREE.BoxGeometry(1,1,1),node.material));

https://codepen.io/manthrax/pen/ePBZbZ?editors=1001

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

Create an unordered Vue component object

In the data retrieved from the backend, there is an object containing various properties, one of which is the 'average' value. This object is ordered based on that value and when accessed through Postman, it appears as follows: ranking: ...

Encountering difficulties in running bootstrap on nodejs

As a beginner in node.js and bootstrap, I am eager to create my own personal website, so I found some tutorials to help me get started. After downloading bootstrap 2.0.2 and unzipping it, I organized the files by placing bootstrap and bootstrap-responsive ...

how to change visibility with Javascript

As I work on creating a menu using HTML and JavaScript, I've designed it to be a grid layout with 3 rows and 2 columns. The menu contents are also structured in a grid format. When the screen width is reduced, the layout changes to a single row and co ...

Unable to fetch the session variable using express-session

In my development work, I have been utilizing express-session for persistently storing sessions on a MongoDB database. While the project functioned flawlessly in a test environment, an issue arose when deploying to a production setting where the session v ...

Check to verify if a MongoDB Collection insertion was successful using Meteor.JS within the Template

The scenario at hand Let's simplify this query into a basic to-do list format with entries displayed in an unordered list: //main.html <ul> {{ #each listEntries }} <li class="item"> {{ title }} </li> {{ /each }} </ul> ...

What is the best way to implement switchMap when dealing with a login form submission?

Is there a better way to prevent multiple submissions of a login form using the switchMap operator? I've attempted to utilize subjects without success. Below is my current code. import { Subject } from 'rxjs'; import { Component, Output } ...

How can I ensure that a CSS2DObject is positioned above another CSS2DObject? Is there a method to display it above all other objects within the scene?

Is there a method to position one CSS2DObject on top of another or above all other CSS2DObjects in the scene? ...

Collapsed on Load Vertical Collapsible Panel - Initially hidden panel on page load

Is there a way to load a <div> already collapsed when the page first loads? You can find my progress so far in this JS Fidle. HTML <button id="aa">Toggle it up</button> <div id="test">TEST</div> CSS div { background ...

Error encountered during AJAX request even though the data was successfully updated. The message "Unexpected Token <" was unexpectedly received

I am facing a specific issue with my code and unable to find a solution. The problem arises when I make an AJAX request to send some data to the server for updating the database. Although the data gets updated correctly in the database, I encounter an erro ...

Creating a personalized dropdown menu in react-draft-wysiwyg: A step-by-step guide

I am looking to incorporate a custom dropdown menu into the toolbar section. Here is an image that shows what I want for the dropdown menu. Can this be done? <img src="https://i.imgur.com/OhYeFsL.png" alt="Dropdown menu editor"> You can view a mor ...

Creating a dynamic Three.js fullscreen application with a responsive web form and text overlay

(Just to clarify, I'm seeking advice on how to make my app responsive, not asking how to create it) I've been developing a web application that utilizes Three.js to display a scene across the entire window. My goal is to incorporate a configurat ...

Utilizing optional parameters with React Router

Imagine I have a page at http://www.example.com/page/#/search set up with the following routing: <Router history={hashHistory}> <Route path='/search/' component={SearchPage} /> </Router> When a user performs a search using t ...

I keep receiving an error in Angular JS but I'm unsure of the reason

I've been working on AngularJS and created a basic module and controller. I'm attempting to show the data of an element inside the controller on the HTML view page, but all I see is {{student.name}} and I'm receiving an error message that sa ...

Assurance that request does not result in any value being returned

I have come across this interesting challenge: function getAPI(token) { return new Promise((resolve, reject) => { console.log("Requesting API"); GM_xmlhttpRequest({ method: "GET", url: "URL"+token, onload: function(respo ...

Transferring information from Node.js to HTML with the help of EJS template engine

Below is the Server Side code I am using: app.set('view engine', 'html'); app.engine('html', require('ejs').renderFile); app.use(express.static('views')); app.use(bodyParser.urlencoded({extended:true})); a ...

Utilizing the Power of Magicline in Conjunction with Flexslider

Currently, I am implementing Flexslider for a slideshow on my website and I am attempting to integrate Magicline with it. The functionality is working well, but I have encountered an issue where the magicline does not move when clicking on the navigation a ...

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

Hello everyone, I am looking to have my vertical menu slide from right to left instead of the typical top to bottom sliding that comes with using .toggle() in jQuery. Specifically, when the hamburger menu is clicked, I want the menu to slide out from right ...

React - Attempting to access property X from an undefined variable

Trying to access the string in section1.text, but my console is showing: https://i.stack.imgur.com/ox8VD.png Here's the JSX code I'm using: return ( <div> <h1>{this.props.article.title}</h1> ...

Printing from a Windows computer may sometimes result in a blank page

Looking to incorporate a print button into an HTML page, I'm facing an issue. The majority of the content on the page should not be included in the printed version, so my approach involves hiding everything in print and then showing only the designate ...

Typescript Tooltip for eCharts

I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...