three.js: shadows created by a mesh with varying levels of transparency

My model has a texture with certain transparent areas (alpha equals zero).

But when the model casts a shadow, it looks like it's solid.

Is there a way to solve this issue?

Answer №1

When working with shadows in three.js, meshes are considered solid when viewed from the perspective of the light source.

However, if your mesh contains a transparent texture or an alpha map, you can achieve more accurate shadows by using a CustomDepthMaterial for the mesh.

There are multiple methods to accomplish this, one of which involves utilizing a custom ShaderMaterial. An example of this approach can be found in this specific three.js demonstration.

https://i.sstatic.net/tEuQH.png

For simpler scenes, a common pattern to follow is:

var customDepthMaterial = new THREE.MeshDepthMaterial( {

    depthPacking: THREE.RGBADepthPacking,

    map: myTexture, // alternatively, alphaMap: myAlphaMap

    alphaTest: 0.5

} );

mesh.customDepthMaterial = customDepthMaterial;

Version used: three.js r.85

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

Unable to retrieve the email addresses of Facebook users using the Facebook JavaScript SDK

Utilizing the Facebook authentication feature on my website through javascript sdk, I am able to retrieve my own email and name. However, when users log in, only their names are accessible (since it's linked to my fb developer app). Despite prompting ...

How to merge text (string) with date in HTML using JavaScript

I am attempting to blend a day with the phrase "this is the day" in HTML. I gave it a shot, but the concatenation didn't work as expected. ...

Exposing external variables within the setInterval function

Here is the snippet of code I am working with: update: function(e,d) { var element = $(this); var data = element.data(); var actor = element.find('.actor'); var value = basicdesign.defaultUpdate( e, d, element, true ); var on = templateEn ...

Ways to access a JavaScript function on a div with multiple identifiers

Currently working on developing a discussion panel using ASP.net, where each comment is assigned a unique id. I am looking to trigger the jQuery click function whenever a user clicks on a comment. However, since the comment ids are dynamically assigned an ...

Splitting HTML elements with AngularJS Ng-repeat separators/dividers

I am brand new to Angular and have a list item filled with some data: <li ng-repeat="content in contents"> <a class="item" href="#"> <p><strong>{{content.Company}}</strong></p> <p>{{content.Town}}, ...

You are not allowed to have a union type as the parameter type for an index signature. If needed, consider using a mapped

I'm attempting to implement the following structure: enum Preference { FIRST = 'first', SECOND = 'second', THIRD = 'third' } interface PreferenceInfo { isTrue: boolean; infoString: string; } interface AllPref ...

JavaScript: Invoking a function within another function via an HTML document

I have a unique scenario where I have one function inside another and I am looking to call the inner function from an HTML document. <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> ...

Utilizing React with a Bootstrap Select element populated by an API call. Following form submission, I aim to automatically deselect the previously selected

After submitting the form, I am trying to reset the state to an empty value for the dropdown menu, but the selected item still appears before submitting the form. Any assistance in identifying the issue would be greatly appreciated. Thank you. Please see ...

What causes the initial array to be altered when modifying the value returned by find()?

const courses = [ {'id':101,'name':'Complete Web Development'}, {'id':102,'name':'Data Structures and Algorithms'}, {'id':103,'name':'React'} ]; let sele ...

Trying to access a frame with URL from JavaScript in the same domain in an unsafe manner

I am encountering an issue while attempting to access the URL of the parent window from an iFrame. The error message I received on my server is as follows: Unsafe JavaScript attempt to access frame with URL from frame with URL . The frame being acc ...

jQuery AJAX Triggered Only Once in Callback Function

I am facing an issue with the jQuery get function within my updateMyApps. The function works fine when called directly after it is declared. It successfully loops through the data and appends elements to the DOM. However, when I submit the form #addapplic ...

Can the garbage collector in Typescript/JavaScript effectively handle circular references, or does it result in memory leaks?

When working in languages such as C#, managing memory is not a problem. However, this can lead to difficult-to-find memory bugs in other languages. Is it safe to use the following code snippet in Typescript or Javascript without encountering any issues? c ...

Using Webpack to directly embed image paths in your code

I am working on a project that uses webpack and vue.js. I encountered an issue when trying to add an image to the vue template using src '/images/imageName.png', which resulted in a 404 error. How can I adjust the configuration to recognize absol ...

Transform the array of objects into different clusters

I am facing a challenge where I have an object returning two arrays of objects from an API. My goal is to transform this data into a new array of objects in order to effectively group the information for the Vue v-select component. For a visual representat ...

I am attempting to update the URL of an iframe dynamically, but I am encountering an issue: the Error message stating that an Unsafe value is being

Currently, I am attempting to dynamically alter the src of an iframe using Angular 2. Here is what I have tried: HTML <iframe class="controls" width="580" height="780" src="{{controllerSrc}}" frameborder="0" allowfullscreen></iframe> COMPONE ...

Click on Angular model refresh

I am facing an issue with an input field that uses the "filtro3" model. When I click on it, I want to clear its contents. The following code works as expected: <input type="text" ng-model="filtro3" placeholder="Buscar" ng-click="filtro3 = null"> Ho ...

Verify the validity of a form using JavaScript and by utilizing HTML5 validation, then proceed to save the form data in local storage

I'm fairly new to working with JavaScript and jQuery. Currently, I am attempting to validate the HTML5 validation of a form using JavaScript. When the form is valid, I want to save the data in localstorage WITHOUT having to reload the webpage. Here is ...

The error message in Express points to module.js line 550 and states that the module cannot be

I am currently in the process of setting up a basic express application using the code below: const express = require('express'); const app = express() const bodyParser = require('body-parser'); const cookieParser = require('cooki ...

What could be causing the issue with GraphQL not injecting data into my React component prop?

Utilizing the instructions provided in this tutorial, I am in the process of crafting a Gatsby blog that integrates Markdown pages. My current focus lies on constructing a 'post-repeater' component, designed to iterate through all my posts and g ...

Usage of Firebase data

Looking for assistance on how to retrieve data from Firebase Cloud Store. My code includes the Firebase configuration and app.js but I'm facing an issue where the page appears blank on localhost:3000 without any errors. Below is the firebase.js confi ...