"Uncaught TypeError: Cannot read property 'center' of undefined - three.js:6754" 当我添加另一个网格时正在发生

所以。我开始编写一些非JS代码，并想用Three.JS做一些东西scene.add(my_square);一切正常。但每当我试图让它不再工作，并记录这个

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)

我试着只把他添加到我的场景中，效果也是一样的。起初我称之为square，所以我认为它已经被使用了，所以我将所有相关变量改为my_somthing。

我正在Chrome浏览器上做测试。这是我的代码：

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);
}
});

我想如果这只是我没见过的东西。如果提前道歉。