Shading a cylinder in Three.js

Attempting to create a chocolate-colored cylinder using the code snippet below:

const cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 100, 100, 50, false), new THREE.MeshNormalMaterial({ color: 0xd2691e }));

However, the color doesn't seem to change as expected. When trying the following code:

const cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 100, 100, 50, false), new THREE.MeshBasicMaterial({ color: 0xd2691e }));

The color changes, but the top face ends up looking like solid blob along with the sides, rather than giving a true 3D cylindrical shape.

While researching solutions, I came across this helpful question which suggests random color changes for faces. However, I am specifically looking for a way to distinguish colors between the top and the sides of the cylinder.

javascriptthree.js

Answer №1

For optimal results, it is recommended to utilize the MeshLambertMaterial. Additionally, ensure that there is sufficient lighting in the scene to avoid rendering issues.

let myScene = new THREE.Scene();

let myCylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 100, 100, 50, false), new THREE.MeshLambertMaterial({ color: 0xd2691e }));
myScene.add(myCylinder);

let myLight = new THREE.PointLight(0xffffff);
myLight.position.z = 200;
myScene.add(myLight);

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 there a way to compare the attributes of two objects to see if they are similar, except for one attribute?

Looking at the two objects below, my goal is to compare their attributes (name, modifiers, price) for equality without considering one particular attribute (quantity). For instance, in the scenario given, if I were to compare Object A and Object B, they w ...

javascriptreactjsobject

Modify the state when the navigation link is marked as active

I'm currently facing an issue with my code. I am working with ReactJS and attempting to update my state isActive when my navLink is active. class Navigation extends Component { constructor() { super(); this.state = { isActive: false, ...

javascriptreactjs

The jQuery .next() function is applying a class to each element

I am struggling with adding a class to the <a> elements in my Bootstrap 4 Carousel when the slider changes. Currently, my code successfully adds the class .highlight to the next <a> elements, but it adds it to all subsequent elements. Addition ...

javascriptjquerybootstrap-4

Executing a Python script within a Django project by clicking on an HTML button

There's a Python script file located in a Django project, but it's in a different folder (let's call it otherPythons). I'm looking to execute this Python file when an HTML button is clicked using JavaScript. Only looking for solutions ...

javascriptjquerypythonajaxdjango

Ending a session in Node.js with Express and Socket.io

I've been grappling with this issue for a few days now and I'm just not able to wrap my head around it. I need to end my session when I navigate away from the webpage, but the error message I keep receiving (which ultimately crashes the server) r ...

javascriptnode.jsexpresssocket.io

Sharing controller methods in Angular.js is a key aspect of enhancing

In my current project, I originally used Knockout for the CMS functionality, but decided to switch to Angular because I preferred its features. One of the key sections in the CMS is dedicated to 'Users', featuring a table where headers can be cli ...

javascriptangularjs

Warning is not triggering upon redirection from another page

I'm encountering an issue with the following code within the body tag of a view in MVC. The alert message displays the first time the page loads, but it doesn't execute when the control is coming through a redirect. Despite setting breakpoints a ...

javascriptc#.netasp.net-mvc-3

How to stop the default behavior of the tab key press in AngularJS

Hello, I am having an issue with an input field that triggers the add_plu() function when the tab key is pressed. While it does work as intended, the default action of the tab key (moving to the next element on the page) also occurs. I am wondering how I ...

javascriptjqueryangularjsangular-uiangular-ui-bootstrap

Retrieving Data from AngularJS Service

Struggling to populate data from a service into my view. Here is how I have defined the service: app.factory('nukeService', function($rootScope, $http) { var nukeService = {}; nukeService.nuke = {}; //Retrieves list of nuclear weap ...

javascriptangularjsserviceload

Using jQuery in Angular, you can add a div element to hidden elements by appending

So, I have a hidden div that I want to show on button click. And not only do I want to show it, but I also want to append another div to it. The show and hide functionality is working fine, but the appending part seems tricky when dealing with hidden eleme ...

javascriptangulartypescript

PHP not receiving POST information from $.ajax call

My JavaScript triggers a POST method when the datepicker loses focus, calling the script rent-fetch-pick-up-point.php. However, the PHP script gets stuck at the if-statement because it's not receiving the POST data. The datepicker is associated with a ...

javascriptphpjqueryhtmlajax

From jQuery to HTML to PHP, then back to HTML from PHP through jQuery

Hey, I have a code snippet that I'm working on: <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> function get() { $.post(' ...

phpjavascriptjquery

Encountering issues with the functionality of the MUI Select component, causing the application to crash during

The issue has been successfully resolved I have been in the process of constructing a modal that includes a form and incorporating the MUI Select component. However, upon opening the modal, the application encounters an error; removing the Select componen ...

javascriptreactjsmaterial-ui

Check if array2 is partially ordered as array1 in JavaScript

Is there a more efficient way to achieve these conditions in JavaScript using vanilla or lodash? const array1 = [1, 2] const array2 = [1, 2, 3, 4] //true const array2 = [1, 3, 2, 4] //true const array2 = [4, 3, 2, 1] //false const array2 = [2, 3, 1, 4] / ...

javascriptarrayslodash

Navigating the style properties using jQuery loops

I have an event listener for a click on a specific div. $('div').on('click', function() { var styles = $(this).attr('style').split(';'); $.each(styles, function(i) { var style = this.split(':&ap ...

javascriptjqueryhtmlcss

Struggling to convert my VueJS component from JavaScript to TypeScript, feeling a bit lost

I am new to VueJS and I am facing a challenge converting my VueJS project to use TypeScript. I have been trying to bind functions to certain variables in JavaScript, but I am struggling with accomplishing the same in TypeScript. Even though there are no er ...

javascripttypescriptvue.js

Utilizing objects from a JSON file within an HTML document

I'm currently in the process of creating a comprehensive to-do list, and I want to establish a JSON file that will link all the items on the list together. Despite my efforts, I find myself uncertain about the exact steps I need to take and the speci ...

javascripthtmlarraysjsonobject

Leveraging external data for testing in Protractor script

I am encountering an issue while attempting to access test data using JSON, as it keeps showing up as undefined. I am implementing a Page Object Model and trying to reference external test data. However, when passing the values from my test data into a fun ...

javascriptjsonnode.jsselenium-webdriverprotractor

What is the best way to display a nested Array inside another Array using React?

I'm currently working on a currency converter project where I need to display a list of currencies and their values. Here is an example of the data structure I am receiving from an API using Axios: Object {type: "li", key: "0", ref: null, props: Obje ...

javascriptreactjsaxios

Convert base64 data to binary in AngularJS and upload it as an image file to the server

I am currently utilizing a tool to crop images within my AngularJS application, which can be found here: https://github.com/fengyuanchen/cropper However, I am facing an issue when attempting to store data on the server. Instead of sending the cropped imag ...

javascriptjqueryangularjscrop