The illumination in Three.js is dynamic and ever-changing

I'm currently working on creating static light that remains constant regardless of camera movement, and I need to retrieve the actual position of the light within the fragment shader.

Here is my current setup:


scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, canvas.width() / canvas.height(), 1, 10000);
camera.position.z = 2000;
camera.lookAt(0, 0, 0);

var light = new THREE.SpotLight(0xFFFFFF, 1);
light.position.set(0.5, 0.5, 0.1).normalize();
camera.add(light);

....

var lambertShader = THREE.ShaderLib['lambert'];
uniformsVolume = THREE.UniformsUtils.clone(lambertShader.uniforms);

....

materialVolumeRendering = new THREE.ShaderMaterial({
uniforms: uniformsVolume,
vertexColors: THREE.VertexColors,
vertexShader: vertVolumeRendering,
fragmentShader: fragVolumeRendering,
vertexColors: THREE.VertexColors,
lights :true
});

....
scene.add(camera);

In the fragment shader, I set a uniform variable:

uniform vec3 spotLightPosition;

and calculate the light for each voxel:

float dProd = max(0.0, dot(getGradient(posInCube), normalize(lightPos - posInCube)));
voxelColored.rgb = voxelColored.rgb * dProd + voxelColored.rgb * 0.2;

The issue I'm facing is that the light behavior is not as expected. I want the light to remain static even when moving the object (essentially the camera). Currently, the light source moves along with the camera instead of being fixed in the scene.

Any suggestions or ideas would be greatly appreciated.

Thank you. Tomáš

Answer №1

Consider using PointLight instead of SpotLight. SpotLight can be more difficult to work with.

Answer №2

If you want your light to stay still, avoid attaching it to your camera and instead attach it to the scene:

scene.add(light);

To locate its position, refer back to the variable you designated for the light.

light.position

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

Error: An unknown identifier was encountered unexpectedly when coding in Typescript for front-end development without the use of a framework

About My Current Project For my latest project, I decided to work on a basic HTML canvas without using any frameworks. To ensure type checking and because of my familiarity with it from React projects, I opted to use Typescript. Below is the simple HTML ...

Exporting a Three.js scene that includes TextGeometry to OBJ or GLTF format, followed by loading it with the respective OBJ or

I'm currently facing an issue with importing/exporting scenes in Three.js. I have multiple objects (models loaded with OBJLoader, Text generated with TextGeometry). While I can export these objects to string definition using OBjExporter/GLTFExporter, ...

You do not have the authorization to access this content

I have been working on a Laravel web application to upload images into a data table and allow users to download the uploaded image on click. Initially, everything was working fine until I made changes in the code from return '{!! Html::link('ima ...

Is there a method to halt scrolling through programming?

This code snippet is turning off all scrolling capabilities. var myScroller = new IScroll('#wrapper'); myScroller.disable(); Is there a way to prevent scrolling without disabling iScroll? var myScroller = new IScroller('#wrapper'); m ...

Testing API route handlers function in Next.js with Jest

Here is a health check function that I am working with: export default function handler(req, res) { res.status(200).json({ message: "Hello from Next.js!" }); } Alongside this function, there is a test in place: import handler from "./heal ...

Issue with OBJLoader showing a blank screen

Does anyone have experience with rendering OBJ files using three.js? I'm having trouble getting them to display on the screen and would appreciate any help or advice. The strange thing is that a simple cube renders perfectly in my project. For those ...

Combining a JavaScript NPM project with Spring Boot Integration

Recently, I built a frontend application in React.js using NPM and utilized IntelliJ IDEA as my IDE for development. Additionally, I have set up a backend system using Spring Boot, which was also developed in IntelliJ IDEA separately. My current goal is t ...

Steps for adding a div after a specified number

To display the following div after getting a value greater than or equal to the specified value and retrieving it through ajax: 1. How can I show the below div with the given value? .mainbox{ width:auto; height:auto; padding:20px; background:#f00; } .i ...

Dealing with dynamic CORS settings in Apache and PHP

Dealing with CORS has been quite a challenge for me. My javascript is sending AJAX Put/Fetch requests to an Apache/PHP script. In this particular scenario, the javascript is being executed on CodePen while the Apache/PHP script is hosted on a local serve ...

How can you access and utilize the inline use of window.location.pathname within a ternary operator in

I need assistance with writing a conditional statement within Angularjs. Specifically, I want to update the page to have aria-current="page" when a tab is clicked. My approach involves checking if the tab's anchor href matches the current window' ...

Display a div using Jquery when hovering over it with several classes

I want to create a hover effect where div2 fades in slowly when hovering over div1 within the same container. However, my jQuery code doesn't seem to be working as expected... $(".div").hover(function() { $(this).find(".div2").animate({ opac ...

ReactJS is encountering a situation where two children are using the same key and causing

When I try to view the profile information of another user, I encounter a duplicate key error that says: "Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique k ...

Eliminating repeated keys from an array of objects

I'm dealing with an array of objects that looks like this let array = [ { sector: "adad" }, { sector: "adadasdsd" }, { sector: "sdsdsd" }, { origin: "sdfsf" }, { destination: "dfsfsdf" } ]; My goal is to trans ...

Guide on how to validate react-multiselect with the use of Yup validation schema

If the multiselect field is empty, the validation message 'Product is required' is not being displayed. How can I validate this field? Here is the validation schema: validationSchema={ Yup.object().shape({ productID: Yup.string().requi ...

Guide to dynamically rendering Material-UI dialogs based on certain conditions

Trying to implement a dialog box based on data returned from an Apollo hook, where I need to verify that one value matches an ID. If checker === true, the dialog should open automatically and close when the user clicks the Close button. const DialogComp ...

The process of examining a function that includes the invocation of an additional API function in a NodeJS environment

I'm faced with a situation where I have a nested function inside another function. The second function is responsible for making an API call. However, in order to write a unit test for this scenario, I need to avoid actually making the real API call a ...

Issue with React component not receiving dataThe values are not being

Currently, I am a beginner in using React and as part of my training, I have embarked on a project to create a simple book ranking system. In this project, the user enters the title of the book they would like to vote for. If the input field is left empty, ...

Ways to enhance the value of an option within a drop-down menu in angular js 1.x and retrieve the selected value

Can someone help me convert this jQuery code to AngularJS 1.x? <select id="select"> <option value="1" data-foo="dogs">this</option> <option value="2" data-foo="cats">that</option> <option value="3" data-foo="gerbil ...

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

The `moment()` function in Moment JS is yielding varying date and time outputs across different devices

For my React Native application, I am using moment JS to calculate the time difference between a specific time and the current time. Here is the code snippet that calculates the variable minsLeft, which represents the difference in minutes: let minsLeft = ...