Creating subtle shadows for glb models in Three JS while maintaining soft lighting

Seeking advice on implementing proper lighting in my three.js project. I am new to working with 3D models and currently struggling to achieve the desired lighting effects. The image linked below illustrates what I aim to accomplish:

https://i.sstatic.net/ZBDbf.jpg

However, when I import my glb model and apply different lighting techniques, the result is not as expected: https://i.sstatic.net/QQHJZ.png

The model appears dark and I have experimented with various lighting methods such as ambient lights, point lights, hemisphere lights, etc. without success. I have included a snippet of the current code where I am using point lights:

var light = new THREE.PointLight( 0xffffff, 10 );
light.position.z = 10
camera.add(light)
var light2 = new THREE.PointLight( 0xffffff, 10 );
light2.position.set(0, -20, 30)
scene.add(light2)

I welcome any suggestions or insights on how to properly achieve the desired lighting effect for my scene. Thank you.

javascriptthree.jslightinggltf

Answer №1

Upon my investigation, I discovered that Blender has a feature known as an environment map

This led me to recreate the environment within my scene.

By importing RoomEnvironment like this:

import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment';

I generated the room environment:

const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator( renderer );
scene.environment = pmremGenerator.fromScene( environment ).texture;

Next, I included the following attributes in my scene object:

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
renderer.outputEncoding = THREE.sRGBEncoding;

As a result, the lighting now appears correctly! While I'm still learning about toneMapping functions, implementing them has resolved my issue for now.

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

Initially, when fetching data in React, it may return as 'undefined'

I have a function component in React that handles user login. The functionality is such that, based on the username and password entered by the user in the input fields, if the API response is true, it redirects to another page; otherwise, it remains on th ...

javascriptreactjs

Tips for automatically injecting class text in Angular using dependency injection

Is there a method to automatically add a class when the user selects, for example, a list in the text editor? I would like to inject a class into the ul tag before saving it to the database. ...

javascriptangularjstextbox

How to create an onClick event handler in ReactJS and pass 'this' parameter

Here is the code for my component: import React, {PropTypes} from 'react'; export default class Viewdesc extends React.Component { render() { return ( <div className="col-md-12 slide-row"> <div className="col-md-12 overview- ...

javascriptreactjsexpress

One way to retrieve this attribute with jQuery is by specifying the div element in question

I am facing an issue with a div that is defined within a particular context. Let's consider the div as shown in the code snippet below: <td itemid='desired number'> <div>div 1</div> <div class="action">div 2</ ...

javascriptjqueryhtml

Creating a Wordpress Metabox that utilizes radio inputs generated with Javascript instead of the traditional checked() function in Javascript as an alternative

Despite my efforts to find a solution on various forums, I am still stuck with this issue without making any progress. The code snippet below contains two Radio inputs. These inputs are generated on the post edit page of Wordpress CMS and their values com ...

javascriptphpjquerywordpress

Creating a row of aligned card components in React

Recently, I began learning React and successfully created a card component using Material UI. However, this time around, I'm attempting to create it using axios and map() methods. I expected the cards to be displayed in the same row horizontally, not ...

javascriptreactjsecmascript-6material-uifrontend

Exploring the process of creating a interactive rectangular border on an image with JavaScript

I'm currently working on a project that requires me to draw multiple bounding boxes interactively within an image displayed on a web browser. After drawing the bounding boxes, I will need to extract their coordinates. Are there any suggestions for a J ...

javascriptnpmimage-processing

implementing sprites in three.js with various camera perspectives

I want to discuss how to implement sprites with three.js using both perspective and orthogonal cameras effectively. Currently, I have a scene where a building is being displayed. In one part of the scene, all the levels of the building are stacked to show ...

three.js

Cutting Out Sections of a List

I'm currently working on an app that involves looking up and navigating to specific locations. I've encountered an issue with the coordinates in my code containing a ',0' at the end, which is not compatible with Google Maps. Manually re ...

javascripthtmlarraysangularjsgoogle-maps

What factors influence the speed of an Ajax request?

It is common knowledge that the amount of data transmitted to the server, as well as the volume of information returned in a call can greatly affect its speed. However, what I am curious about is whether the following factors might also impact the transmi ...

javascriptjqueryajaxperformance

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

We have implemented a jQuery grid where the last column contains a link. When this link is clicked, a new panel should appear providing additional information. To achieve this, we utilized a formatter that generates a hidden div along with the link. Howev ...

javascriptjqueryhtmlcssjqgrid

What is the recursive process for printing the numbers 1 to 5 and then 5 to 1?

I was looking to print numbers from 5 to 0 and then from 0 to 5 in the most concise way possible. The code I came up with is below. However, I am open to other suggestions that may require fewer lines of code. Looking forward to your feedback. Thanks! ...

javascriptjquery

Inquiries regarding node.js

While delving into research on node.js and Mongodb, I encountered a few areas that require clarification. My aim is to query Mongodb from the web using JavaScript because of my familiarity with the language. Additionally, it aligns well with Mongodb' ...

javascriptnode.jsmongodbweb

Difficulty navigating through pages on an iPad due to slow scrolling with JavaScript

My operation is executed within a scroll function, like this: Query(window).scroll(function(){ jQuery('.ScrollToTop').show(); // my operation. }); While my web page responds quickly to the operation, it seems slo ...

javascriptphpjquery

When does the frustum culling take place for THREE.Lines in Three.js?

While drawing a few lines in my project using THREE.Line, I've noticed that sometimes the line disappears from the screen under certain conditions. One common scenario is when one endpoint of the line is outside of the camera's field of view whil ...

three.js

Employing global variables in JavaScript files with Vue3

In my Vue3 project, I have defined global variables like this: app.config.globalproperties.$locale = locale A composable function has been created to dynamically retrieve these global variables: import { getCurrentInstance ) from 'vue' export f ...

javascriptvue.jsglobal-variablesvuejs3vue-composition-api

An issue of "SignatureDoesNotMatch" arises while trying to send an email using Node AWS SDK for the Simple Email Service

I am facing an issue while attempting to send an email using the @aws-sdk/client-ses SDK in Node. The error I encounter is: SignatureDoesNotMatch: The request signature we calculated does not match the signature you provided. Check your AWS Secret Access ...

javascriptnode.jsamazon-web-servicesamazon-simple-email-service

Determining the Nearest Date in an Array Using JavaScript

In my array, I store information about each day as an object. For example: {day_year: "2012", day_month: "08", day_number: "03", day_name: "mon"} To enhance the day objects, I have included a timestamp attribute using the following function: function co ...

javascriptarrayssearch

Determining the lowest and highest values for a slider's range

I am looking to extract the minimum and maximum values from a price range. Here is the code snippet for reference: http://jsfiddle.net/dhana36/b453V/2/ Currently, I have one input field that controls both minimum and maximum values. However, I would pref ...

javascriptphpjqueryhtmlajax

What methods does MaterialUI utilize to achieve this?

Have you checked out the autocomplete feature in their component? You can find it here: https://mui.com/material-ui/react-autocomplete/ I noticed that after clicking on a suggestion in the dropdown, the input box retains its focus. How do they achieve thi ...

javascriptreactjsvue.jsmaterial-uivuetify.js