Distinguishing Hex Colors in Threejs

While working on my material, I decided to use the hex code 0x205081 like this:

material = new THREE.MeshBasicMaterial({color: 0x205081, vertexColors: THREE.FaceColors});

However, when I attempt to revert a few colors back to the original shade (0x205081) after making changes, it seems to be darker than its initial appearance. This happens even when using the exact same hex code. What am I doing wrong?

You can observe the disparity in this fiddle: http://jsfiddle.net/VsWb9/4805/

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({color: 0x205081, vertexColors: THREE.FaceColors}); 

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}

$('input[type=button]').click( function() {
       geometry.faces.map(function(f) {
          f.color.setHex( 0x205081);
    });
    geometry.colorsNeedUpdate = true;
});

Answer №1

Ensure to note that the color of MeshBasicMaterial may not match the color of the faces.

This is what you need:

var camera, scene, renderer, geometry, material, mesh;

initialize();
animate();

function initialize() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);

    //Set material to white color so it doesn't conflict when applying actual face colors
    material = new THREE.MeshBasicMaterial({color: 0xffffff, vertexColors: THREE.FaceColors}); 

    //Set initial face colors like this, not with material
    geometry.faces.map(function(f) {
          f.color.setHex( 0x205081);
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    display();

}

function display() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}

$('input[type=button]').click( function() {
    geometry.faces.map(function(f) {
          f.color.setHex( 0x205081);
    });
    geometry.colorsNeedUpdate = true;
});

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

Utilizing JavaScript to employ the indexOf function on arrays in MongoDB

In my script, I have an array outside mongodb called title. The dataset in mongodb contains fields that I do not want to include (Dataset_1). I am using an indexOf function to match values and create a ranking. The structure of Dataset_1 is as follows: g ...

Increase the padding at the top and bottom of the div border

I am facing a problem with CSS shrinkwrapping. Here is the simple code snippet... <!doctype html> <html lang="en-US"> <head> <title>Device Activation</title> <meta charset="utf-8"> <style ...

What is the best way to ensure that the table header is printed on every page when printing?

My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...

concealing the date selection feature on the data picker

$('.year').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onOpen: function(dateText, inst) { $("table.ui-datepicker-calendar").addClass('hide') }, onClos ...

Generating a new root in React 18 results in numerous rounds of rendering and execution

Every time I attempt to run this code in React 18, it seems to render multiple times unlike React 17 where it only executes once and functions properly. How can I modify the code so that it only runs once? Is there a specific reason for the multiple execu ...

Ways to successfully pass multiple parameters in Nuxt

Within Nuxt.js, when working with the code in pages/posts/_id.vue, it looks like this: <template> ...

Guide on changing the order of Vue sibling components when rendering a shared array within a parent component list

Currently facing a unique challenge and seeking input: Within the 'App', utilize 'TestListItem' for odd item indexes and 'TestListBetterItem' for even indexes. The same index must be used for both components. Initial attemp ...

Customize your Angular UI Bootstrap Datepicker with unique buttons - here's how!

Currently, I have a datepicker with clear and close buttons. I tried using the append function to add more buttons to this datepicker, but it didn't work because the content is not loaded until we click the icon since it's a popup datepicker. Is ...

jQuery width property does not seem to be functional on menus that do not contain any dropdown

I am currently working on creating a menu that displays arrows underneath the items when hovered over or when the .active class is added to the menu. Everything is working fine, except for the fact that it only works on menus with drop-downs and the child ...

Is webpack necessary for segregating dependencies during installation?

Currently, I'm diving into a tutorial on webpack and it's been three days already, but confusion still reigns! I am delving into the commands: npm i webpack --save-dev I find myself puzzled by the '--save-dev' in the above command whi ...

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

The issue with the jQuery library arises when attempting to duplicate or insert a new row

As I work on creating a table, one of the requirements is to include a row with a multiple-select tags field in a cell. To achieve this functionality, I am utilizing a jQuery library as shown below. Additionally, there should be an option to add new entrie ...

What causes the lack of definition of this.state in this basic React component due to a contrived usage of bind?

This React application was created using create-react-app, with modifications made only to the file App.js. It serves as a test of my understanding of the bind method and its expected results. However, I am encountering an issue where despite binding the m ...

What is the best way to position a rectangle on top of a div that has been rendered using

I recently started using a waveform display/play library known as wavesurfer. Within the code snippet below, I have integrated two wavesurfer objects that are displayed and positioned inside div elements of type "container". My goal is to position my own ...

problem encountered while attempting to transmit data to multer in React

I was attempting to upload an image to the backend using Multer. I have reviewed the backend code multiple times and it appears to be correct. Could there be an issue with my front-end code? Here is a POST code snippet: const response = await fetch(' ...

Incorporating a Third-Party JavaScript Library with Vue.js

I'm attempting to integrate the library found at : into my Vue.js project. However, I am facing difficulties importing and utilizing the scripts, as well as utilizing the library in general. <script src="bower_components/wysihtml/dist/wysiht ...

Display a loading screen to the user while Vue lazy loads the content

I am currently implementing lazy loading features for my single-page application using Vue.js and Laravel Mix 5. I am looking for a way to display a loading page to prevent the app from appearing unresponsive while new pages are loading. I attempted to ad ...

Accessing database values for dropdown menus using JavaScript

Please provide guidance on how to populate a dropdown with values from a database in this code snippet, which is used to create dynamic rows in a table. <script type="text/javascript"> $(document).ready(function(){ $(".add-row").click(function() ...

Is there a way to enhance this Java script file reader into a multi-file reader?

I am seeking assistance with JavaScript as it is not my strong suit, but I require it for my website. My goal is to be able to read the files that I select. Below you can find the input form: <form name="filUpload" action="" method="post" enctype="mul ...

What is the best way to duplicate/rename/replace an image in PHP while utilizing form submission and radio buttons?

I am new to PHP and I am working on a feature that allows a user to change an image using radio buttons and form submission. The goal is to copy and rename one of two image files (Open/Closed.jpg) to another location (images/status/Status.jpg) without requ ...