During the update from Three.js 68 to 69, an error occurred: Unable to access the property 'boundingSphere' of an undefined object

While upgrading my project from Three.js version 68 to version 69, I encountered an error stating 

Uncaught TypeError: Cannot read property 'boundingSphere' of undefined
on line 6077 of Three.js v69:

This error pertains to a function within the THREE.Frustrum.prototype:

intersectsObject: function () {
    var sphere = new THREE.Sphere();
    return function ( object ) {
        var geometry = object.geometry;
        if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
        sphere.copy( geometry.boundingSphere );
        sphere.applyMatrix4( object.matrixWorld );
        return this.intersectsSphere( sphere );
    };
}(),

What changes in the code should I be aware of after migrating to version 69?

The reason for transitioning from version 68 to version 69 is to utilize multiple THREE scripts for postprocessing purposes (such as THREE.EffectsComposer and others found here). Version 69 now requires the use of PlaneBufferGeometry among other things.

UPDATE: Here's the stack trace:

Uncaught TypeError: Cannot read property 'boundingSphere' of undefined Three_69_max.js:6077
(anonymous function) Three_69_max.js:6077
projectObject Three_69_max.js:21161
projectObject Three_69_max.js:21200
render Three_69_max.js:21035
animLoop.render AnimationLoop.js:161
animate MainBreederProgram.js:14
init MainBreederProgram.js:32
...

UPDATE: Upon further examination of the call stack, it appears that the error occurs when attempting to retrieve the geometry of an Object3D in my scene. This Object3D contains a group of other Object3Ds and does not have its own geometry - it serves only as a container for easy access to the contained objects.

javascriptthree.jsmigration

Answer №1

After taking @WestLangley's suggestion into consideration, I decided to reorganize my code. Initially, I was utilizing Object3Ds to manage various sets of objects within the scene (up to version 68). This allowed me to easily access and iterate through specific subsets of the scene during the animation update phase. However, starting from version 69, I have opted to place all objects directly into the scene and assign them unique names instead.

Answer №2

One interesting aspect of the scene graph is its ability to organize objects into groups, so I was surprised to encounter this issue and kept getting the same error in r71.

My solution was to utilize a THREE.Group instead of a THREE.Object3D, which resolved the issue for me.

Upon examining the code further, I stumbled upon an undocumented feature known as THREE.Group, which is a subclass of THREE.Object3D. I discovered that Groups do not undergo frustum culling, but their children do (which is the desired behavior).

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

Adjusting the input in a Textfield within React using Material UI

const [formData, setFormData] = useState({}); useEffect(() => { fetch("/formdata") .then((res) => res.json()) .then((data) => setFormData(data)); }, []); console.log("Form Data", formData); //Sorting by order let attr; ...

javascriptreactjsreact-hooksmaterial-ui

React Native vector icons display enigmatic symbols

I recently installed react-native-vector, but I'm seeing strange symbols when using it. Can anyone provide guidance on how to properly utilize this library? Platform: Android import React from 'react'; import {View, Text, StyleSheet} from & ...

javascriptreactjsreact-nativenpmicons

Flip an image by analyzing the colors beneath it

Looking for a way to invert the color of specific areas under a mask (PNG) for a floating menu. Rather than inverting all at once, I want only certain parts to be inverted underneath the mask. Is this achievable, or is there another approach I should consi ...

javascriptjquerycsshtml

TypeScript - Issue with generic function's return type

There exists a feature in typescript known as ReturnType<TFunction> that enables one to deduce the return type of a specific function, like this function arrayOf(item: string): string[] { return [item] } Nevertheless, I am encountering difficulti ...

javascripttypescripttypes

Prevent postback in case of validation error

In my current setup, I have a textbox control with the following specifications: <asp:TextBox ID="txtAmount" runat="server" AutoPostBack="true" Width="85px" class="validate[ERExpenseTypeDaterequired,custom[float]]" On ...

c#javascriptjquery.netvalidation

Discord.js Error: Unable to access undefined properties for 'username'

victim is a variable containing the user's ID input. Despite confirming it as a valid user ID on the server, I encounter the error 'cannot read properties of undefined' This is my first time using client.users.cache.get(victim).username in ...

javascriptnode.jsdiscord.js

