Changing the Color of an Object3D Mesh in Three.js

Seeking advice on how to update the color of a Three.js Object3D. Initially created using MeshStandardMaterial, this object is later retrieved from the scene by its ID. Is it possible to change the color of the Mesh at this stage?

If needing to replace the 3D object entirely, is there a method to retrieve the original geometry used in its construction directly from the Object3D? Avoiding a mapping of geometry to ID due to code clutter, one potential solution is storing the geometry in Object3D.UserData. However, this approach is less efficient as meshes are initially constructed elsewhere and then added to the scene (UserData is only accessible after adding to the scene).

javascriptthree.js

Answer №1

I discovered a method to incorporate texture into an Object3D.

To adjust the material of meshes, you can utilize the children property.

    function onLoad(object) {
      // The `children` array consists of one or more Mesh objects
      object.children.forEach((mesh) => {
        if (!mesh) return;
        const material = mesh.material;

        material.map = ghostColorTexture;
        material.normalMap = ghostNormalTexture;
      });
    }

    const objLoader = new OBJLoader();

    objLoader.load(
      '/models/ghost/model/ghost.obj',
      onLoad,
      undefined,
      function (error) {
        console.error('error', error);
      }
    );

Answer №2

An Element can be a Shape that consists of a Pattern and a Texture. If you wish to change the pattern, simply select that texture, and apply a new design to it:

element.texture.pattern.setHex(0xff9900); // Changes to orange

In the documentation, you will find that .pattern is a part of TextureColor and .material is related to 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

Is it really necessary to still think poorly of JavaScript in 2011?

Here's an intriguing question for you. I've tested out a variety of popular websites, including Facebook, and I've noticed that many features still work perfectly fine even when JavaScript is disabled. People always used to say that JavaScr ...

javascriptajaxgraceful-degradation

What is the best method to display an asterisk (*) in red while using React and Material UI

In my form, I want to indicate required fields with a red star (*). Is there a way to display the star in red color? Also, why does the border turn blue when I click on an input field? Here is the code and screenshot for reference: https://codesandbox.io/ ...

javascriptcssreactjsmaterial-designmaterial-ui

What is the best way to solve the problem of Chrome auto-complete overlapping with labels in Vuetify?

When attempting to make a login form using outlined text fields in Vutify, there is an issue with Chrome autocomplete overlapping the labels. <v-text-field v-model="email" label="e-mail" name="email" outlined prep ...

javascriptgoogle-chromeautocompletevuetify.js

Removing a faded out div with Vanilla JavaScript

I am struggling with a JS transition issue. My goal is to have the div automatically removed once it reaches opacity 0. However, currently I need to move my mouse out of the div area for it to be removed. This is because of a mouseleave event listener that ...

javascripthtmlcss

Leverage Angular to highlight updated items within a list

My goal is to synchronize data, so I have a data object that holds the current state. Whenever this state changes, I want to mark the object with an attribute for filtering purposes during syncing. Here is the structure of the object: data = { type1: [ ...

javascriptangularjssynchronization

Refresh needed for Material UI styles to load correctly in Next JS

UPDATE: Reproducible issue https://github.com/ganavol409/next-material-ui-classes-bug Issue seems to be related to Higher Order Components and importing useStyles from Material UI Implemented Solution: https://github.com/mui-org/material-ui/blob/master/ ...

javascriptreactjsmaterial-uinext.js

losing track of the requested parameters while working asynchronously with Firestore documents

Today is my first time experimenting with firestore and express. Here is the code snippet I am using: app.post('/api/create', (req, res) => { (async () => { try { console.log(req.body); //the above consle.lo ...

javascriptnode.jsfirebaseexpressgoogle-cloud-firestore

Serve up a 400 error response via the express server when hitting a

I need help serving a 400 error for specific files within the /assets directory that contain .map in their names. For example: /assets/foo-huh4hv45gvfcdfg.map.js. Here's the code I tried, but it didn't work as expected: app.get('/assets&bs ...

javascriptregexexpress

What is the best way to manage a promise in Jest?

I am encountering an issue at this particular section of my code. The error message reads: Received promise resolved instead of rejected. I'm uncertain about how to address this problem, could someone provide assistance? it("should not create a m ...

javascriptnode.jstypescriptpromisejestjs

Is there a way to personalize the appearance of a specific page title in my navigation menu?

I'm currently working on customizing the menu of my WordPress theme to display a different color for the active page name. Although my CSS code works well for all page names except the current one: .navbar-nav li a { font-family: georgia; fo ...

javascriptjqueryhtmlcsswordpress

Avoid page refreshing when modifying app.js in React

Today is only my second day using React and I started by creating a React app with "npx create-react-app." However, when I tried to make changes to the app.js file, they didn't appear on the page even after refreshing the browser multiple times. (My n ...

javascriptreactjsnpmnpx

Navigate to Angular Link using Scope Data

I have the user's GPS location, which is not fixed. From the frontend, I need to open it as a Google Maps link. <a href="#" ng-click='window.open("https://www.google.com/maps/place/{{data.usergps}}", "_system", "location=yes"); return false;& ...

javascriptangularjs

tap the hyperlink to complete the form and mimic the action of a designated

I'm working on an HTML form that includes a table and two submit buttons. <input type="image" name="button1" value="First Button" src="some_image.png"> <input type="image" name="button2" value="Second Button" src="some_image.png"> One ch ...

javascriptjqueryhtmldom

Material UI Card shadow effect getting cropped

Currently experiencing an uncommon issue while using Material UI's Card component - the box-shadow is cut off on the top and bottom sides. Any suggestions on how to resolve this problem? Check out my code below: import React, { Component } from & ...

javascriptcssmaterial-ui

Error: The function .default.auth.signout is not recognized in the REACT and Firebase environment

I've come across several error questions on StackOverflow, but most remain unanswered. The ones that are answered don't seem to solve my issue. I need help debugging this particular error. In my REACT project using Firebase, I'm working on ...

javascriptreactjsfirebase-authentication

Sending a variable to a function in JavaScript (winJs) from a different function

Greetings! Currently, I am developing a Windows 8 app using Java Script. function fetchFromLiveProvider(currentList, globalList,value) { feedburnerUrl = currentList.url, feedUrl = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&outpu ...

javascriptjsonwinjs

Is it possible that binding a ref is not functional in vue.js?

Whenever I use v-bind to bind an element reference with :ref="testThis", it appears to stop functioning. Take a look at this working version: <template> <div> <q-btn round big color='red' @click="IconClick"> ...

javascriptecmascript-6vue.js

What is the best method for integrating opensea-js using a script tag in a vanilla HTML/JS environment?

Is there a way to incorporate opensea-js into an html/js project that does not rely on node.js? The source code for opensea-js is only available on github and npm at https://github.com/ProjectOpenSea/opensea-js I came across this link: However, when I tr ...

javascripthtmlblockchainethereumopensea

The Next.js Image component is not compatible with an external URL as the image source

I've been struggling to use the image component in Next.js with an external URL as the source, but I keep encountering an error. I followed the instructions in the official Next.js documentation and updated the next.config.js file, but unfortunately, ...

javascriptreactjsnext.jsnextjs-image

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...

javascriptjqueryhtml