The texture fails to display upon loading the .dae model

I'm attempting to load a .dae model in three.js, but it seems like the texture is not loading. Here is my code snippet:

<script src="js/three.js"></script>

    <script src="js/Animation.js"></script>
    <script src="js/AnimationHandler.js"></script>
    <script src="js/KeyFrameAnimation.js"></script>

    <script src="js/ColladaLoader.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/stats.min.js"></script>

    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        //load collada
        var loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        loader.load('model/Wood.dae', function(collada){
            collada.scene.traverse(function (child){
            if(child instanceof THREE.SkinnedMesh)
                {
                    var animation = new THREE.Animation (child, child.geometry.animation);
                    animation.play();

                    camera.lookAt( child.position );
                }
            });

        scene.add(collada.scene);
        });

        camera.position.z = 10;

        var render = function () {
            requestAnimationFrame( render );
            renderer.setClearColor(0xffe5e5, 1);

            renderer.render(scene, camera);
        };

        render();

I am eager to customize the material, and have tried following various tutorials without success. Any helpful pointers?

Answer №1

This is how I managed to achieve it:

function applyNewTexture(texture){
            dae.traverse(function(element){
                if(element instanceof THREE.Mesh){
                    element.material.map = texture;
                    element.material.needsUpdate = true;
                }
            });

I found success using TextureLoader to load the texture.

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 a child node before an empty node in Chrome with JavaScript Rangy

When attempting to insert a node before an empty element at the start of another element, a problem was noticed. Here is the initial setup: <p>|<span />Some text</p> By using range.insertNode() on a Rangy range to add some text, Chrome ...

The imported package is not functioning properly within the project

I've recently developed a Typescript Package and I want to test it in an application before publishing it on NPM. The main file (index.ts) of the package is structured like this => import Builder from './core/builder'; export default ...

"Utilizing JSON data to implement custom time formatting on the y-axis with AmCharts

Looking to convert minutes to hh:mm:ss format in my JavaScript code var allDataTime = [{ date: new Date(2012, 0, 1), "col": "LONG CALL WAITING", "duration1": '720', "duration2": '57', "duration3": ...

Pause the execution of an AJAX callback function after numerous AJAX requests

I have two separate Ajax calls in my code. Both of them have different callbacks that need to execute upon successful call. $.ajax({ type: 'POST', url: "url1", success: foo1 }); $.ajax({ type: 'POST', url: "url2", ...

Is it possible to use jQuery for drag-and-drop functionality?

Currently, I am working on developing a drag-and-drop widget that consists of 3 questions and corresponding answers. The user should only be able to fill in 2 answers in any order, while the third drop area should be disabled. This third drop area can be l ...

Begin by executing the initial commit task with Git through Gulp, followed by performing the

I am currently working on a project and I am trying to use gulp to commit and push to git. However, I am encountering an issue where the push task is not waiting for the commit task to complete before running... Can anyone assist me with this? I want to s ...

Tumblr jQuery Like (utilizing rel attribute for selection)

I developed a custom HTML5 theme using masonry and infinite-scroll, which has been functioning well. I am now trying to add reblog and like buttons to each post but I'm facing an issue with the like button not working. Here is the URL to the theme: ...

preventing the ball from landing inside the container (JavaScript)

I developed a straightforward website with the following functionality: Upon entering any text into the prompt and clicking okay, a ball will drop into the 1st box, namely the Past Thoughts box. Below is the code snippet: HTML <h1> Welcome t ...

The Discord.js Avatar command does not support mentioning users

Everything seems to be working fine when I check my own avatar, but it doesn't work properly when I mention another user. Here's the code I'm using: client.on('message', message => { if (message.content === `${prefix}ava`) { ...

What is the best way to enlarge text size with jquery?

I am attempting to: $('a[data-text="size-bigger"]').click(function () { a=$('span'); b=$('span').css('font-size'); a.css('font-size', b+1); } ); Initially, I ha ...

JavaScript's replace() method and the $1 issue

My goal is to develop a script that can identify specific patterns within text and then enclose them in particular tags upon identification. $(".shop_attributes td").each(function () { $(this).html(function(i, html) { return html.replace(/E[0- ...

In Safari, the scrollbar appears on top of any overlays, popups, and modals

On my webpage, I have a div with the CSS property overflow-y: scroll. The page also features several popup modals and overlays. Strangely, the scrollbar of the div appears on top of these overlays instead of behind them. I attempted to resolve this issue b ...

Interactive hexagon shape with dynamic image content on click using a combination of CSS, HTML,

As a beginner in CSS, HTML, and JavaScript, I came across a code snippet to create a pattern of hexagons with images (refer to the first code below). My goal is to change the image displayed on a clicked hexagon to another picture (see second code). First ...

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

Troubleshooting undefined results when dynamically loading JSON data with $scope values in AngularJS

My input field is connected to the ng-model as shown below. <div ng-app="myApp" ng-controller="GlobalCtrl"> <input type="text" ng-model="FirstName"> {{FirstName}} </div> In my controller, console.log $scope.FirstName shows m ...

Getting the click event object data from a dynamically created button with jQuery or JavaScript

I have a task of tracking page button click events. Typically, I track the objects from statically created DOM elements using: $('input[type=button]').each(function () { $(this).bind('click', function () { ...

Right-click context menu not working properly with Internet Explorer

Seeking assistance with extracting the URL and title of a website using JavaScript. The script is stored in a .HTM file accessed through the registry editor at file://C:\Users\lala\script.htm Below is the script: <script type="text/java ...

Are there any drawbacks to converting all instance methods into arrow functions in order to prevent binding loss?

What are the potential drawbacks of converting all instance methods into arrow functions to avoid the "lost binding" issue? For example, when using ReactJS, the statement onClick={this.foo} can lead to lost binding, as it translates to createElement({ ... ...

The number of articles in the MongoDB database is currently unknown

Currently, I am in the process of developing a blog using nodejs, express, and mongodb with jade as the template engine. The folder structure of my project looks like this: project/ modules/ views/ index.jade app. ...

What are the steps to transforming a regular expression into a dynamic format?

I've developed a powerful regex that locates specific text within a lengthy string without spaces. Now I'm attempting to utilize it dynamically to search for various words, but I can't seem to make it function as intended. Check out my rege ...