three.js - "Uncaught TypeError: Cannot read property 'center' of undefined - three.js:6754" Is happenning when i add another Mesh

Question

So. i'm starting to code a bit un JS and wanted to make a little something with Three.js. Until i add the line scene.add(my_square); everything works fine. but whenever i try to had it doesn't work anymore and log this

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 tried to only add him in my scene, it does the same. At first i called it square so i thought it was already used, so i changed all the related variable to a my_somthing instead.

I'm doing my tests on Chrome btw. Here is my code :

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.TextureLoader();
//#######################################################################################
//CREATE THE THING IN THE SCENE. Created : background, player, my_square, light.
//#######################################################################################
//background
//#######################################################################################
var planeBackground = new THREE.PlaneGeometry(40, 40);

var texture = loader.load("ressources/Images/sourire_texture.jpg");

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

var background = new THREE.Mesh(planeBackground, planeMaterial);
//#######################################################################################
//player
//#######################################################################################
player = {
    max: {
        pv: 30,
        grade: "chef",
        colordeg: 0xff0000,
        colorNormal: 0xffffff,
        actualColor: this.colorNormal
    },
    loup: {
        pv: 45,
        grade: "officer",
        colordeg: 0xff0000,
        colorNormal: 0xffffff,
        actualColor: this.colorNormal
    }
};
//#######################################################################################
//light
//#######################################################################################
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10);

scene.add(light);
//#######################################################################################
//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);

//#######################################################################################
//END OF CREATE
//#######################################################################################

background.player = player["max"];
my_square.player = player["loup"];

scene.add(background);
//scene.add(my_square); // <---------------------- when i add this it trigeer my problem.
camera.position.z = 100;
my_square.position.x = 5;

function rotationXY(x, y) {
    background.rotation.x += x;
    background.rotation.y += y;
}
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseMove(event) {
    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

window.addEventListener("click", () => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);

    // calculate objects intersecting the picking ray
    var intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        console.log(intersects[0].object.player);
    }
});

I reckon if it's only something i haven't saw. If it is sorry in advance.

Answer 1

EDIT : I found the problem. I messed-up this part:

//#######################################################################################
//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 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);

So yeah... asking this question helped get my brain out of my code and see the error. (the THREE.PlaneGeometry was removed by a THREE.MeshLambertMaterial because it was the same name)