Having difficulty altering the color of my 3D model using three.js

I'm currently facing an issue with my 3D gltf model of a building on a Mapbox Map. Despite trying to change the color using MeshPhongMaterial or other variations, it seems that the color remains unaltered.

Everything else appears to be functioning correctly except for the color change.

This is the code I have implemented:

        var modelOrigin = [17.1956,44.7871];
        var modelAltitude = 0;
        var modelRotate = [Math.PI / 2, 0, 0];
         
        var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
        modelOrigin,
        modelAltitude
        );
         
        // transformation parameters to position, rotate and scale the 3D model onto the map
        var modelTransform = {
        translateX: modelAsMercatorCoordinate.x,
        translateY: modelAsMercatorCoordinate.y,
        translateZ: modelAsMercatorCoordinate.z,
        rotateX: modelRotate[0],
        rotateY: modelRotate[1],
        rotateZ: modelRotate[2],
        /* Since our 3D model is in real world meters, a scale transform needs to be
        * applied since the CustomLayerInterface expects units in MercatorCoordinates.
        */
        scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
};

});


        

Answer №1

To modify the material of an existing glTF asset, follow these steps:

gltf.scene.traverse((obj) => {
    if (obj.isMesh) {
        obj.material = newMaterial;
    }
});

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

AngularJS displays true for $scope.form.$submitted

I am working on a multi-step form and I am facing an issue with controlling user submissions. I need to validate each step before proceeding to the next one. Even though I am implementing validation checks and moving to the next step accordingly, the $scop ...

What is the best way to pass a variable between clusters in a Node.js application?

I have implemented clusters in my express application, where the master node has a caching system with a variable that needs to be shared across worker nodes. I am looking for a way to achieve this without using a physical datastore. Can the following ap ...

What is the reason behind the Nexus 4 (with Chrome for Android) displaying a window size of 384x519 while the screenshot depicts it as 768x1038

Currently, I am utilizing media queries to adjust the display based on different screen sizes. However, I have encountered an issue where the screen size is not being accurately reflected in CSS. For instance, on the Nexus 4 device, the display is renderin ...

Running a Python script using Node.js

I'm having trouble running a machine learning script from my node.js application using the child-process core module as described here However, I am unable to receive any output from script.stdout.on. The versions I am using are Node v12.5.0 and pyt ...

Using Node.js, you can leverage regular expressions to swap out the data within parentheses in a sub

I'm looking for a way to update the table name inside a subquery using regex in node.js. For instance, transforming the given query: SELECT col1 FROM (SELECT col1::DECIMAL(10), col2, FROM @table_name) WHERE (COND1) AND (COND2) Into: SELECT col1 FROM ...

"Leaflet automatically refreshes tile cache when zooming in or out

Currently, I'm facing an issue regarding the tile cache in leaflet. If I move from point A to point B, and examine the tiles in between, they are cached without any problems. However, if I go from A to B, zoom in and out, and then return to point A, ...

Executing a method from a callback within the data() function in Vue 2.7 – Here's how!

This component uses a third-party module known as HelloWorld. This module has a prop called closeCallbacks, which is an array of callbacks that are triggered when the HelloWorld component is closed. Unfortunately, the functionality of the third-party comp ...

Issue encountered while attempting to implement AJAX in Symfony for filtering a section based on category

Attempting to utilize AJAX to filter a section of movies by category, here is the Jquery code being used: $(function(){ $('.Action').click(function(e){ $("#moviesContainer").html("Loading movies..."); $.get($(this).attr("href"), functi ...

What is the best way to deactivate the first two columns of the header in Vue?

I am attempting to deactivate the draggable function for the first 2 columns. I have tried using options in the draggable plugin. :options="{disabled : 'Subject'}" However, this disables the draggable functionality for all headers. < ...

How to retrieve the AngularJS Object in JavaScript to trigger the Bootstrap modal popup

To trigger the logout() function, it should only execute if the value of an AngularJS object within rootscope is true. How can I validate this using JavaScript to check the content of the rootscope object? <body ng-controller="myController"> & ...

Learn the steps to transform your Magento 2 store into a Progressive Web App for seamless user experience

I am currently running a Magento 2 store and I am interested in implementing the PWA feature on it. ...

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

`sendNodejs header not being transmitted during connection``

My nodejs application utilizes stomp to connect to a server using websockets. However, I am encountering an issue where the application is failing to send the headers that I have specified. Despite referring to clear documentation and examples on how to in ...

Do you know the term for when JavaScript is utilized to display specific sections of a png image?

Imagine you have an image file in the format of a PNG which includes various icons intended for use on a website. How can JavaScript be utilized to choose and showcase a specific icon from that image? It's a technique I've observed in practice, b ...

Guide on adding pictures to an ExpressJS server

Working on this project has been quite a challenge for me as I delve deeper into web development. As a relatively new developer, creating a one-page application with image upload functionality has proven to be quite the task, especially considering this is ...

Issues with Grunt functionality after installation on Ubuntu

I successfully installed Grunt by running the following commands in the terminal: sudo apt-get install nodejs sudo apt-get install npm npm install -g grunt-cli After executing npm install -g grunt-cli, here is the output from the terminal: (output he ...

Creating a proxy for an HTTP video stream (from VLC) using NodeJS and ExpressJS

Using VLC 2.2.1, I am able to create an HTTP stream of my webcam from a computer named server. If I open VLC on another computer, client, and enter the network stream http://server:8080, the webcam video displays perfectly. A Wireshark capture of the HTT ...

The renderValue property is malfunctioning in the Material-UI native Select component

Whenever I utilize the native prop in the MUI Select component, the renderValue prop fails to function properly. Additionally, if I attempt to assign a custom value to the value prop, it does not display. Take a look at the code snippet below: const [selec ...

Placing the word "repeatedly" in a d3 js tree

I am currently working on building a tree structure and incorporating edge labels. The tree allows nodes to be dynamically added using a plus button that appears when you click on a parent node. One issue arises when adding a new child. (apologies for the ...

Generate projectiles within a game periodically

I've created a game that features a main character and enemy soldiers who shoot back. I'm facing an issue where only one enemy soldier shoots at intervals, even though I initially used setInterval for both of them. Any suggestions on how to fix t ...