When adding another Mesh, an error occurs in three.js stating: "Uncaught TypeError: Cannot read property 'center' of undefined - three.js:6754."

As I delve into coding with JS, I decided to experiment with Three.js. Everything was running smoothly until I included the line scene.add(my_square);. From that point on, my code failed to work and displayed the following error:

Uncaught TypeError: Cannot read property 'center' of undefined
    at Sphere.copy (three.js:6754)
    at Frustum.intersectsObject (three.js:14106)
    at projectObject (three.js:24835)
    at projectObject (three.js:24880)
    at WebGLRenderer.render (three.js:24654)
    at animate (game.js:85)

I attempted adding it solely to my scene but encountered the same issue. Initially named square, I suspected a naming conflict, so I renamed all related variables to my_something.

My testing is being carried out in Chrome. Here's a snippet of my code:


// Code goes here

If this issue seems trivial, I apologize in advance for not identifying it sooner.

javascriptthree.js

Answer №1

UPDATE: After some investigation, I have identified the issue. It turns out I made a mistake in this section:

//#######################################################################################
//my_square
//#######################################################################################
var my_planeSquare = new THREE.PlaneGeometry(40, 40);

var my_squareTexture = loader.load("ressources/Images/square_texture.jpg");

var my_planeSquare = new THREE.MeshLambertMaterial({
    map: my_squareTexture,
    side: THREE.DoubleSide
});

var my_square = new THREE.Mesh(my_planeSquare, my_squareTexture);

Instead of doing this:


var my_squareTexture = loader.load("ressources/Images/square_texture.jpg");

var my_planeSquare = new THREE.MeshLambertMaterial({
    map: my_squareTexture,
    side: THREE.DoubleSide
});

var my_square = new THREE.Mesh(my_planeSquareGeometry, my_planeSquare);

Upon reflection, asking for help with this problem allowed me to shift my focus and identify the error. (It seems that the name "THREE.PlaneGeometry" was replaced by "THREE.MeshLambertMaterial")

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

Strategies for dynamically incorporating customized text with unique ID attributes using jQuery while ensuring accuracy

I have a variety of divs structured like this: <div class="textwidget"><div> <div class="textwidget"><div> <div class="textwidget"><div> Here is the desired output for the divs: <div class="textwidget" id="widget-1 ...

javascriptjquery

Receiving an inaccurate value from the input with type='number' attribute

