Incorrect display of 3d three.js objects

During the rotation of 2 cubes embedded into one another, gaps form at the intersection of the polygons of the outer cube. Is it possible to fix this using the three.js software or is it necessary to use the left-hand tools here?

The code itself:

<script> var container; var camera, scene, renderer; var cube, group; var targetRotationX = 0; var targetRotationOnMouseDownX = 0; var targetRotationY = 0; var targetRotationOnMouseDownY = 0; var mouseX = 0; var mouseXOnMouseDown = 0; var mouseY = 0; var mouseYOnMouseDown = 0; var windowHalfX = 500; var windowHalfY = 500; group = new THREE.Group(); init(); animate(); //Инициализация рабочей области function init() { //Инициализация контейнера container = document.getElementById('container'); //Камера camera = new THREE.PerspectiveCamera( 70, 1, 1, 1000 ); camera.position.z = 100; //Сцена scene = new THREE.Scene(); //Внутренний куб var geometry = new THREE.CubeGeometry(20,20,20); cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0x00ff00, opacity: 0.5})); group.add(cube); //Внешний куб var geometry = new THREE.CubeGeometry(22,22,22); cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0x0000ff, opacity: 0.7})); group.add(cube); //Вывод созданных элементов на сцену scene.add(group); //Создание рендерера renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xffffff); renderer.setSize(1000, 1000); container.appendChild(renderer.domElement); //События мыши для вращения кубов container.addEventListener('mousedown', onDocumentMouseDown, false); container.addEventListener('touchstart', onDocumentTouchStart, false); container.addEventListener('touchmove', onDocumentTouchMove, false); //Событие изменения размера окна window.addEventListener('resize', onWindowResize, false); console.log(scene) } function onWindowResize() { windowHalfX = 500; windowHalfY = 500; camera.aspect = 1; camera.updateProjectionMatrix(); renderer.setSize( 1000, 1000); } function onDocumentMouseDown(event) { event.preventDefault(); container.addEventListener('mousemove', onDocumentMouseMove, false); container.addEventListener('mouseup', onDocumentMouseUp, false); container.addEventListener('mouseout', onDocumentMouseOut, false); mouseXOnMouseDown = event.clientX - windowHalfX; targetRotationOnMouseDownX = targetRotationX; mouseYOnMouseDown = event.clientY - windowHalfY; targetRotationOnMouseDownY = targetRotationY; } function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02; targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02; } function onDocumentMouseUp(event) { container.removeEventListener('mousemove', onDocumentMouseMove, false); container.removeEventListener('mouseup', onDocumentMouseUp, false); container.removeEventListener('mouseout', onDocumentMouseOut, false); } function onDocumentMouseOut(event) { container.removeEventListener('mousemove', onDocumentMouseMove, false); container.removeEventListener('mouseup', onDocumentMouseUp, false); container.removeEventListener('mouseout', onDocumentMouseOut, false); } function onDocumentTouchStart(event) { if (event.touches.length == 1) { event.preventDefault(); mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX; targetRotationOnMouseDownX = targetRotationX; mouseYOnMouseDown = event.touches[ 0 ].pageY - windowHalfY; targetRotationOnMouseDownY = targetRotationY; } } function onDocumentTouchMove(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.05; mouseY = event.touches[ 0 ].pageY - windowHalfY; targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.05; } } function animate() { requestAnimationFrame(animate); render(); } function render() { group.rotation.y += (targetRotationX - group.rotation.y) * 0.1; group.rotation.x += (targetRotationY - group.rotation.x) * 0.05; renderer.render(scene, camera); } </script> </body>