Two cubes were created with specific dimensions. The first cube had a width of 2083, height of 1987, and depth of 0. The second cube had a height of 40, width of 80, and depth of 0. The second cube was then positioned inside the first cube as its child with coordinates (x= -1210, y= -880).
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 8000;
var parentCube = new THREE.Mesh(new THREE.BoxGeometry(2083,1987,0), new THREE.MeshBasicMaterial({color:0xaa00ff}));
childCube = new THREE.Mesh(new THREE.BoxGeometry(80, 40, 0), new THREE.MeshBasicMaterial({color: 0x00ff00}) );
childCube.position.x = -1210;
childCube.position.y = -880;
childCube.position.z = 0;
parentCube.add(childCube);
The issue arises when the child cube is drawn outside the boundaries of the parent cube.
Interestingly, if the parent-child relationship is removed, the child cube is correctly displayed inside the parent cube.