Broken Archimedean Solid

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>body{margin:0;overflow:hidden;}</style>
</head>
<body>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        scene.add(new THREE.AmbientLight(0xffffff, 0.6));
        const light = new THREE.DirectionalLight(0xffffff, 0.8);
        light.position.set(5, 5, 5);
        scene.add(light);

        const a = 3;
        const vertices = [
            new THREE.Vector3(a, a, 3*a),
            new THREE.Vector3(a, 3*a, a),
            new THREE.Vector3(3*a, a, a),
            new THREE.Vector3(-a, -a, 3*a),
            new THREE.Vector3(-a, 3*a, -a),
            new THREE.Vector3(3*a, -a, -a),
            new THREE.Vector3(a, -a, -3*a),
            new THREE.Vector3(a, -3*a, -a),
            new THREE.Vector3(-3*a, -a, -a),
            new THREE.Vector3(-a, a, -3*a),
            new THREE.Vector3(-a, -3*a, a),
            new THREE.Vector3(-3*a, a, a)
        ];

        vertices.forEach(v => v.multiplyScalar(0.2));

        const indices = [
            // Triangle faces
            0, 1, 2,
            3, 4, 5,
            6, 7, 8,
            9, 10, 11,

            0, 3, 5,  0, 5, 2,  0, 2, 4,  0, 4, 3,

            1, 0, 4,  1, 4, 7,  1, 7, 10, 1, 10, 0,

            2, 1, 7,  2, 7, 6,  2, 6, 5,  2, 5, 1,

            3, 8, 11, 3, 11, 9, 3, 9, 4,  3, 4, 8
        ];

        const geometry = new THREE.BufferGeometry();
        const positions = [];
        vertices.forEach(v => positions.push(v.x, v.y, v.z));
        geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
        geometry.setIndex(indices);
        geometry.computeVertexNormals();

        const faceMaterial = new THREE.MeshPhongMaterial({
            color: 0x00bcd4,
            transparent: true,
            opacity: 0.9
        });

        const wireMaterial = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            wireframe: true,
            transparent: true,
            opacity: 0.3
        });

        const shape = new THREE.Group();
        shape.add(new THREE.Mesh(geometry, faceMaterial));
        shape.add(new THREE.Mesh(geometry, wireMaterial));
        scene.add(shape);

        camera.position.z = 8;

        function animate() {
            requestAnimationFrame(animate);
            shape.rotation.x += 0.005;
            shape.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>