Managing shadow camera frustum adjustments in Threejs r73, what are the latest updates on shadow changes?

Transitioning from r72 to r73 presented me with a challenge that I suspect is related to the shadow modifications in r73. Even after trying the latest version in master, the issues persist.

To demonstrate the problem, I prepared two fiddles. Here is the one using r72: http://jsfiddle.net/01xm6taz/3/ and this fiddle uses r73: http://jsfiddle.net/mtcq070x/2/

The main issue lies in losing control over the shadowCamera's frustum and struggling to find the correct way to toggle shadows in r73. Properly controlling the frustum is crucial for achieving quality shadows with a low-resolution shadow map, and being able to toggle shadows is equally important. Regaining control over the frustum will allow for different toggling methods (such as setting far and near to 0 or something).

If you compare the r72 fiddle, you'll notice that frustum control works in r72 but not in r73.

In particular, the following lines no longer function in r73:


        light.shadowCamera.near = self.shadownear;
        light.shadowCamera.far = self.shadowfar;
        light.shadowCamera.left = -self.shadowleft;
        light.shadowCamera.right = self.shadowright;
        light.shadowCamera.bottom = -self.shadowtop;
        light.shadowCamera.top = self.shadowbottom;
        light.shadowCamera.shadowBias = self.shadowbias;
        light.shadowDarkness = self.shadowdarkness;
        light.shadowCamera.updateProjectionMatrix();

Although sticking to r72 is an option, it means missing out on some of the beneficial .toJSON updates introduced in r73.

Answer №1

Recently, there was a slight change in the API which caused some glitches. However, the following code is now functioning properly:

    light.shadow.camera.near = self.shadownear;
    light.shadow.camera.far = self.shadowfar;
    light.shadow.camera.left = -self.shadowleft;
    light.shadow.camera.right = self.shadowright;
    light.shadow.camera.bottom = -self.shadowtop;
    light.shadow.camera.top = self.shadowbottom;
    light.shadow.camera.shadowBias = self.shadowbias;
    light.shadowDarkness = self.shadowdarkness;
    light.shadow.camera.updateProjectionMatrix();

I do wish that any future breaking changes are communicated more clearly in advance :)

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

Updating the logic for reconnection when the connection is closed in MySql's X DevAPI can be achieved by utilizing the @mysql/xdevapi module

I am currently utilizing the X DevAPI of MySql v8.0.33 with the @mysql/xdevapi v8.0.33 package. Although I have implemented a reconnect logic, it doesn't seem to be functioning as expected. Here is the code snippet: const mysqlx = require('@mysq ...

Issue with 'for' loop iteration over object array

Can someone help me understand why I am getting the unexpected result "6 You have not watched undefined undefined" in the browser console when running this simple code? var films = [{ title: "The Mummy", hasWatched: true, stars: "5 stars" ...

What are the steps for implementing videojs vr in a Vue.js project?

After installing the videojs vr with npm install --save videojs-vr, I attempted to use it in my project: https://i.stack.imgur.com/lSOqF.png However, I encountered this error message: https://i.stack.imgur.com/QSe1g.png Any assistance would be greatly ...

Refreshing Data in NextJs as Search Parameters Change

I'm currently working on developing an app that features a search bar where users can input a name. The app then queries two different APIs to gather information about that name, displays it to the user, and saves the search along with the results to ...

Utilizing commands in conjunction with phonegap

Currently, I am utilizing yeoman to create an Angular application and then deploying it using phonegap onto a mobile platform - specifically iOS. However, I have encountered some difficulties in getting directives to function properly. One of the directiv ...

Retrieving online content and updating it upon reestablishing internet connection

Currently, I am in the process of developing an app that will feature a substantial amount of web content. My plan is to use Phone Gap build for its release; however, I intend to host all the content online and link to it from within the app. I have been c ...

Encountering a TypeScript error when using Redux dispatch action, specifically stating `Property does not exist on type`

In my code, there is a redux-thunk action implemented as follows: import { Action } from "redux"; import { ThunkAction as ReduxThunkAction } from "redux-thunk"; import { IState } from "./store"; type TThunkAction = ReduxThunk ...

Swapping the identifiers in the array with the corresponding names from the second array

I am facing an issue with linking two arrays containing objects based on their id and then replacing that id with the corresponding NAME from a second array. For instance, consider the following arrays: array1 = [ {id: [1, 2], info: "xxx"}, {id: [2, 3 ...

Creating multiple tables in an HTML template using loops, either with or without JavaScript, each table identical to the one previously created

<html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3. ...

Sorting through an array of objects using criteria from a separate array of objects

Currently, I am faced with the task of filtering an array of objects based on criteria from another array. Essentially, I am looking to refine a list based on filters selected by the user. To illustrate, let's consider my initial list of results: [ ...

Javascript Array Dilemmas

The current task; Determine whether the first string in the array contains all the letters of the second string. For instance, ['hello', 'Hello'] should result in true as all letters from the second string are found in the first, rega ...

Why does the code require the use of window when the Javascript error object is not functioning properly?

I'm struggling to grasp the distinction between var maxResult = window.max(maxValInt1, maxValInt2); which functions properly, and var maxResult = max(maxValInt1, maxValInt2); which gives an error "object is not a function". Why do I have to inclu ...

Node.js throws an error when accessing req.body as undefined

My task involved creating a basic API using node.js and express, with the addition of body-parser. However, I encountered an issue where req.body was returning undefined. Here is a snippet of my app.js: const express = require('express'); const b ...

Exploring the world with an interactive map in R, incorporating Shiny and leaflet

I'm currently attempting to integrate a Google layer as the base layer for a Leaflet map in Shiny R. To achieve this, I've been utilizing shinyJs to inject a JavaScript script into my R code and add the map. However, I'm facing an issue wher ...

Is it possible to define a Divider or Header within the options array for the dropdown component in Semantic UI React?

Currently, I'm incorporating ReactJS along with SemanticUI for ReactJS to enhance the appearance of my front end. My query pertains to whether it is feasible to define a header or divider within the options array of objects for a dropdown component? ...

Is there a way to add additional text to a text element within an SVG?

Is it possible to append a new text element at the end of the data label by clicking on that particular text? I have attempted to implement this in my code but the additional text is not being displayed as expected: circleGroup.selectAll("text") ...

What is the best way to change the color of my Material Icons when I move my cursor over them?

Currently, I am integrating mui icons 5.2.0 into my React application. Although the icon appears on the page, it remains unchanged in color when I try to hover over it. Check out the snippet of code that I have implemented: import EditIcon from '@mu ...

Issue encountered when trying to import @tensorflow/tfjs-node in conjunction with the face-api.js library within a node.js environment

Using the @tensorflow/tfjs-node package along with face-api.js to enhance performance, here is my code snippet: // Import nodejs bindings to native tensorflow, // Not required but will significantly speed up operations (Python required) require('@tens ...

What are the benefits and drawbacks of combining Jquery UI with AngularJS in web development?

Currently, I am developing a Web application and considering integrating JqueryUI and AngularJS into my ASP.NET MVC project. Is this the best decision for my project? Are there any recommended Databinding libraries that can be used with JQuery UI? Please ...

The functionality of json_encode seems to vary when applied to different PHP arrays, as it successfully encodes data for

My current challenge involves importing three arrays from PHP into JS using json_encode. Below is the code snippet I am currently working on: <?php $query2 = "SELECT * FROM all_data"; $result2 = $conn->query($query2); $bu = []; ...