How can I change the color of a cube in Three.js?


I'm currently working on developing a basic 3D game using three.js. My goal is to create colored cubes, but I'm encountering an issue where all the cubes are displaying the same color.

My cube creation code looks like this:

var geometry = new THREE.BoxGeometry(width, height, length);
var material = new THREE.MeshNormalMaterial({color: hexColor});
var cube = new THREE.Mesh(geometry, material);

(this code snippet is within a function)
I call this function twice, with hexColor values set to 0x0000ff (blue) and 0xff0000 (red). The cubes do render on the screen, however, each face of the cube appears to be a different color instead of uniform.

I also attempted:

cube.material.color.setHex();

But it throws an error message "Uncaught TypeError: Cannot read property 'setHex' of undefined"

Your assistance in resolving this issue would be greatly appreciated! Thank you.

Answer №1

It seems that the problem lies in the fact that THREE.MeshNormalMaterial() does not include a color property. You might want to consider using

THREE.MeshBasicMaterial({ color: yourHexColor });
as an alternative approach.

By making this adjustment, your

cube.material.color.setHex(yourHexColor);
function should work without any issues.

To obtain further details and assistance, refer to the official Three.js documentation, or explore additional resources on the dedicated examples page.

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

Leveraging electron-usb alongside electron

I attempted to integrate the electron-usb library into my electron project. Upon running npm start with require('electron-usb') in my index.html file, an error is displayed in the console: Uncaught Error: The specified procedure could not be fo ...

Tips for modifying JSON response using a function

When I call the function buildFileTree, I store its response in a constant variable called data. const data = this.buildFileTree(dataObject, 0); The value of dataObject is: const dataObject = JSON.parse(TREE_DATA); And the content of TREE_DATA is: cons ...

Node.js error: Attempting to set property '' on an undefined object not allowed

I encountered an issue while attempting to update an array within a model. Even though the usagePlan is defined before the update, the error below keeps getting thrown. customer.usagePlan.toolUsage.tools.push(aNewToolObject); customer.updateAttribute(&apo ...

Monitoring page reload with JavaScript

Here is an example of tabbed content: <div class="tab"> <button class="tablinks" onclick="openCity(event, 'NewYork')" id="defaultOpen">New York</button> <button class="tablinks" onclick="openCity(event, 'LosAngeles& ...

Personalize the marker design within the Wikitude SDK using JavaScript

Currently, I am developing an augmented reality view in Android using the wikitude-sdk. As part of the project, I am displaying markers on the screen and now I am looking to customize the marker view using the AR.HtmlDrawable method offered by the ...

click event not triggering custom hook

I have developed a custom hook for fetching data and am struggling to implement it successfully. Below is my custom hook: import { useReducer } from "react"; import axios from "axios"; const dataFetchReducer = (state, action) => { ...

What is the best way to display a placeholder instead of the state's value when a page loads?

I'm having trouble displaying the placeholder of an input instead of its state value. When the page loads, it shows an empty select box because the testType state is null initially. How can I make sure that only the placeholder is shown instead of the ...

ReactJS - Travel Booking Platform with Advanced Date and Price Filtering

Currently, I am in the process of developing a project — a website similar to AirBnB or Booking.com for booking rooms. The backend is built on Java Spring, while the frontend uses ReactJs. Although most of the code runs smoothly, I'm encountering s ...

Error encountered in jQuery Datatables: aData variable is not defined

I am having an issue with a jQuery datatable that is using an Ajax data source. This is how the table is set up: $("#tblNotes").DataTable({ "ajax" : { "url": "/projects/ajaxGetProjectNotes/", "type" : "post", ...

I can't seem to get the npm run dev command to work properly after setting up

After successfully setting up React JS with Vite and running npm i, I encountered an error when trying to run npm run dev: > [email protected] dev > vite E:\nasheednaldo\node_modules\rollup\dist\native.js:64 ...

What is the best way to transfer an id from JavaScript to Rails while utilizing ajax?

Is there a way to call a rail route and pass in an ID from javascript? I have recently started using rails routes within my application, even in js. The current code I am using is: # app/assets/javascript/verifying_link.js $.ajax({ url: "/verify_link/ ...

Error: React unable to locate module './WebpackMissingModule'

Recently I started diving into React, and I'm encountering some difficulties trying to export components. Here is my current index.js file setup: import React from 'react'; import ReactDOM from 'react-dom'; import SearchBar from ...

Can TypeScript be used to dynamically render elements with props?

After extensive research on SO and the wider web, I'm struggling to find a solution. I have devised two components, Link and Button. In short, these act as wrappers for <a> and <button> elements with additional features like chevrons on t ...

Learn how to execute JavaScript code in Selenium without launching a web browser

I am currently using the Selenium API for web scraping on pages that contain JavaScript code. Is there a way to retrieve the code without having to open a web browser? I am still learning how to use this API Is this even feasible? ...

What are the best practices for managing promises effectively?

Currently, in my Angular application, I am utilizing $odataresource for handling data retrieval and updates. The code snippet I am working with is as follows: var measure = $odataresource("http://windows-10:8888/ChangeMeasure/"); var myMeasure = measure ...

Utilizing recursive AJAX requests and halting execution at a specified condition

After hours of searching and attempting, I am struggling as a beginner with ajax concepts. Here is my issue: 1. I have a page that retrieves the current date's data from the database, so I am using an ajax function recursively with a setTimeout of 10 ...

Is there a way for me to invoke a different function that is located external to

I am currently in the process of setting up an event that triggers on any change within the form input class. import React, { useState } from "react"; DealerRegistration extends React.Component { state = { business_type : 'd ...

Validation of dynamically generated name fields using radio button group

CODE: html <form id="myform" type="post"> <fieldset id="myid1"> <input id="entries_8490_burn_id_1" name="entries[8490][burn_id]" value="1" type="radio"/> <input id="entries_8490_burn_id_2" name="entries[8490][burn ...

Utilizing $asyncValidators in angularjs to implement error messages in the HTML: A guide

This is my first major form with validations and more. I've set up a Registration form and I'm utilizing ng-messages for validation. The issue arises when I have to check the username, whether it already exists in the JSON server we are using or ...

Sorting items in backbone.js can be achieved by using the sortBy method

Currently, I am delving into learning backbone.js and have decided to create my own Todo application using backbone.js along with a local storage plugin. At this point, I have successfully developed the Todo app where you can add and remove tasks. However, ...