Own Material for every side

Own Material for every side Bad performance

by Browork

HTML

<button style="position:absolute">Start</button>

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {
  OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"


var colorDict=[];

let paramsCube = {
				polygonOffset: true,
				polygonOffsetFactor: 0.5,
				polygonOffsetUnits: 1,
        side: THREE.FrontSide
        }
        
        
   let paramsCylinder

colorDict["cube"] =
[ 
    new THREE.MeshBasicMaterial({color:0xffff00, ...paramsCube}),//right
    new THREE.MeshBasicMaterial({color:0xffff00, ...paramsCube}), //left
    new THREE.MeshBasicMaterial({color:0xffff00, ...paramsCube }),//up
    new THREE.MeshBasicMaterial({color:0xffff00, ...paramsCube}), //down
    new THREE.MeshBasicMaterial({color:0xffff00, ...paramsCube}), //front
    new THREE.MeshBasicMaterial({color:0xffff00, ...paramsCube}), //back
]; 

colorDict["cylinder"] =
[ 
    new THREE.MeshBasicMaterial({color:0xff0000, ...paramsCube}),
    new THREE.MeshBasicMaterial({color:0x00ff00, ...paramsCube}), 
    new THREE.MeshBasicMaterial({color:0x00ff00, ...paramsCube}),
]; 



// Create a MeshFaceMaterial, which allows the cube to have different materials on each face 






var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 2000);
camera.position.set(100, 100, 500);
camera.up.set(0, 0, 1);
var c;
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    depth: true
});
renderer.setSize(innerWidth, innerHeight)
renderer.setClearColor("#f0ebdd", 1);
document.body.appendChild(renderer.domElement);
document.querySelector("button").addEventListener("click", () => {
    init();
})


var bigBoxMaterial = new THREE.MeshBasicMaterial({
			color: 0xb89349,
			transparent: true,
			opacity: 0.8,
			polygonOffset: true,
			polygonOffsetFactor: 0.75,
			polygonOffsetUnits: 4
		});

var edgeMaterial = new THREE.MeshBasicMaterial({
				color: 0x000000,
				polygonOffset: true,
				polygonOffsetFactor: -0.75,
				polygonOffsetUnits:...