Tips for swapping out textures imported from Collada with ShaderMaterial textures in Three.js

Is it possible to update the textures of a basic 3D model loaded using the Collada loader in the Three.js library?

My goal is to incorporate color, specular, and normal maps onto the model using ShaderMaterial by referencing new files with the model's material names followed by "-color", "-normal", and "-spec":

"brochureFrontCover" -> "brochureFrontCover-color.jpg", "brochureFrontCover-normal.jpg", "brochureFrontCover-spec.jpg"

If someone could provide guidance on how to create such a functionality, I would greatly appreciate it.

Script link:

Collada model link:

javascriptwebglthree.jscollada

Answer №1

My suggestion for the code would go like this:

When working with THREE.SceneUtils.traverseHierarchy( dae, function ( child ) {

    If ( child.material ) {

        Let shader = THREE.ShaderUtils.lib[ "normal" ];
        Let uniforms = THREE.UniformsUtils.clone( shader.uniforms );

        Set uniforms[ "tDiffuse" ].texture to THREE.ImageUtils.loadTexture( child.material.name + "-color.jpg" );
        Set uniforms[ "tNormal" ].texture to THREE.ImageUtils.loadTexture( child.material.name + "-normal.jpg" );
        Set uniforms[ "tSpecular" ].texture to THREE.ImageUtils.loadTexture( child.material.name + "-spec.jpg" );

        Enable diffuse texture by setting uniforms[ "enableDiffuse" ].value to true;
        Enable specular texture by setting uniforms[ "enableSpecular" ].value to true;

        Compute tangents for child geometry;

        Replace child material with a new THREE.ShaderMaterial( {
            uniforms: uniforms,
            vertexShader: shader.vertexShader,
            fragmentShader: shader.fragmentShader,
            lights: true
        } );

    }

} );

For more details on this topic, check out this example.

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

Transferring request body data between routes in Express: A guide

In my MERN application, there are two specific routes in place. The first route is designated for 'Storing Data' and is referred to as the 'data' route. The second route is used for 'Register User' functionalities and is known ...

javascriptnode.jsexpress

Unable to transfer content to clipboard from a Popper element nested within a Dialogue component in Material-UI

If you want to see the bug, try opening this link in Firefox. It almost crashed Chrome :P https://codesandbox.io/s/73z5293391 Click on the OPEN SIMPLE DIALOGUE button. A dialogue will appear, then click on the TOGGLE POPPER button. Now a Popper will be d ...

javascriptreactjsmaterial-uicopy-paste

Using knockout to retrieve the attribute value with an onClick event

Snippet of HTML View with attribute value 'Qref'. This is the sample HTML Code for binding Currently, I have manually inputted the Qref Attribute value <!--ko if:$parent.Type == 2 --> <input type="checkbox" data-bind="attr:{id: $data ...

javascriptjqueryknockout.js

Move the footer down to the bottom of the page

I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be d ...

javascriptjqueryhtmlcssfooter

What is the process for generating an HTTP response that results in a pipe error being thrown

In my NestJS application, I have created a custom pipe that validates if a given value is a valid URL. If the URL is invalid, an error is thrown. This pipe is utilized in a controller to save an item into the database. Recently, I discovered that the pipe ...

javascriptnestjspipehttpresponse

Is it possible for me to retrieve/load a <datalist> element from a different file?

I'm in the process of developing a Google Chrome extension that essentially consists of a dropdown menu and an input box with datalists. The user can change their selection in the dropdown menu, which will then switch the datalist being used by the in ...

javascripthtmlhtml-datalist

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

I am facing a dilemma where I need to determine the value of the 'width' property for a css class named 'foo' (example: ".foo { width:200px}" ). However, there may not be an element with this class in the dom yet. My goal is to retrie ...

javascriptcss

Enhancing React Functionality: Increasing React State Following an If Statement

Whenever I click on the start/stop button, it triggers the handlePlay function. This function then proceeds to initiate the playBeat function. In an ideal scenario, the play beat function should continuously display 1222122212221222... until I press the st ...

javascriptreactjsreact-hooksreact-functional-component

Retrieve information using the request npm package

Currently, I am in the process of developing an application with express js. My approach involves using request(v-2.88.2) to retrieve data from an api. request(url, function(error, request, body) { var data = JSON.parse(body); }); My goal is to utili ...

javascriptnode.jsexpressnpm-request

The asynchronous nature of how setInterval operates

I am working with a setInterval function that executes asynchronous code to make calls to the server: setInterval(()=> { //run AJAX function here }, 5000); In scenarios where the server does not receive a response within 5 seconds, there is a like ...

javascriptajaxecmascript-6setinterval

Change the location of an html td element with JavaScript

I am currently working on a simple JavaScript car racing game where the cars are represented by HTML table elements. I want to implement functionality where pressing the "e" key moves player one's car and the "d" key moves player two's car. This ...

javascripthtmlcss

Is it possible to submit two forms simultaneously using jQuery or AJAX?

My plan is to save 2 forms, with the first form providing the Foreign key for the second form. This is my attempt at saving this using JavaScript: $("#btnSave").click(function (e) { e.preventDefault(); $('#workForm').submit(); ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-3

converting the names of files in a specific directory to a JavaScript array

Currently working on a local HTML document and trying to navigate through a folder, gathering all the file names and storing them in a JavaScript array Let's say I have a folder named Videos with files like: - VideoA.mp4 - VideoB.mp4 How can I cre ...

javascripthtmlarraysfiledirectory

Preview multiple images while uploading in a React JS application

In order to achieve multiple image upload with preview using React JS, I attempted the code below. However, I encountered an error in the console: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This ...

javascriptreactjs

Encountering an issue with WebRTC where the 'addIceCandidate' function on RTCPeerConnection is failing, resulting in an error displayed on the console. However, despite this error

I am facing an issue with connecting two peers using webRTC. While I can successfully display both local and remote videos, as soon as the remote video appears, the candidate object turns null and an error message is logged on the console. TypeError: Fail ...

javascriptreactjsgoogle-chromesocket.iowebrtc

How do I determine the appropriate image type to use?

I'm a beginner in the world of Node.js and I'm currently working on an application that stores image files. However, I am unsure about what type of data the images should be. const userSchema = new mongoose.Schema({ userImage: { type ...

javascriptnode.js

Highlighting the home page in the navigation menu even when on a subroute such as blog/post in the next.js framework

After creating a navigation component in Next JS and framer-motion to emphasize the current page, I encountered an issue. The problem arises when navigating to a sub route like 'localhost:3000/blog/post', where the home tab remains highlighted i ...

javascriptreactjstypescriptnext.jsframer-motion

Explain the concept of DOM components in relation to refs within the React JS framework

Before this issue came up in the React documentation for ref forwarding, there was a mention: The concept of ref forwarding doesn't just apply to DOM elements. It can also be used with class components. There's a discussion on another platform ...

javascriptreactjs

Server-side WebSocket doesn't appear to be successfully transmitting messages to the frontend

Using NodeJs with Fastify on the backend in a local environment: Server side: ////// Setting up the app const fastify = require('fastify')({ logger: true }); const path = require('path'); fastify.register(require('@fastify/static& ...

javascriptnode.jswebsocketfastify

There was an error in Angular at core.js:6150 stating that the object is not iterable due to a

I am facing an issue in displaying the First Name of a user in an HTML file getFirstName(id: any){ this.users = this.afs.collection('users', ref => ref.where("uid", "==", id)).valueChanges(); this.users.subscribe(users => { ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2