Distorted silhouettes cast on objects in three.js

Currently working on improving the quality of shadows in my scene

Check out this image: https://i.sstatic.net/ISYn8.jpg

If you're interested, here's my GitHub link too: https://github.com/mat148/shoeVR

Highlighted below is some code related to enhancing the shadows:

renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;

firePillar.castShadow = true;
firePillar.receiveShadow = true;

var directionalLight = new THREE.DirectionalLight(0x007c9a, 0.5);
directionalLight.position.set(500, 704, 0);
directionalLight.castShadow = true;
javascriptthree.js

Answer №1

Mastering shadows can be quite tricky. It's essential to take into account which meshes are casting shadows and if they are able to receive shadows.

Adjusting the ShadowBias can make a significant difference in your results.

Experiment with the following settings:

renderer.shadowMapSoft = true;
//Enable shadow casting for your light source
spotlight.castShadow = true;
spotlight.shadowBias = - 0.001;
//Increase the resolution of your shadow maps for better quality
spotlight.shadowMapWidth = 2042;
spotlight.shadowMapHeight = 2042;

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

The latest pathway fails to refresh in NextJs

I've implemented a search bar at the top of my app which directs to /search/[searchId].js page: <Link href={`/search/${search}`}> <button type='submit' className='btn-cta btn-3'>SEARCH</button> < ...

javascriptreactjsnext.js

Modifying React routes does not alter the path or outlet of the routes

On the app.js file, I have the following routes: import React from "react"; import Login from "./pages/Login"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Dashboard from "./pages/Dashboard" ...

javascriptreactjsreact-dom

What is the correct way to define a function parameter when using AngularJS Emit?

I've been exploring the emit feature in AngularJS and had a question about passing a function as an argument. In the Parent Controller: $scope.$on("getChildFunction", function(event, func) { console.log("The function is...", func); }) In the Ch ...

javascriptangularjs

Implementing Dynamic Checkbox Selection using JavaScript

Could someone please assist me with this coding challenge? HTML <div id="toggle"> <ul> <li class="active"><input type="checkbox" id="test" value="2014" name="test" checked/> 2014</li> <div style="display:block;" id ...

javascriptjqueryhtmlcheckbox

Tips for Repurposing a React Table

I am in the process of developing my own react component library to be used across my entire application. At the moment, I have started with a table component which is currently undergoing testing. However, I am facing the challenge of calling the componen ...

javascriptphpjqueryreactjs

Switching over a function from jQuery to Mootools

Here is a snippet of code used to refresh a specific DIV by making a request for data. The current function works as intended, but we are looking to migrate to Mootools. JavaScript Code: <script> jQuery.noConflict(); (function(jQuery) { jQuery ...

javascriptjqueryajaxfunctionmootools

Converting Python code into JavaScript for use on an iPhone device

Having a web application with backend developed in Python (using Django) and front end in HTML5 & JavaScript, where Python generated data is transferred to JavaScript/HTML through JSON. Now, I want to transform it into a mobile application, starting with ...

javascriptiphonepythonmobilepyjamas

Multiple instances of the identical 'Angular application' displayed simultaneously on the webpage

We've created a unique Angular 1.0 application that we aim to embed as a 'widget' within another website built with classic asp.net. During the development phase of our angular app, we take advantage of a range of gulp tools for tasks such ...

javascriptc#asp.netangularjsdom

Collapsing Bootstrap menu bar causing logo overlap

When the navbar collapses (when it shows the toggle icon), the menu items (home, services, portfolio, about, contact) overlap with the logo. If I remove the position:absolute from the logo (navbar-brand), the menu appears in the center. Is there a way to h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to import Node modules in WebWorker using NWJS

I've encountered a challenge that I thought would be straightforward. My project involves using nwjs (formerly known as Node-Webkit), which essentially means developing a desktop application with both Chromium and Node components where the DOM interac ...

javascriptnode.jsrequirejsnode-webkitweb-worker

Arranging DataTable by the newest date

I need to change the default sorting of a table from old date to recent date (1st column). Here is the code I have been trying: <script> $(document).ready( function () { $('#table_id').DataTable({ dom: 'B<"cle ...

javascripthtmldjangohtml-tabledatatable

"What is the syntax for pushing an object onto an array within an array in AngularJS

Looking to create an object structure like the one below: $scope.allBooks = { books:[ { name:"", id:"" } { ...

javascriptarraysangularjs

Implementing visibility toggles for objects in three.js using a graphical user interface

I am interested in controlling the visibility of objects in my scene through a button on a GUI. The following function currently hides/shows objects individually: g3white.traverse(function(child){child.visible = true;}); g3black.traverse(function(child){ ...

javascriptthree.js

Ways to designate as not defined or remove specific sections

I've been struggling for hours to figure out how to delete or set to undefined parts of the code below: $(document).ready(function() { // Generate a simple captcha function randomNumber(min, max) { return Math.floor(Math.random() * (m ...

javascript

Send a bundle of data through AJAX requests

An issue has been encountered on an HTML/PHP page named sucessful.php where a variable job_id passed from another page is not being received by the destination page interview.php. The problem arises when attempting to transfer two variables and their corr ...

javascriptphphtmlajax

Display an image when the iframe viewport is reduced in size by utilizing media queries

I am looking to showcase a demo.html page within a 400px square iframe. When the viewport is smaller than 400px, I want demo.html to only display an image. Then, when clicking on that image in demo.html, the same page should switch to fullscreen mode. Sim ...

javascripthtmlcss

Accessing the parent scope from a directive within a nested ng-repeat in AngularJs

Seeking guidance on accessing the parent scope within a directive nested in an ng-repeat. Here is an example: <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="section in sections"> {{section.Name}} <div ng-rep ...

javascriptangularjs

Create a PDF document using HTML code stored on a separate component within an Angular 2 application

I am facing an issue with my parentComponent and childComponent setup. Specifically, I have a button called downloadPDF in the parentComponent that is supposed to trigger a PDF download from the HTML code of the childComponent without displaying the childC ...

javascripthtmlangularjspdfjspdf

Which HTML tags can be activated with JavaScript to be interactive?

I'm currently diving into the world of JavaScript and one of the initial code snippets I've encountered is onclick. So far, I've seen it utilized in form buttons like this: <input type="button" onclick="checkName()" value="Check name" / ...

javascripthtml

Using video instead of static slides in HTML5

I am interested in adding a video background with text overlay on my website, similar to what can be seen here: Although I understand it involves CSS, I am struggling to achieve the desired effect. Here is the code snippet I have been using: video#bgvid ...

javascriptjqueryhtmlcss