There is an input field where users can enter a string, and I need to capture the value entered into it. $("#test").on("change", function(){ console.log($(this).val()); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery ...

javascriptjqueryhtmlgoogle-chrome

Troubleshooting a jQuery AJAX error during a POST request with Firebug debugger

As I attempted to use an ajax call to submit my post without refreshing the page, I encountered a challenge. When I clicked on the submit button, I tried checking for errors in the firebug console, but they disappeared off the screen too quickly for me t ...

javascriptjqueryfirebughtml-post

An error in syntax is being triggered by the Php file being accessed through the <script src="list.php"></script>

We're facing an unusual problem with our online ordering platform script that we purchased a few months ago. It had been functioning perfectly for several months, but now we're encountering an issue! The website page is not loading, and when we c ...

javascriptphphtml

Ways to secure the formdata message when sending it through the submit action

I have a unique script that modifies the behavior of submit buttons on social networking sites, such as Facebook. The script sets an "onclick" attribute that triggers a specific function when a user clicks on a submit button. This function is designed to e ...

javascriptformsgreasemonkeyjquery-eventsuserscripts

Ensure the browser stays anchored at the bottom of the page while employing jQuery to reveal a div

This piece of code allows me to toggle the visibility of a div: <a href="#" class="show_hide">Show/hide</a> <div class="slidingDiv"> My content...... <a href="#" class="show_hide">hide</a></div> <script src="http:// ...

javascriptjqueryhtml

Is there a way to adjust line width in THREE.js with the createMultiMaterialObject method?

I've been tinkering with the createMultiMaterialObject feature in THREE.js to generate objects with shading along with a wireframe display. However, I've run into an issue where the wireframe lines appear broken and do not seem to respond to the ...

three.jswebgl

Issue with vue-template-compiler in Vue.js 3 webpack configuration

I am currently working on integrating vuejs 3 into a project that already utilizes webpack. I have been looking into using vue-loader as part of this process. After consulting the official documentation, I came across the following information: Every new ...

javascriptvue.jswebpackvuejs3vue-loader

Creating a cross-platform file writer with PHP and JavaScript

My current challenge involves using buttons on an HTML page to trigger a PHP program that writes to a text file. Despite receiving a success message from my Ajax function, the file that should have been written to doesn't exist. Here's a snippet ...

javascriptphphtmlajax

In JavaScript, combine two arrays of equal length to create a new array object value

Trying to figure out how to merge two arrays into a new object in JavaScript var array1 = ['apple', 'banana', 'orange']; var array2 = ['red', 'yellow', 'orange']; If array1[0] is 'apple&apos ...

javascriptjqueryarraysjsonobject

What are the best ways to enhance performance when making multiple require() calls?

I am in the process of developing a bot for my company's Mattermost server (similar to a Discord bot). Each command for the bot is housed in its own file, making it easier to manage and maintain. When a user wants to execute a command, they must send ...

javascriptnode.jsmattermost

My changes to the HTML file are not being reflected in the browser, even after clearing the cache. This is happening in an Angular and Node.js application

I'm currently developing an application using Angular and Node.js. I've noticed that when I make changes to the HTML file, the browser isn't updating even after clearing the cache. Could this be a coding issue? Any suggestions on how to fix ...

javascriptangularjsnode.js

Is the latest update of Gatsby incompatible with Material UI?

Encountering an issue while running this command portfolio % npm install gatsby-theme-material-ui npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class= ...

javascriptreactjsnpmmaterial-uigatsby

Utilizing Next 13 for flexible MDX imports

Recently completed the Next13 + MDX Tutorial, however, I am still unclear on how to dynamically load my mdx files. My mdx files are not hosted on a remote server, so I do not require next-mdx-remote. Nonetheless, I am in need of a method to load different ...

javascriptreactjsnext.jsnext.js13

What causes JavaScript parseFloat to add additional value in a for loop implementation?

I am facing a challenge where I need to convert an array of strings into an array of decimal numbers. The original array of strings is structured like this: var array = [" 169.70", " 161.84", " 162.16", " 176.06", " 169.72", " 170.77", " 172.74", " ...

javascriptarraysfor-loopparsefloat

Mastering the Art of Binding Option Data from API Responses in Vue.js

Just starting out with Vue.js and attempting to bind option data from an API response. I've made an axios call in the mounted() hook and assigned the companies data from the response, but I'm encountering errors as shown below. 373:11 error ...

javascriptvue.jsvuejs2

Function returns to execute another Function

Update: Is there a way to retrieve a value from a nested function and have it returned by the parent function? function returningFn() { function otherFn() { var value = 123; return value; //To be retrieved by returningFn } } I nee ...

javascriptjquery

Initiating the onclick event for Input/Form

<form method="POST" onsubmit="return false;"> ... <input type="submit" name="button" value="Login" onclick="require('file.js').submitForm(this.form);"> ... </form> Is there a way to trigger the onclick event of this INPUT eleme ...

javascripthtmlinternet-explorerdom

Determine if an Image is Chosen upon Click with Javascript

I am currently working on a wysiwyg editor and I'm facing an issue where I need to determine if a user has clicked on an image within the selection range. Is there a method to detect this without attaching event handlers directly to the image itself? ...

javascript

When using expressjs and typescript, you may encounter an error stating that the type 'typeof <express.Router>' cannot be assigned to the parameter type 'RequestHandlerParams'

Working on my project using expressjs with the latest typescript definition file and typescript 2.3.4 from https://github.com/DefinitelyTyped/DefinitelyTyped. I've set up a router and want to access it from a subpath as per the official 4.x documentat ...

javascriptexpresstypescripttypescript-typings