Merge nested arrays while eliminating any redundant elements

Is there a way to merge these array sets while ensuring that duplicate values are removed? I am unsure if lodash provides a solution for this specific scenario where the arrays are nested. Most of the solutions I have come across assume flat arrays. Any ...

javascriptarraysreactjsnestedlodash

Guide to saving an Object to a file (JSON) within the project directory using React Native for Debuggingpurposes

Feeling a bit overwhelmed trying to tackle this issue. My goal is to save data to a JSON file in real-time while debugging my application. I have a Redux store state that I want to organize neatly in a file for easier debugging, so exporting/writing the ob ...

javascriptjsonreactjsreact-native

What is the best way to ensure a cron job executing a Node.js script can access variables stored in an .env file?

Currently, I have a scheduled job using cron that runs a Node.js script. This script utilizes the dotenv package to access API keys stored in a .env file. Running the Node.js script from the command line retrieves the variables from the .env file successf ...

javascriptnode.jsubuntucronenvironment-variables

Ensure that the main div remains centered on the page even when the window size is adjusted

Here is the code snippet: <div id="root"> <div id="child1">xxxx</div> <div id="child2">yyyy</div> </div> CSS : #root{ width: 86%; margin: 0 auto; } #root div { width: 50%; float: left; border: ...

javascriptjqueryhtmlcss

The eval() function does not run scripts from external sources with a src attribute

Instead of using eval() to execute all <script> tags after completely rewriting a div, I have encountered an issue. The following code snippet works for inline-scripts, but it doesn't have the same effect on external scripts like: <script sr ...

javascriptjqueryajaxhtml

Exploring the use of the caret symbol (^) for exponentiation

I am embarking on a project to develop an uncomplicated graphing calculator that enables users to input a function of f (such as f(x) = x^2+2x+6). Essentially, the JavaScript code should replace the x in the function with a specific number and then compute ...

javascriptregexmath

Error encountered in a Node.js Express application: 'Error in Jade template (version 1.0+): The usage of duplicate key "id" is not permitted.'

Seeking guidance on the following issue: Within my Express app, I am providing numerous parameters to a Jade template, resulting in an error message that states: Duplicate key "id" is not allowed. (After reviewing, I have confirmed that there is no para ...

javascriptnode.jstemplatesexpresspug

How can I use jQuery to hide each div of the same class individually when a user clicks on each div to close

I am working on a project where I have multiple notification boxes represented by divs with the same class. These boxes are set to fade in one after the other using jQuery. Each box also contains a 'close_box' div that acts as a button to close/h ...

javascriptjquery

Developing a JSON structure from a series of lists

var data = [ [ "default_PROJECT", "Allow", "Connect", "Allow", "AddComment", "Allow", "Write", "Allow", "ViewComments", "Allow", "ExportData", "Allow", ...

javascriptarraysjson

AngularJS ng-model directive binds an input field with a specific value

I encounter a challenge where my inputs, containing values, do not display the value when I apply an ng-model to each input field. Below is the snippet of my code: student-list.html <!--edit form--> <div class="col s12" ng-show="dataForm"> ...

javascriptangularjs

In what way can the jQuery .each() function make use of the index as a variable?

Consider the jQuery .each() function, which comes with a useful feature. For example: $('.element').each(function(index){ console.log(index); }); Here, you can access the index of the currently selected element using the "index" variable. ...

javascriptjquery

"Process the contents of a file by reading it line by line in a

Currently, I am reviewing the documentation for the nodejs readline module in order to tackle a task that involves reading a very large file line by line. The solution using readline seems promising, although I require it to read lines synchronously - mean ...

javascriptnode.jsparsingreadline

How can I implement a jQuery popup that prompts users to log in or register if they are not currently authenticated?

My JavaScript code includes jQuery and AJAX functionality for a specific action. Whenever a user id is not provided, and there isn't one stored in the session, I aim to prompt the user with a dialog box asking them to either register or log in. Could ...

javascriptjqueryajax

Using jQuery to evaluate multiple conditions within an if statement

I'm working on a script that needs to continuously monitor for the presence of an input field with the class name "email" (as this content is loaded via AJAX). If this input exists, I need to show another input field with the class name of "upload". A ...

javascriptjqueryif-statement