My reflection for cube is right or wrong ? if wrong let me know what i did wrong

actually i given to my cube a cubecamera to render the reflection but it seems working but there is some problem which is its not perpendicular the reflection with the globe someone could tell me what i am doing wrong. here is my code what i tried

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - geometry - cube</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <script src="../js/three.js"></script>
    <script src="../js/OrbitControls.js"></script>
    
    <script>

			var camera, scene, renderer;
			var cube, slight;
			var cubecamera, globe;
		
			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set(10,0,10);

				scene = new THREE.Scene();
				scene.background = new THREE.TextureLoader().load('./models/tex/wood_floor_by_gnrbishop.jpg');

			  
			    //

				slight = new THREE.SpotLight(0xffffff, 2, 90, 0.5, 0.41, 2);
				slight.position.set(-10, 25, 0);
				slight.castShadow = true;
				scene.add(slight);

			    //

				slight.shadow.mapSize.width = 512;  
				slight.shadow.mapSize.height = 512; 
				slight.shadow.camera.near = 0.5;      
				slight.shadow.camera.far = 5000;

				var alight = new THREE.AmbientLight(0xffffff, 0.3);
				scene.add(alight);

			    var texture = new THREE.TextureLoader().load('./models/tex/metal.jpg');

				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
			    var material = new THREE.MeshStandardMaterial({ map: texture });
				var tex = new THREE.TextureLoader().load("./models/tex/room.jpg", function () {
				     //console.log("finished");
				});
				tex.mapping = THREE.SphericalReflectionMapping;

                // dynamic camera
			    cubeCamera = new THREE.CubeCamera(0.5, 100, 512); 
			    cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
			    scene.add(cubeCamera);

			    // cube
			    var geometry = new THREE.BoxBufferGeometry(5, 5, 5);
			    var material = new THREE.MeshPhongMaterial({ map: texture, envMap: cubeCamera.renderTarget.texture, reflectivity: 1, opacity: 0.1, refractionRatio: 0.95, });
                cube = new THREE.Mesh(geometry, material);
                cube.position.set(0, 2.5, -5);
                cube.name = "cube";
                cube.castShadow = true;
                cube.receiveShadow = true;
                scene.add(cube);

			    // globe
			    var texture1 = new THREE.TextureLoader().load('./models/tex/wood _texture33.jpg');
			    var geometry1 = new THREE.SphereGeometry(0.5, 32, 32);
			    var material1 = new THREE.MeshPhongMaterial({ map: texture1, shininess: 50, specular: 0xcd6363 });
			    globe = new THREE.Mesh(geometry1, material1);
			    globe.position.set(0, 0.5, 0);
			    globe.name = "globe";
			    globe.castShadow = true;
			    globe.receiveShadow = true;
			    scene.add(globe);


			    /* plane */
				var texture = new THREE.TextureLoader().load('../img/glass.jpg');
				var geometry = new THREE.PlaneGeometry(40, 40, 32, 32);
				var material = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide });
				plane = new THREE.Mesh(geometry, material);
				plane.position.set(0, 0, 0);
				plane.rotation.x = THREE.Math.degToRad(90);
				plane.name = "plane";
				plane.castshadow = true;
				plane.receiveShadow = true;
				scene.add(plane);

				renderer = new THREE.WebGLRenderer();
				renderer.shadowMap.enabled = true;
				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

			    //
				var controls = new THREE.OrbitControls(camera, renderer.domElement);

			    //

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			

			function animate() {

				requestAnimationFrame( animate );

				cube.visible = false;
				cubeCamera.position.copy(cube.position);
				cubeCamera.updateCubeMap(renderer, scene);
				cube.visible = true;

				render();

			}

			/* render method */
			function render() {
			    renderer.render(scene, camera);
			}

    </script>

</body>
</html>