How can I modify the base color of a cone in Three.js?

My cone in the jsfiddle link is currently all blue, but I want to change the color of the square base to red. To do that, I need to alter the color of the two faces that make up the square base. How can this be achieved?

View my cone on JsFiddle: http://jsfiddle.net/sagh0900/suvKg/1/

function getGeometry(meshMaterial)
{
var cone;
var geo = new THREE.Geometry();
geo.vertices.push(new THREE.Vector3(0, 0, 0));
geo.vertices.push(new THREE.Vector3(-0.5, 0.5, 1));
geo.vertices.push(new THREE.Vector3(0.5, 0.5, 1));
geo.vertices.push(new THREE.Vector3(-0.5, -0.5, 1));
geo.vertices.push(new THREE.Vector3(0.5, -0.5, 1)); 
geo.faces.push( new THREE.Face3(0,1,2));
geo.faces.push( new THREE.Face3(2,1,4));
geo.faces.push( new THREE.Face3(1,3,4));
geo.faces.push( new THREE.Face3(4,3,0));
geo.faces.push( new THREE.Face3(3,1,0));
geo.faces.push( new THREE.Face3(0,2,4));
geo.computeFaceNormals();
cone = new THREE.Mesh(geo, meshMaterial);
cone.doubleSided = true;
cone.overdraw = true;
return cube;
}

Your assistance is much appreciated!

javascriptwebglthree.js

Answer №1

To enhance the visual appeal of your vertices, try assigning different colors to them and utilizing vertex colors within your material. For a detailed demonstration of this technique, refer to the sample code available at:

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

"Unleashing the Glamour: Tips for Decorating an Amazing Ajax Pop

I need help styling a magnific pop-up that displays content from a uri. The content is just plain text and I want to avoid using any html code as the popup will be triggered by a button. The current code I have written functions correctly, but the appeara ...

javascriptjqueryajaxmagnific-popup

Node.js population process

Hello, I am currently exploring Node.js and facing an issue with the populate() method. My goal is to populate the user model with forms. Here is the structure of the model: const UserSchema = new Schema({ firstName: { type: 'string&a ...

javascriptnode.jsmongodbmongoose

The reduce function is displaying an undefined result

Check out this code snippet: const filterByType = (target , ...element) => { return element.reduce((start, next) =>{ if(typeof next === target){ start.push(next) } } , []) } I'm trying to achieve a specific g ...

javascript

HTML comments generated from Freemarker's list notation

Currently, I have integrated Apache Freemarker into an HTML editor where users can create templates using code. For example, a user may write the following code for a list: <#list items as item>...</#list> While this is the correct way to gen ...

javascripthtmlapacheencodingfreemarker

Tips on handling a redirection request following a fetch post request

When communicating with my node server (Express) using fetch to build a Single Page Application (SPA), I have encountered an issue. Upon each request to the server, I validate the session and redirect to a login page if it is not valid. However, I noticed ...

javascriptnode.jsexpressfetch-api

The URIError occurred while attempting to decode the parameter '/December%2015,%' within the express framework

After setting up a middleware using the express framework that handles a URI with a date as a parameter, I encountered a small issue. app.get("/:date",function(req,res){ var result; var myDate=req.params.date if(moment(myDate).isValid()) ...

javascriptnode.jsexpress

Sinon - observing the constructor function

While I've come across a few related inquiries, none seem to address what I am specifically looking to achieve. My goal is to monitor a constructor method in such a way that when an object created with the constructor calls this method from a differe ...

javascriptnode.jssinon

`req.user` seems to be unresolved, but it is actually defined

Currently, I am working on developing an Express.js application that utilizes Passport.js for authentication in an administration panel. The program is functioning correctly at the moment, with my app.js initializing passport and setting up sessions proper ...

javascriptnode.jsexpresspassport.js

What is the most effective way to compare a nested array using the map or filter function in order to return only the first match

Here is a code snippet showcasing the data object containing information for the codeworks array with code and text values. There is a key array named code = ["ABC","MDH"] and the expected output is displayed in the following code snippets. const data = ...

javascriptarraysreactjs

Attempting to transfer various variables from several windows using AJAX

Is it possible to pass multiple variables from two different windows into the same PHP script? If not, what would be the best approach to take? Thank you. verifyemail.html <script type = "text/javascript" src = "js/js_functions.js"></script> ...

javascriptphpjqueryhtmlajax

How can I utilize a callback in TypeScript when working with interfaces?

Can someone guide me on how to implement an interface in typescript with callback function? interface LoginCallback{ Error: boolean, UserInfo: { Id: string, OrganizationId: string } } interface IntegrationInterface { Ini ...

javascripttypescript

Is it necessary to include a request in the API route handler in Next.js when passing parameters?

In my API route handler, I have a function for handling GET requests: import { NextRequest, NextResponse } from "next/server"; export async function GET(req: NextRequest, { params }: { params: { id: string } }) { const { id } = params; try { ...

javascriptnext.js

Display a complex JSON string in an ng-grid

My web service is designed to generate a JSON string using the following code: JavaScriptSerializer j = new JavaScriptSerializer(); return "[" + string.Join(",", v.getProbingJobs().Select(a => j.Serialize(a)).ToArray()) + "]"; (The getProbingJobs func ...

javascriptangularjsweb-servicesng-grid

One typical approach in React/JavaScript for monitoring the runtime of every function within a program

Experimenting with different techniques such as performance.now() or new Date().getTime() has been done in order to monitor the processing time of every function/method. However, specifying these methods within each function for time calculation purposes h ...

javascriptreactjstypescriptperformance

When hovering over various div elements in HTML

I've been experimenting with some code lately, and I'm trying to change the text color of a menu element when hovering over it. I can alter the background color just fine, but for some reason, the text color remains unchanged. Can anyone offer a ...

javascripthtmlcss

Integrating various object properties in Angular's select ng-options: A comprehensive guide

I need to merge text and number properties from JSON to display as select options values by default. The expected output should be: 000.000.0001 - Chicago HTML: <!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"& ...

javascriptangularjs

The meaning gets blurred when using 'this' in a prototype method

Alright, so I am working on a node application that utilizes express. In this particular application, there's an express route set up like this: var MyObject = require('./myObject') , myObject = new MyObject(); app.post('/api/w ...

javascriptnode.jsexpressprototype

Setting up Firebase in Node.js with Express.js is a key step in developing

Setting up a Firebase instance (not firebase-admin) in Node.js. import { initializeApp } from 'firebase/app'; const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig); This method may not be effective as Node.js uses Commo ...

javascriptnode.jsfirebase

Transform the dataUrl into a blob and send it via ajax request

I am currently utilizing the imgly image cropper plugin with some modifications for my application. It has the ability to convert an image into a dataUrl and produce the image as a base64 image which can then be saved as a jpeg. My objective is to adjust ...

javascriptjqueryajaxxmlhttprequestdata-uri

AngularJS directive not registering event after model update

Within my angularjs application, I have implemented an element directive that is equipped with an event listener. This listener is designed to respond to a broadcast event from the controller. app.directive('listItem', function(){ return { ...

javascriptangularjs