Using Three.js to generate shadows utilizing MeshFaceMaterial

I've been experimenting with different types of lights such as Directional, Spot, and Point, but none seem to cast a shadow on MeshFaceMaterial objects. Instead, the MeshFaceMaterial object just turns black.

Check out my Test Website (please note that it is constantly being updated).

Is there a way to create shadows on MeshFaceMaterials using lights? Does MeshFaceMaterial even support shadows? According to the documentation, it only affects objects using MeshLambertMaterial or MeshPhongMaterial.

Below is a sample code snippet showing how I am loading a .json model:

loader.load('sample-concrete.js', function ( geometry, materials ) {  
    mesh1 = new THREE.Mesh(
        geometry, new THREE.MeshFaceMaterial( materials )
    );

    mesh1.rotation.x = -Math.PI / 2;
    scene.add( mesh1 );
});

And here's an example of the material from my .json file:

"materials": [
{
"DbgIndex" : 0,
"DbgName"  : "Steel",
"colorDiffuse"  : [0.3059, 0.0471, 0.0471],
"colorAmbient"  : [0.3059, 0.0471, 0.0471],
"colorSpecular"  : [1.0000, 1.0000, 1.0000],
"transparency"  : 1.0,
"specularCoef"  : 25.0,
"vertexColors" : false
}

Thank you for your help!

Answer №1

A MeshFaceMaterial is essentially a grouping of materials. If your variable materials includes either MeshLambertMaterial or MeshPhongMaterial, everything should work smoothly. Shadow effects will depend on the presence of a DirectionalLight or a SpotLight.

To ensure proper functioning, make sure that your renderer has:

renderer.shadowMapEnabled = true;

Additionally, confirm that your light source has:

light.castShadow = true;

For each individual mesh in your scene, specify:

mesh.castShadow = true;

Lastly, introduce at least one object (e.g., a plane) with the following settings:

plane.receiveShadow = 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

Show the current temperature data retrieved from the weather API

I'm trying to figure out what's causing the issue with the temperature not displaying. Can anyone help me identify and fix the error? <script type="text/javascript"> $.ajax({ url: 'https://api.weather.gov/gridpoints/EWX ...

Tips for creating a sequence pattern in JavaScript or jQuery resembling 12345-1234567-8

I am looking to adjust this code so that a hyphen "-" is automatically inserted after every 5 characters, and then again after every 7 characters. Currently, the code only inserts a hyphen after every 5 characters. <html> <head> <scri ...

Ways to organize an array based on various characteristics

I am seeking assistance regarding grouping in Javascript. Below is an array where each item has either is_sweet, is_spicy, or is_bitter set to true: const foodsData = [{ name: 'mie aceh', is_sweet: false, is_spicy: true, ...

Utilizing AJAX to integrate the Google Maps Direction API

Currently, I am developing a small website that utilizes the Google Maps API and AJAX to load directions based on selected locations from a dropdown menu. The database stores latitude and longitude coordinates of various locations, which are retrieved via ...

adjust time in jQuery AJAX request when a button is clicked

I have the following code snippet that triggers when a button is clicked. When a user clicks on a button, I want to show a progress bar or waiting image in the browser for 5 seconds. How can I set a timeout and display the progress bar or waiting image wh ...

Update a document by removing elements from an array where the objects are of a certain value

I am trying to remove specific tweet objects from the timeline list within the user model. The tweets I want to remove are those authored by a user with a matching id user._id. I attempted the following approach: router.get("/follow/:userId", is ...

What are some ways to conceal the API connection within a button?

I have a code that allows me to perform a certain API call with a link. Here is an example: <a class="btn btn-default" href="https://testapi.internet.bs/Domain/Transfer/Initiate?ApiKey='.$user.'&Password='.$pass.'&Domain=&ap ...

Is it possible to make the home page of a Next.js app in a subfolder with basePath accessible outside of the basePath?

My Next.js application is running in the '/portal/' folder and basePath has been configured as: module.exports = { basePath: '/portal' } Now, I want the index page of the application to be accessible at the site root (without baseP ...

The VueJS app seems to be experiencing difficulties with rendering the content

Just starting out with VueJS and I have my initial files - index.html and index.js. I want to stick with just these two files and not add any more. Here's the content of index.html: <html lang="en"> <head> <meta charset ...

What is the best way to mock a Typescript interface or type definition?

In my current project, I am working with Typescript on an AngularJS 1.X application. I make use of various Javascript libraries for different functionalities. While unit testing my code, I am interested in stubbing some dependencies using the Typings (inte ...

Display or conceal navigation items in AngularJS based on the user's logged-in status

My AngularJS app is a single-page application that works with Express, node.js, and MongoDB using Mongoose. I am also implementing Passport for user management/authentication. I want the navbar items to dynamically change based on whether a user is logged ...

Retrieving the data from an AJAX JSON variable

Inside my JavaScript function, I am fetching data like this: var jsonData = $.ajax({ url: "pie_chart_community.php", community_id: $c_id, dataType: "json", async: false }).responseText; Is there a way for me to access the community_id in ...

Is it possible to store an HTML element tag in a variable?

I've been learning JavaScript on w3schools and freecodecamp, but I stumbled upon something in w3schools that has me puzzled. Can someone please explain why this particular code snippet works? The variable "text" is declared as containing the string " ...

how can I trigger an AJAX request after a specific JavaScript function in JSF 2.0

On a regular basis, I utilize a particular method, but I encounter an issue. There is a functionality that involves deleting a certain entity, however, I wish to notify the user who triggers this action with a commandLink by calling a JavaScript function c ...

Improving an HTML list with JavaScript

My current project involves a JavaScript game similar to Scrabble. I want users to be able to create new words in the game, and have those words added to a list that is displayed on the page within a div element. However, I'm struggling to understand ...

Following the execution of npm install, I encountered an issue stating: "set-value has encountered Prototype

I've encountered a problem with my React Native app while running npm install. The error message reads, "found 15 vulnerabilities (5 moderate, 10 high) in 1182 scanned packages." Upon further analysis using npm audit, it seems that the majority of err ...

How can the CORS issue be resolved when sending a form from a client to an AWS API gateway function?

Within my front end React application, I am looking to implement a contact form that will submit data to a Lambda function via an API Gateway with a custom domain attached. The frontend operates on the domain dev.example.com:3000, while the API Gateway is ...

Creating dynamic HTML table rows with data from a JSON object

Query: In search of a Jquery or JavaScript solution for generating dynamic table rows with colspan using the JSON structure provided below. I am encountering difficulties in creating the necessary rows and have attempted several approaches without success ...

Determine the number of elements chosen within a complex JSON structure

I need to figure out how to count the length of a jsonArray, but I'm stuck. Here's an example to start with: https://jsfiddle.net/vuqcopm7/13/ In summary, if you click on an item in the list, such as "asd1", it will create an input text every t ...

Ensure that the function .each() waits for the element to be converted to a DataURL

Utilizing html2canvas for the conversion of HTML elements into canvas images, I iterate through the HTML using .each to pass elements to html2canvas. Once an element is converted into a DataURL, it is added to an array called content. $('.itinerary- ...