Illumination shining through the depths of three-dimensional shapes

I'm currently working on an HTML project that involves integrating ThreeJs. I have successfully created 4 spheres, with one emitting light and the other three forming a wall. However, I am facing an issue where the spheres behind the wall are still reflecting light. Can anyone suggest a solution to prevent this reflection?

So far, I have experimented with changing the materials of the spheres behind the wall to Lambert and Phong, as well as setting castShadow to true and recieveShadow to false.

(function onLoad() {
  // code for initializing camera, scene, lights, and geometries
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

I am looking for a solution where the spheres behind the wall do not reflect any light when they are out of sight, but only show reflections when they are in front of the wall.

javascriptthree.js

Answer №1

To achieve the desired outcome, consider utilizing shadows in your project. Make sure to set Object3D.castShadow and Object3D.receiveShadow to true for both your spheres and ground elements. Take a look at this live example for reference:

https://jsfiddle.net/85q3sfeg/

It's important to note that three.js does not currently support selective lighting. This limitation has been discussed on GitHub here: https://github.com/mrdoob/three.js/issues/5180

If all objects in your scene have a lit material applied, you won't be able to specify which light sources affect each object.

three.js R103

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

In Angular, what is the best way to change the format of the timestamp '2019-02-22T12:11:00Z' to 'DD/MM/YYYY HH:MM:SS'?

I am currently working on integrating the Clockify API. I have been able to retrieve all time entries from the API, which include the start and end times of tasks in the format 2019-02-22T12:11:00Z. My goal is to convert the above date format into DD/MM/Y ...

javascriptjqueryangularangular-pipeangular-date-format

Encountering a JSON_PARSER_ERROR when trying to call Google FCM using MobileFirstAdapter JS

I am working on integrating Google FCM Api for sending Push Notifications. Below is the snippet of code from my JavaScript file: function sendNotificationToUser() { var request={ path :'/fcm/send', method: 'POST&ap ...

javascriptjsonibm-mobilefirstmobilefirst-adaptersmfp

Different methods to handle form data sent via AJAX in C# programming

I'm working on a project and I've created this javascript code snippet: $(document).ready(function(){ $("form").submit(function(){ var form = $("form").serialize(); $.ajax({ type:"post", ...

javascriptc#jqueryajax

JavaScript: employing a for loop as a variable declaration

Recently, I've been delving into JavaScript and exploring the functionality of the 'for' statement. However, I have a question that's been on my mind. I've managed to use the 'for' statement to produce output, like this: ...

javascriptarraysvariablesfor-loop

Why is this component not functioning properly?

I am struggling with making a function to add a component dynamically when I click a button, similar to the code below. However, my attempt at creating a separate method for adding the component instead of using an inline expression is not working. Can som ...

javascriptvue.js

[VUE Alert]: Rendering Error - "Sorry, there is a type error: object is currently undefined."

<script> const app = new Vue({ el: '#app', data:{ results:{} }, mounted() { axios.get('{{ route('request.data') }}').th ...

javascriptvue.jsvuejs2

I am interested in having the push notification feature function specifically for registered users

In an attempt to register the device for push notification using the PhoneGap plugin, I am encountering an issue. After the AJAX success action is called, the registration action does not alert the registration ID. Can someone help figure out what's g ...

javascriptjqueryajaxcordovaphonegap-build

Tips for extracting data from a state-based object store in React?

https://i.sstatic.net/A0cc4.pngWhenever I attempt to execute a PUT call, I fetch the data by id and save it in a state named "getData". While I am able to filter and map over this data, I face issues when trying to extract individual values. For instance, ...

javascriptreactjsexpressaxiosput

Is There a Name Clash Issue with Dependency Injection in AngularJS?

Let's say I have two modules, finance2 and finance3, both of which define a service called currencyConverter. If I specify that my main module only depends on finance2, I can inject the service like this: angular.module('invoice2', [' ...

javascriptangularjs

Stop the click event from firing on child elements of a parent element that is currently being dragged

Below is the structure of a UL tag in my code: <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)"> <div class="product-infos"> ...

javascriptjqueryhtmlcss

Navigating the realm of JavaScript and managing the uncertainties of floating point precision

I am exploring the development of a browser multiplayer game utilizing rollback netcode that operates a deterministic simulation on the clients. I successfully prototyped the netcode in Flash, but encountered a floating point roadblock along the way. As f ...

javascripthtmlfloating-pointpointmultiplayer

Error encountered within the mounted hook in threejs referencing issue

After successfully importing a js file with three.js code into a standard HTML file, I attempted to export/import the code from the external JS file and call it from mounted. However, when doing so, I received an error message stating: "ReferenceError: THR ...

javascriptvue.jsthree.js

Ways to retrieve text files prior to the webpage loading (synchronously)

I have a simple task at hand that I really want to accomplish - loading some glsl fragment shaders from the disk or server, and then initializing a WebGL web page. Web programming is not my forte; I usually prefer working on shaders and OpenGL in C++. If i ...

javascriptasynchronouspromiseasync-awaitfetch

Interactive 3D model with a popup information box using three.js

I am working on a 3D model of a car and I want to make it interactive for users. Is there a way for the user to click on different parts of the car and have an infowindow or similar feature pop up with more information about the selected part? I've se ...

3dthree.js

JavaScript - overriding or halting the execution of code

I'm currently working on a project for a client where I need to incorporate their header and footer, along with some essential JavaScript files. The issue I've run into is that one of the core JS files they provided is poorly written - it fails t ...

javascriptjquery

What is the best way to eliminate mouse click release events?

Encountering an issue with my Vue/Vuetify Dialog that closes when clicking outside of it as expected. The problem arises when there is a text field inside the dialog. If I accidentally select the content and release the mouse outside of the dialog, it als ...

javascriptvue.jseventsdom-eventsvuetify.js

The Bootstrap navigation menu is functioning properly when opening, but has an issue when attempting

Creating a mirrored version of an HTML file using NuxtJS, I've included the following code snippet in the Navbar component for my NuxtJS project. <template> <section id="navigation-menu" class="menu menu3 cid-sLhoPz7Ycg" ...

javascripthtmlvue.jsbootstrap-4nuxt.js

Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

I have 3 "p" elements and I'm trying to find a way to change the order in which they load on the page using JS or CSS. Below is an example of what I've attempted so far. When you click on the first box labeled "about 1," it opens up and displays ...

javascripthtmlcss

What is the best way to show nested labels on separate lines simultaneously?

Despite attempting to utilize the map method as suggested in my research, it appears that it may not be suitable for the structure I am working with: const stepLabels = [ { labels1: ['First One'] }, { labels2: ['Second One', 's ...

javascriptarraysreactjsmaterial-uijavascript-objects

When submitting a form with a contenteditable div and text box using JQuery, the POST request is not

I developed a website that allows users to edit and format text, then save it onto the server. Utilizing jquery to send the data to a PHP page for saving, I encountered an issue where the site fails to send the file name along with the formatted text to PH ...

javascriptphpjqueryhtmltext-editor