How to generate a shape with 3 faces in three.js - three.js

Question

I am trying to generate a shape like this, 3d rectangle with a transparent face or just 3 panels in a 3d way.
I am new to three.js and I wanted to know if this is possible and if you could guide me.
Thanks a lot!
You can find an image of what I want to generate here:
https://i.stack.imgur.com/h0ja7.png

Answer 1

As an option, you can do it this way:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 2, 3);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);
var contorls = new THREE.OrbitControls(camera, renderer.domElement);
var boxGeom = new THREE.BoxGeometry(2, 1, 1);
var mat1 = new THREE.MeshBasicMaterial({
color: "red",
side: THREE.DoubleSide
});
var mat2 = new THREE.MeshBasicMaterial({
color: "aqua",
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5
});
var boxMat = [mat1, mat1, null, null, mat2, null];
var box = new THREE.Mesh(boxGeom, boxMat);
scene.add(box);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>