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);
document.body.appendChild(renderer.domElement);
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);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
To simplify the code, I use a single material. If I change it from BoxGeometry to Icosahedron nothing is shown.
