Exploring the features of Three.js: materials and shadows

I cannot figure out why the mesh material I chose is causing issues. As you can see in the image: https://i.sstatic.net/4nijf.png

The black objects look fine, with smooth and correct shadows. However, the white objects appear strange and the shadows, in my opinion, are not perfect (especially noticeable on the HORSE object).

For the black objects, I used MeshPhongMaterial, while for the white objects I used MeshBasicMaterial. When I try to change the white objects' material to MeshPhongMaterial or MeshLambertMaterial, the white objects turn black.

You can view the source code here: https://fiddle.jshell.net/m4tv0s3p/

A similar issue can be found here: ThreeJS shadow not rendering

Does anyone have a solution or workaround to suggest?

javascriptcanvasthree.js

Answer №1

Make sure to include the following line in the renderer section:

renderer.shadowMapType = THREE.PCFSoftShadowMap;

Additionally, in the light section, don't forget to add:

spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;

These adjustments are necessary for the three.js version you are currently using (r60), though it is quite outdated.

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

Turn off Chrome's new tab preview thumbnails

Is there a method to prevent Google Chrome from displaying certain pages as thumbnails? I am inquiring because I am developing a website that contains confidential information. As it stands now, the sensitive data can be viewed in the thumbnail preview. ...

javascripthtmlgoogle-chrome

Implementing a method to allocate rewards to individual players within a game Bank using arrays in Node.js and JavaScript

In my interactive game, players can choose between two sides to place their bets. At the end of the game, there will be one side declared as the winner and those who placed winning bets will receive a portion of what they wagered. However, I am facing an i ...

javascriptarraysnode.jsfor-loopmath

Transform a JSON array with keys and values into a structured tabular format in JSON

Looking to transform the JSON data below for a Chart into a format suitable for an HTML table: var chartJson = [ { header : '2016', values : [1, 5, 9] }, { header : '2017', values : [2, 4, 8] ...

javascriptnode.jsjson

ExpressJs does not support query parameters with the router.get method

I am currently working on developing an Express app. Here is the code snippet I am using: const express = require("express"); const router = express.Router(); router.get("/:id", ControllerHandler(UserController.getSingle, GetUserReque ...

javascriptnode.jsexpress

An issue has occurred while trying to execute the npm start command within PhpStorm

When I try to run npm start on Windows' command prompt, it works fine. However, I encounter errors when running it in the PhpStorm Terminal. You can see the errors here. Is this a result of them being different platforms or could it be related to som ...

javascriptnode.jscmdnpmphpstorm

How can a method be called from a sibling component in Angular when it is bound through the <router-outlet>?

In my current project, I have implemented an application that utilizes HTTP calls to retrieve data from an API endpoint and then displays it on the screen. This app serves as a basic ToDo list where users can add items, view all items, delete items, and pe ...

javascriptangularapiangular-changedetection

The div layer is positioned above the flash object

I have successfully implemented a method where I position a div over a webpage containing a flash object. This absolutely positioned div has a high z-index and captures click events. The main goal is to trigger the click event on the div when the flash obj ...

javascriptjqueryflashfirefox

WebpackError: The global object "document" could not be found

I am encountering an issue with my website build using gatsby.js and bulma. While building the site, I receive the following error message: WebpackError: document is not defined The only instance where I use document is for the navbar-burger toggle code ...

javascriptreactjsgatsbybulma

Is there a way to automatically generate additional text fields based on the user's input?

Is there a way to dynamically add multiple text fields for color and choose design based on user input? For instance, if the user enters 5 in the quantity field, how can I replicate the color and choose design fields 5 times? Additionally, how should I st ...

javascriptreactjsmaterial-ui

Is it possible to pass the image source to a Vue.js component through a

I am encountering an issue while trying to display an image in the designated location within display.vue. Even though {{ someText }} returns the correct file path (../assets/city.png), the image is not being output correctly. Here is how my code looks: ...

javascriptvue.jsvuejs2bind

Prevent the <a> tag href attribute from functioning with jQuery

I came across this code snippet: <script type="text/javascript"> $(document).ready(function() { $("#thang").load("http://www.yahoo.com"); $(".SmoothLink").click( function() { $("#thang").fadeOut(); $("#thang").load( ...

javascriptjqueryajax

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

javascriptcssreactjsimage

Is it possible to delete an element from an HTML form?

I'm facing an issue with removing an element from my HTML form during the loading process. The specific element in question is as follows: <input type="hidden" name="testToken" value="1000ad"></input> Here's what I've tried so ...

javascriptjqueryhtml

Error: JavaScript alert box malfunctioning

I am facing an issue with my JavaScript code. I have successfully implemented all the functionalities and can change the color of an image background. However, I am struggling to prompt a pop-up message when clicking on an image using "onclick". I have tri ...

javascripthtml

div.load() results in a complete page reload

When I save form data, my goal is to load only the specific div without refreshing the entire page. However, despite using the preventDefault() command, the form still seems to be posting the whole page. I have tried adding the following code: $("#btn ...

javascriptjqueryhtmlasp.net-mvc

Exclude a particular row from a table when there is no identifier

My PHP code generates a basic table. <table border="1" id="control> <tbody> <tr>...</tr> <tr>...</tr> <tr>...</tr> //Row #3 <tr>...</tr> <tr>... ...

javascripthtmlcss

add the AJAX response to the specified div element

I'm currently using an ajax call to retrieve movie data from the IMDb API for 'The Shawshank Redemption'. My goal is to display this data within the designated div element. <div id="movie-data"></div> Here's my current Jav ...

javascriptjqueryhtmlajax

Set an attribute without replacing any existing class attributes

I have developed a script that updates the class attribute of the body element on my website when an option is selected from a dropdown menu. However, I am facing an issue where it overrides the existing dark mode attribute. The purpose of this script is ...

javascripthtmlcss

What is the best method for initializing Bootstrap data attributes API?

I've been puzzled by this issue for a while now. When trying to use the JavaScript components, I can't seem to grasp how to utilize them using the Data Attributes API, also known as the first-class API. For example, take the modal component ment ...

javascripthtmltwitter-bootstrapmodal-dialog

How can you update an image's source when hovering over it?

My goal is to switch the image source upon mouseover using a combination of asp.net and javascript. Here is the code I am currently using: <asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png" OnMouseOver="src='~ ...

c#javascriptjqueryasp.netcss