Is it possible to accept user input in order to customize the color of my object in Three.js?

// Retrieving the mesh and integrating it into the scene.
var loader = new THREE.JSONLoader();
loader.load( "models/cubic.js", function(geometry){
  // var material = new THREE.MeshLambertMaterial({color: 0x55B663});
  alert(geometry.faces.length);
  //for ( var i = 0; i < geometry.faces.length; i ++ ) {

  var face = geometry.faces[ 2];
  face.color.setHex(0x55B663 );
  var face = geometry.faces[ 3 ];
  face.color.setHex(0x55B663 );
  var face = geometry.faces[ 4];
  face.color.setHex(0xFFFF00 );
  var face = geometry.faces[ 5 ];
  face.color.setHex(0xFFFF00 );
  var face = geometry.faces[ 8];
  face.color.setHex(0x666600 );
  var face = geometry.faces[ 9 ];
  face.color.setHex(0x666600 );
  var face = geometry.faces[ 6];
  face.color.setHex(0x1A1A00 );
  var face = geometry.faces[ 7 ];
  face.color.setHex(0x1A1A00 );
  var face = geometry.faces[ 10];
  face.color.setHex(0x00001a);
  var face = geometry.faces[ 11 ];
  face.color.setHex(0x00001a);
  var face = geometry.faces[ 1];
  face.color.setHex(0x200614);
  var face = geometry.faces[ 0 ];
  face.color.setHex(0x200614);

  //}
  mesh1 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } ));
  //mesh1 = new THREE.Mesh(geometry, material);
  scene.add(mesh1);
  mesh1.position.x=-3;
});
<input id="color" type="text" />
<button id="submit" type="submit">submit</button>

Is it possible to enable users to input their desired color for the object?

In the code above, colors for each face of the object are hardcoded but there is a need to implement user input for setting the colors dynamically.

Answer №1

Absolutely, there are two ways to control the color of an object in your scene. You can either adjust the overall color using mesh1.material.color, or you can modify the individual mesh1.geometry.faces[...].color values whenever necessary. It's important to stay vigilant about updates; take a look at this resource for guidance on when to notify THREE.js that changes have occurred.

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

Extensive application featuring a complex form built with react-redux

Recently, I've been tasked with revamping a module at my company using react. This module consists of a single page that is made up of 4-5 different forms. The selections made in each form determine the appearance of the following form step. While th ...

Error encountered: The object 'Sys' is not defined in the Microsoft JScript runtime

I currently have a webpage with the following code snippet: <script type="text/javascript" language="javascript"> /// <reference name="MicrosoftAjax.js" /> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler ...

Updating item information within an array in Vue.js

I'm currently working on integrating an edit feature into a task application using Vue JS. My issue lies in the fact that I have a click event assigned to the edit button - @click="editShow" which displays input fields for editing all items instead ...

Retrieve a value from a PHP database table and transfer it to a different PHP webpage

I have values retrieved from a database and I need to select a row from a table and pass those values to the next PHP page, OInfo.php. I attempted to use Javascript to place those values in textboxes, but upon clicking the continue button, the values are n ...

How can we increase the accuracy of numerical values in PHP?

When performing a math operation in JavaScript, the result is: 1913397 / 13.054 = 146575.53240386088 However, when the same operation is performed in PHP, the result is slightly different: 1913397 / 13.054 = 146575.53240386 This discrepancy may be due ...

The change event for the select element is malfunctioning

Currently, I am deep diving into Nodejs with the second edition of the node cookbook. This book has caught my attention because it explains concepts using practical sample code, making it easier to grasp. The example code I am working on is related to Br ...

Bootstrap3 Remote Modal experiencing conflict due to Javascript

Utilizing a bootstrap modal to showcase various tasks with different content but the same format is my current goal. However, I am encountering an issue when attempting to make the textareas editable using JavaScript. The conflict arises when I open and cl ...

Utilizing aliases for CSS/SASS file imports with webpack

Can we use aliases to import .scss / .css files? // webpack.config.js resolve: { alias: { styles: path.resolve(__dirname, "src/styles/"), } } In the main.js file: // main.js import "styles/main.scss"; ...

Create a unique filter in an ng-repeat directive that allows users to personalize the data displayed

Is there a way to create a custom filter that hides the inventory column for Color Pencil Special on October 2nd, 2017 in the view? The inventory for Color Pencil Special is dependent on the inventory of regular Color Pencils, which are stored somewhere e ...

Determining the minimum and maximum values of a grid using props in a React component

I have created a code for a customizable grid screen that is functioning perfectly. However, I am facing an issue where I want the minimum and maximum size of the grid to be 16 x 100. Currently, when a button is clicked, a prompt window appears asking for ...

Comparing the size of a MongoDB array to another field in a document: how can it be done?

Need guidance on querying MongoDB for documents that have a specific number of users in them. This needs to be done through both the mongo console and JavaScript in Node.js: db.turnys.find( { users:{$size:seats } } ) The structure of turnydb.turnys colle ...

The Apollo Client mutation input type is missing data

Currently, I am working with Apollo-client and facing an issue while making a mutation on the client. It seems that when I perform my mutation, the data being passed to the server becomes void. Below is my mutation type: type: recipeType, args:{ ...

Ways to utilize ng-options for looping through an array inside an object?

How do I utilize ng-options to fill a select element with the content of the "categories" arrays inside the objects? { title: "Star Wars", categories: ["Technology", "Adventure", "Coding"] }, { title: "Street ...

The value of 'this.selectedNodes' does not support iteration and is causing a

I am currently utilizing v-network-graphs to generate graphs in the front end with Vue. I have set up my data like this: data(){ return{ test: test_data, nodes:{}, edges:{}, nextNodeIndex: Number, selectedNodes: ref<st ...

If the div element undergoes a change, use an if-else condition to populate the data fields accordingly

I'm looking to create a basic if/else statement in JavaScript that checks if a div element has changed before populating JSON data fields/variables that pull from dynamically updated HTML. I want to avoid using the deprecated DOMSubtreeModified metho ...

Retrieve documents from MongoDB that were created within the last week and return a count of 0 for any days in which no documents were created

I need to extract documents from the last 7 days stored in my Mongo Database. I have successfully retrieved data in the desired format, where specific dates and the number of tickets created on those dates are returned: { "datesUsed": { ...

What are some ways to implement querySelectorAll in conjunction with htmx?

I'm currently using htmx, an amazing library with a small issue that I'm struggling to resolve. htmx utilizes querySelector to find elements for swapping or updating, for example with hx-swap="...", hx-target="...". How can I use querySelectorAll ...

Is there a way to transform my json data into a particular structure?

My json string looks like this: arguments[0] = [{"one":"1","two":"1","three":"15","four":"esj","five":null,"six":"2015-10-15 00:00:00","seven":null}, {"one":"1","two":"1","three":"15","four":"esj","five":null,"six":"2015-10-15 00:00:00","seven":null}, {"o ...

Build an upvote feature using PHP and WordPress that allows users to vote without causing a page reload

Just starting out as a developer and currently working on a website using WordPress. I want to implement an upvote button that allows users to upvote a post without the page needing to refresh. I understand that I'll need to use JavaScript to highligh ...

Assign a class to an element depending on the date

I need to customize a span element in my HTML code like this. html <span class="tribe-event-date-start">September 5 @ 7:00 pm</span> My objective is to identify that specific element based on its date and then apply a class to its parent co ...