Having trouble with Three JS shadows not displaying correctly?

I recently built an interactive 3D model on my website using ThreeJS, but I'm facing an issue with getting the shadows to work properly. As a beginner in ThreeJS, I might be missing out on some crucial steps.

Below is the JavaScript code I've used:

import * as THREE from "https://cdn.skypack.dev/three@0.132.2/build/three.module.js";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/GLTFLoader.js";

// Code snippet continues...

You can view the image of the model on my website here: enter image description here

I attempted seeking assistance from ChatGPT for resolving this issue, but unfortunately, their suggested fixes did not resolve the problem.

javascriptthree.jsshadow

Answer №1

If you're looking for a workaround, consider duplicating your objects and applying the shadow material instead of a regular material on the duplicate. The shadow material is designed specifically for creating shadows.

Check out Three.js ShadowMaterial

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

Encountering memory leaks and displaying repetitive data due to having two distinct observables connected to the same Firestore

I am currently utilizing @angular/fire to retrieve data from firestore. I have two components - one serving as the parent and the other as the child. Both of these components are subscribing to different observables using async pipes, although they are bas ...

javascriptangularrxjsgoogle-cloud-firestoreobservable

Retrieving data from getServerSideProps and utilizing it inside Layout component in Next.js

Currently, I am in the process of developing a web application with Next.js. This project involves creating an admin dashboard that will be utilized to manage various tasks, each with its own SSR page. DashboardLayout : export const DashboardLayout = ({ch ...

javascriptreactjsnext.js

What could be the underlying reason for the unusual behavior observed in this range polyfill implementation?

I am attempting to transform an HTML5 range input into a set of radio buttons. Each radio button corresponds to a value within the original range, with text displaying its value. However, I am encountering an issue where the last piece of text, meant to sh ...

javascriptjqueryhtmlcoffeescript

The error message "UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty" typically occurs

Struggling to successfully run the build using npm run build. Encountering the following error: UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty, rmdir '/var/www/html/abhinav/png-react/png-compressor/build/static' ...

javascriptreactjsnpm

Surprising Media Component Found in URL Parameters within the design

Exploring the page structure of my Next.js project: events/[eventId] Within the events directory, I have a layout that is shared between both the main events page and the individual event pages(events/[eventId]). The layout includes a simple video backgro ...

javascripttypescriptnext.js

Unable to locate the Shadcn error module: Error encountered when trying to resolve the path '@/components/ui/accordion' within the directory 'Desktop/sadcn/src'

I'm encountering an issue with my Shadcn setup in a simple React app with TypeScript. The error message I'm getting is: Module not found: Error: Can't resolve '@/components/ui/accordion' in '/home/vinayak/Desktop/sadcn/src&ap ...

javascriptreactjsuser-interfacejsxcustom-component

Steps to update the toolbar color of Mui DataGrid

Check out this unique custom Toolbar I created specifically for Mui dataGrid function CustomToolbar() { return ( <GridToolbarContainer> <GridToolbarColumnsButton /> <GridToolbarFilterButton /> <GridToolbarDensit ...

javascriptmaterial-ui

Node.js/Express/Jade scripts failing to load in the expected order

Imagine having this code snippet in a .jade file: doctype 5 html head title= title link(rel='stylesheet', href='/stylesheets/style.css') script(src='/javascripts/ocanvas-2.2.2.min.js', type='text/javascript') ...

javascriptnode.jsexpresspug

How to send parameters through the Google Maps API URL using Vue.js

When using $router.push(), I receive two parameters: {{ this.$route.params.lat }} and {{ this.$route.params.lng }}, which are latitude and longitude coordinates. To access a Google Maps URL, I need to include both of these parameters: https://maps.googlea ...

javascriptvue.js

Creating Child Components Dynamically using String Names in ReactJS

I've encountered an issue with dynamically rendering React Components within my DashboardInterface component. I have an array filled with string names of React Components, retrieved through an external mechanism. The goal is to render these Components ...

javascriptreactjs

Discover the syntax for reading route parameters in Angular

Currently, I am integrating the Paypal API into my project. After confirming a purchase, Paypal redirects to a specified URL. I set the desired URL as "localhost:4200/shop/order". However, when Paypal returns the URL, it appends the token and payerid at th ...

javascriptangular

When trying to run the code locally, JS and Bootstrap seem to have trouble functioning together, despite

Check out my codepen project here: https://codepen.io/ldrumsl/pen/ZxdZwa Below is the JavaScript code: $('#datetimepicker1').datetimepicker(); $('#datetimepicker2').datetimepicker(); Downloaded index.html file content: <!DOCTYPE ...

javascriptcssbootstrap-4codepen

What is the best way to transfer a value from a function to a variable in VueJs?

Currently, I am receiving the base64 of an image URL. When passing the getImage function to the savepdf function and attempting to store the callback function's base64_data in a variable, an error is thrown: An error occurs - Cannot set property &a ...

javascriptvue.jsvuejs2callbackjspdf

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

javascriptjqueryhtmltiles

Access array information using AngularJS

Sorry for any language issues. I am trying to figure out how to extract an array data from AngularJS in order to save it using Node.js. This is my AngularJS script: angular.module('myAddList', []) .controller('myAddListController&apos ...

javascriptarraysangularjsnode.js

Saving asp.net strings in different formats to datetime fields in a database

Can someone please assist me with saving the string value of textbox to the database as a datetime, and for updating/editing purposes, display it again in the textbox as a string? The reason for this is that the datetime input will be copied from Outlook a ...

javascriptc#jqueryasp.net

Ways to select a single checkbox when other checkboxes are selected in JavaScript

var select_all = document.getElementById("select_all"); //reference to select all checkbox var checkboxes = document.getElementsByName("testc"); //retrieving checkbox items //function to select all checkboxes select_all.addEventListener("change", function ...

javascriptjqueryhtmlcss

How do I access a specific child from an object/element retrieved by using the elementFromPoint() method in Javascript?

Is there a method to extract the child element from an element or object retrieved by the function elementFromPoint(x, y); Consider the following scenario: var elem = document.elementFromPoint(x, y); Let's assume that the element returned and saved ...

javascriptjqueryparent-child

What is the best way to conceal a row when a particular field is devoid of content?

Is it possible to hide an entire table row if a field is empty? For example: https://i.sstatic.net/tMW7L.png If a certain field is empty, I want the entire row to be hidden, either using JavaScript or jQuery. I have tried some methods but none of them fu ...

javascriptphpjqueryhtml

Is there a way to update a div element with an image without having to refresh

Currently working on a project for my studies where I am reading the x and y coordinates from a touch pad and drawing it in real time using PHP. I have created a draw page that takes these coordinates and displays them on an image, which is then shown on ...

phpjavascripthtml