JSFiddle - React, Tailwind, and code Playground

JavaScript

var roofGeometry = new THREE.Geometry();

roofGeometry.vertices.push(
    new THREE.Vector3(-0.5, 0, 0.5),
    new THREE.Vector3(0.5, 0, 0.5),
    new THREE.Vector3(0, 1, 0.5),
    new THREE.Vector3(0.5, 0, -0.5),
    new THREE.Vector3(0, 1, -0.5),
    new THREE.Vector3(-0.5, 0, -0.5)
);
roofGeometry.faces.push(
    new THREE.Face3(0, 1, 2),
    //new THREE.Face4(1, 3, 4, 2),
    new THREE.Face3(5, 3, 4)/*,
    new THREE.Face4(0, 5, 4, 2)*/
);

var roofMesh = new THREE.Mesh(roofGeometry, new THREE.MeshBasicMaterial(
{
    color: 0x000000,
    side: THREE.DoubleSide // added
}));

//roofMesh.rotation.y = -Math.PI / 3;

var scene = new THREE.Scene();

scene.add(roofMesh);

var camera = new THREE.PerspectiveCamera(45, 1.5, 0.1, 10);

camera.position.z = 4;

var canvas = new THREE.CanvasRenderer();
            
canvas.setSize(768, 512);
document.body.appendChild(canvas.domElement);

function step() {
    canvas.render(scene, camera);
    
    roofMesh.rotation.y -= (2 * Math.PI) / 480; //T=8s
    
    webkitRequestAnimationFrame(step)
}

step()