Adjust the color to a texture that is capable of casting shadows

I am currently working on setting up a lighting system for my scene to create shadows. However, I am facing an issue where changing the color of the material is not producing the desired effect of displaying shadows. Is there a way to modify the color of a MeshLambertMaterial after it has been added to the scene? And why are the light and shadows not being generated as expected? Whenever I attempt to change the color of the material, everything turns black.

Here is the snippet of code that I am using:

  material = new THREE.MeshLambertMaterial( { color: "#FFFFFF",name:$scope.datosMunicipio[i].nombre} );
  objMesh = new THREE.Mesh( extrude_geometrY, material );
  objMesh.receiveShadow = true;

var lightAmbient = new THREE.AmbientLight(0x000000);
scene.add(lightAmbient);

var luzDireccional = new THREE.DirectionalLight(0x000000,1);
luzDireccional.position.set(1,1,1).normalize();
scene.add(luzDireccional);

objMesh.material.color.set("#FF0000"); //I want to change the color

Answer №1

To set a color using hex-notation, use the setHex method:

objMesh.material.color.setHex( 0xFF0000 );

Alternatively, you can assign a THREE.Color like this:

var redColor = new THREE.Color( 0xFF0000 );
objMesh.material.color.copy( redColor );

For more information on colors, visit:

Answer №2

In my opinion, it would be beneficial to adjust the light color. MeshLambertMaterial and MeshPhongMaterial do not showcase colors effectively without additional lighting elements.

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

Extending a yet-to-be-created JavaScript (Node.js) object

I am working on implementing a feature similar to ExpressJS' res.send(), utilizing a portion of the NodeJS Http response object. An Http server can be set up as follows: res.send = function(data){ // Define the behavior of res.send here } var res ...

Determine the Color of Text Component in React

I have a Link component and I am trying to determine the color of the text in React. How can I achieve this? In Vanilla JS, you can usually find the color using element.style.color. However, when I attempt something similar with the following code using t ...

Is it possible to directly update the label text in AngularJS from the view itself?

I found the following code snippet in my HTML <span ng-class="newProvider ? 'newProvider' : ''" class="help-block"> {{ 'new-product.provider.helper' | locate }} </span> Whenever newProvider is se ...

Is it possible to activate the onChange function even when the input value is automated?

I am using a Form.Input element <Form.Input fluid required label="First name" placeholder="Jose" name="firstName" value={ _.isNil(selectedProfile) ? firstName : selectedProfile.first_name } onChange={this.onCustomerFieldUpdate} /> In my code, I am ...

Utilizing variables as identifiers in React Native programming

Trying to utilize a dynamic name for a property of an object. For instance, within the function provided below, aiming to use the value stored in the variable 'catagoryId' to access the corresponding child element and assign it to the variable c ...

Implementing jQuery Rollovers for Independent Elements

Hello everyone, I'm a new user seeking assistance on the site! I am currently working on implementing buttons that reveal a table when rolled over and change their own image to a tab, but here lies the problem - I want the tab image to remain visible ...

Can the background color be eradicated while dragging a png image?

Currently, I am working on developing a chess game in react-js using react-dnd. My goal is to create draggable and droppable PNG images that can be moved between various div elements representing the board squares. I attempted to set the opacity of the i ...

Ways to Verify the Existence of a Value in an Array Using JavaScript

In my Laravel blade file, I have an array that I am accessing in JavaScript like this: var data = {!! json_encode($data) !!}; When I check the console, the variable is displayed as seen here: variable data console print Additionally, I'm retrieving ...

Fetching JSON Data from Web Service using Ajax URL Field - A Simple Guide

I'm facing an issue while attempting to retrieve JSON Data from a web service using ajax url. This is how I have coded it so far: <script type="text/javascript> $('#kategoriTable').dataTable({ ajax: { u ...

Is there a workaround for making Three.js OnDocumentMouseDown compatible with touch screens?

To view the complete code, visit this Glitch project: Within public/components.js, I have defined a custom AFRAME component that enables rotation of an item when dragged with the mouse. AFRAME.registerComponent('drag-rotate-component', { sc ...

A Complication Arises with Browser Functionality When Embedding an Iframe within

I am experiencing a peculiar problem while embedding an iframe with a specific src inside an absolutely positioned div. Here's the basic structure of the webpage: .container { position: relative; overflow: hidden; width: 100%; heigh ...

Utilizing JavaScript: Passing a parameter into a function to be used with getElementById()

Implementing a feature that displays statistics by incrementing rapidly until reaching their final value when the element is in view, creating the illusion of a rising number. Encountering some difficulty in passing the necessary parameters to identify th ...

How can I display a limited number of items from this loop in Node.js using EJS?

If the loop contains more than 3 items, a "show more" button will be added to display the remaining items. <% include ./partials/header %> <div class='container'> <p><a class='btn btn-primary btn-large'href=&a ...

Using a series of functions that make use of (theID)

Hey there, I'm new to HTML and I've been trying to achieve something below. Unfortunately, it's crashing and I can't figure out if it's just a syntax error or if what I'm attempting isn't possible. The function declarati ...

Developing a custom camera system for a top-down RPG game using Javascript Canvas

What specific question do I have to ask now? My goal is to implement a "viewport" camera effect that will track the player without moving the background I am integrating websocket support and planning to render additional characters on the map - movement ...

Encountering difficulty with installing node_modules on Express js

Encountered an error while attempting to install node_modules from the package.json file. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_em ...

Showing JSON information on a web browser

Here is a snippet of JSON data that I am working with: {"earthquakes":[{"datetime":"2011-03-11 04:46:23","depth":24.39999999999999857891452847979962825775146484375,"lng":142.36899999999999977262632455676794 ...

Retrieving the function or state of a component within a higher-order component (HOC) wrapper

Hey there! I have a situation where Component A, which extends React.component, is wrapped with a higher order Component B. Now, in the methods of Component B, I need to either setState for Component A or call a function in A to do the setState. How can I ...

Bind jquery functions to elements created on the fly (jquery load php script)

I manage a php employee directory website that showcases all our employees in a table (linked to mysql), and you can click on each employee to view their details in another div. $('.emptab').click(function(event) { var status = $(this).attr( ...

Ways to structure this updateone query for mongoose formatting

UPDATE: After making adjustments to the query using arrayFilters recommended by someone here, the query is returning success. However, the values in the database are not being updated. I am attempting to update specific fields within a MongoDB collection ...