Multiple materials for icosahedron

I’m trying to make a D20 dice with different colors for each side. For a D6 my code works, but the D20 isn’t shown at all.

<script type="module">
        import * as THREE from "./js/libs/three.module.js"

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        let materialList = [];
        for (let i = 0; i < 20; i++) materialList[i] = material;

        const geometry = new THREE.BoxGeometry();
        //const geometry = new THREE.IcosahedronGeometry(1);

        const cube = new THREE.Mesh(geometry, materialList);

        camera.position.z = 5;

        const animate = function () {

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);


To simplify the code, I use a single material. If I change it from BoxGeometry to Icosahedron nothing is shown.

Do you really need separate material per side? Or just want to have sides, coloured differently?

The faces should have different colors (what I’m working on now) and in the end the numbers 1-20 too. So I will be using some kind of texture I think, but that’s my next step.

Here is a starting point for you: :innocent:

Centered UV coords for triangles taken from here: Tetrahedron (non-indexed buffer geometry)


Thank you very much.

You’re welcome :beers: