Changing the color of an object in Three.JS using assigned materials

I am trying to apply a material/color to a loaded object using Three.js, but I am struggling with the syntax and which variables/functions to use. Although I can successfully load the object, I am facing difficulties when trying to set a material for it.

//Object loader
var loader = new THREE.OBJLoader();
loader.load( '3D4.obj', function ( object ) {
    // Unsure about what steps are needed here to add a material to the object

    var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial( {color: 0xFF0000} ));

    // Add the object to the scene
    scene.add( object );
});

Answer №1

let objLoader = new THREE.OBJLoader();
objLoader.addEventListener( 'load', function ( event )
{
    let loadedObject = event.content;
    loadedObject.traverse( function ( child )
    {
        if ( child instanceof THREE.Mesh )
            child.material.color.setRGB (1, 0, 0);
    });
    scene.add( loadedObject );
});
objLoader.load( '3D4.obj' );

Your object will now be displayed in red.

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 possible to retrieve the JSON object from the Fetch API response and access it externally?

Currently, I am facing an issue accessing the variable emoji_map beyond the scope of the then function in my code and I'm unsure how to resolve it. Below is the relevant snippet of my code: if (req) { fetch(req).then(function(response) { ...

Calculating the total sum of values using a dropdown list as a filter with J

I have successfully implemented a dropdown filter in my jQuery datatable to filter data. However, I am now looking to calculate the sum of all values in the filtered table each time a user selects a value from the dropdown list. How can I achieve this? My ...

"Troubleshooting issue: Why isn't jQuery interacting with JSON data properly

I just discovered .json files and I'm attempting to include a multiline string in a data value, but it doesn't seem to be working. I've experimented with using \n, \r, and \n\r but none of them are functioning properly wh ...

The security vulnerability in Webpack package version 4.41.2 is due to the terser-webpack-plugin utilizing serialize-javascript version 1.9.1

I seem to have encountered an issue related to a webpack internal dependency called "serialize-javascript" with version 1.9.1. My webpack version is 4.41.2 and it utilizes the terser-webpack-plugin which in turn uses serialize-javascript version 1.9.1 No ...

What steps can I take to generate a JSON array with this unique format?

The data I received from my angular form is in the array format: [{"name":"Rose","number":"+919224512555"},{"name":"smith","number":"+91975555224"}]. The data represents a dynamic table with columns for name and number. I need to convert the array above i ...

Extracting data from a MySQL result array

I've encountered an issue with extracting a value from an array containing JSON data. Below is the JSON data I received (printed using console.log(rows[0])): [ { User_ID: 28, Email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email ...

Understanding the concept of displaying labels even when the field is empty in React

One issue I am facing is with a label that displays a string from a text input filled in by the user. The string is saved in a variable called question and shown as: <label className={css('form-title-label')}> {question} </label ...

Typescript allows you to apply a filter to an array

Query: Is there a way to display a pre-selected item from my dropdown using its unique ID? Issue/Explanation: The dropdown options in my web service are dynamically fetched based on a user's ZipCode. For example, a Provider is displayed as {Pho ...

Using the JavaScript JSX syntax, apply the map function to the result of a

My aim is to create a structure resembling the following: <td> {phones.map((phone, j) => <p>{this.renderPhone(phone)}</p> )} </td> However, there may be instances where the phones array is not defined. Is it feas ...

Integrate yaml-loader into the i18n settings of a Vue-CLI 3 project

After diving into the Vue-i18n library and exploring this tutorial, I successfully incorporated tags in json format within my project created with vue-cli. While browsing through the documentation, I noticed an example using yaml instead of json. However ...

Why is three.js looking at the mouse? What's the reason behind it?

I'm struggling with grasping some key principles in my understanding of three.js. Currently, I have an interesting setup where I've managed to make a virtual eyeball follow the user's mouse cursor. The concept is inspired by a tutorial from ...

Guide on replacing buttons with <a> tags in express.js posts

I've incorporated handlebars as my chosen templating engine and I'm utilizing buttons to trigger app.post() in my JavaScript file. <form method="POST" action="/smo_assessment"> <div class="container" id="div1"> <h3 id="header" ...

Updating Angular-footable values when REST calls are initiated: A complete guide

When my controller initializes, I fetch all the necessary data for my table from a rest call. Here is the code snippet: tableService.getList(function(response) { $scope.back = response blockUI.start("Wait..."); ...

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

Press a button and use an if statement to compare the text variable

Can you please assist me with this query? I'm attempting to click on three different buttons with unique IDs, based on a JavaScript string variable. For example: function my_custom_js_func(){ jQuery( "#listViewer" ).click(); }; However, this co ...

Displaying elements in Angular based on their height

I'm currently working on a paragraph that adjusts its length based on the maximum height. I'm interested in finding a way to display or hide the anchor element if the height exceeds a specific limit. Essentially, I only want to show "more..." whe ...

The error message "trying to access markers property of undefined in the render function" occurred

I encountered this error while running my react-native component and need assistance. An error stating "undefined is not an object (evaluating 'this.state.markers.map')" occurred. This error appears in the following locations: c:\proje ...

Tips for automating a javascript web application even without the need for the website or browser to be open

I am currently working on developing a JavaScript-based web application. The webpage I have created consists of just one button, which when clicked, retrieves data from another website and saves it to my Mongo database. My goal is to automate this process ...

GM Unable to Establish Cross-Domain Ajax Connection

Attempting to populate a form on a client's website with data from our database using a Greasemonkey script, but struggling with the same origin policy. I have tried using GM_xmlhttpRequest and even specified @grant GM_xmlhttpRequest but without succ ...

Retrieve an HTML element that is a select option with jQuery

I have a select input containing different options as shown below: <select id="myArea"> <option class="myClass_1" style="color:red;" value="1">Area 1</option> <option class="myClass_2" style="color:green;" value="2">Area 2& ...