The CubeCamera function is encountering an issue where it is unable to access the 'up' property due to it being undefined

After a long time, I revisited my three.js project and was reminded of the days when I used to type out the full name PlaneBufferGeometry. The project features several vehicles that are supposed to reflect their environment (and each other) through the use of CubeCameras. However, upon activating this feature, I encountered the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'up')
at CubeCamera.updateCoordinateSystem (three.module.js:12739:13)
at CubeCamera.update (three.module.js:12803:9)
at CLASS_drone.update (blend.levels.php:2960:19)

Here is what is happening in the context of CLASS_drone:

function CLASS_drone(x,y,z,path,pts)
{
    this.x = x;
    this.y = y+0.25;
    this.z = z;
    this.path = path;
    this.ptstart = pts;
    this.pts = pts;
    this.drone = new THREE.Group();
    this.body = drone.clone();
    this.bidx = 0;
    this.widx = 0;
    this.fps = 0;
    ...

And here is how I include three.js in the project:

<script type="importmap">
{
    "imports":
    {
        "three": "https://threejs.org/build/three.module.js",
        "OBJLoader": "https://threejs.org/examples/jsm/loaders/OBJLoader.js"
    }
}
</script>

Answer №1

CubeCamera is equipped with 6 PerspectiveCamera objects within its children (inherited from Object3D).

The issue arises from an attempt to set the up value for one of these cameras, resulting in an error indicating that the camera does not exist.

You're inadvertently removing the camera...

this.update = function(raftime)
    {
        if(this.active==true)
        {
            if(this.body.visible==true)
            {
                if(camera.position.distanceTo(this.drone.position)<10 && document.getElementById("qcubemap").checked==true && raftime > this.fps + (timing * 5))
                {
                    this.cubecam.clear(renderer); // !!! Here !!!

The clear method is inherited from Object3D and essentially removes all the children from the object. By calling this on this.cubecam, you're effectively clearing out its children, which happen to be the 6 PerspectiveCamera instances.

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

How can I optimize the performance of JS-heavy pages on mobile devices?

As a website owner, I strive to optimize the performance of my site on mobile devices without the need for a separate "mobile-friendly" version or replacing large sections of code. With around 100K of JS code, including jQuery, I am determined to enhance b ...

Ways to activate a different jQuery event by utilizing the output from a previously run jQuery event

I have a button on my website that looks like this: <a id="btn" class="button">Click Me!</a> When this button is clicked, it triggers a jQuery function as shown below: $("#btn").on("click", function() { $.ajax({ url: 'index.php&ap ...

Integrating information from an API into the Document Object Model

const url = `https://catfact.ninja/fact?max_length=140`; const getFact = () => { return fetch('https://catfact.ninja/fact?max_length=140') .then(res => res.json()) } const createFactDiv = (fact) => { const factContainer = documen ...

Is there a more efficient method to execute this AJAX request?

$('#request_song').autocomplete({ serviceUrl: '<%= ajax_path("trackName") %>', minChars:1, width: 300, delimiter: /(,|;)\s*/, deferRequestBy: 0, //miliseconds params: { artists: 'Yes' }, onSelect: functi ...

Sending form data from React to Express involves creating a form in the React component,

Hello, I am new to React and trying to figure out how to send registration data from a form submission to my backend. I have attempted the traditional method of setting up the post method and route in the form, but it doesn't seem to be working for me ...

"Troubleshooting: Mongoose uniqueness feature not functioning

I am encountering an issue with mongoose where 'unique:true' is not functioning as expected. Take a look at the schema I have formulated: var mongoose = require('mongoose'); var userSchema = mongoose.Schema({ username:{ type:St ...

Examining Resolver Functionality within NestJS

Today I am diving into the world of writing tests for NestJs resolvers. I have already written tests for my services, but now it's time to tackle testing resolvers. However, I realized that there is a lack of documentation on testing resolvers in the ...

Which is better for AJAX file uploads: Multipart or base64 encoding?

I am currently developing a single page application using EmberJS and have come across the task of uploading multiple files. To address this, I created a custom view that encapsulates the file input field functionality, allowing me to link the selected fi ...

Unable to access the current state within an asynchronous function in React.js

I have encountered an issue with updating state in the top-level component (App) and accessing the updated state in an asynchronous function defined within useEffect(). Here are more details: The problem arises when I try to retrieve the state of the cons ...

Error: The NgTable in AngularJS is not defined when reloading the page

I have successfully implemented Angularjs NgTable with pagination inside a tab provided by Angularjs Material in various parts of my project. However, I am facing an issue where I am unable to reload the tables in this particular case. I am unsure of what ...

There was a syntax error when trying to include HTML code and JavaScript actions within a PHP file

My current challenge involves loading dataTables using AJAX in Laravel framework. Here is a snippet of my code: if($posts) { foreach($posts as $r) { $nestedData['name'] = $r->name; $nestedData['email'] = $r->e ...

Jump to Anchor when Page Reloads

Hey there! I'm currently developing a gallery script and I'm trying to figure out how to automatically position the page to the top of a specific anchor when it is loaded. I attempted to use the following code: <script>location.href = "#tr ...

The drop-down list unexpectedly closes at the most inconvenient moment

I am looking to create a search input with a drop-down list. The requirement is for the list to close when the focus or click is anywhere except the search input. I have added a function listClose() to the "blur" listener, but now I am unable to capture t ...

Error: A TypeError occurred with the startup because it was unable to read the property 'Collection' as it was

Recently, I encountered a series of problems one after another. The first issue was: TypeError [CLIENT_MISSING_INTENTS]: Valid intents must be provided for the Client To resolve this problem, I made changes to my code from: const Discord = require(" ...

When dealing with ReactJS, utilize the onChange event for handling updates to nested

I am currently learning ReactJS and struggling with a simple logic problem (I'm not very good at JS). I have a form that includes fields for name, email, and message. @ContactUsNew = React.createClass getInitialState: -> message: @props.mess ...

The beforeRouteUpdate hook in vue-router is unable to access the `this` keyword

I am currently creating a Vue.js application with vue-router. According to the documentation, within the hook beforeRouteUpdate, I have full access to the component using the keyword this: The documentation mentions that beforeRouteEnter is the only gu ...

How can I adjust the column width in OfficeGen?

Currently, I am utilizing officeGen for the purpose of generating word documents. <sup> let table = [ [ { val: "TT", fontFamily: "Times New Roman", }, { val: "Ten hang", ...

Fetching JSON data from an external URL using AngularJS

Check out this URL that shows JSON data in the browser: I attempted to store the data in a variable with the following code: $http.get('http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&d=20&pt=PostalCode& ...

Generating a 3D model and integrating it with a 3D terrain display on Mapbox

My goal is to integrate a 3D model as a custom layer on Mapbox using Three.js, alongside adding a 3D terrain on the map. I have followed the documented examples for incorporating a 3D model and 3D terrain from Mapbox. The issue I'm encountering is th ...

What is the comparable javascript code for the <script src="something1.json"></script> tag?

Within my HTML code, I currently have the following line to read a JSON file: <script src="something1.json"></script> Inside this JSON file, there is a structure like so: var varName = { .... } This method of definition naturally sets up ...