JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

JavaScript

let camera, scene, renderer, mesh
init();
animate();
function init() {
  camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 2000 );
  camera.position.z =1750;
  scene = new THREE.Scene();
  
  let colors = [
    new THREE.MeshBasicMaterial({color:0xF44336, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x9C27B0, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x3F51B5, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x2196F3, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x00BCD4, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x4CAF50, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0xFFEB3B, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0xFF5722, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x9E9E9E, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x795548, transparent:true, opacity:0.8, side: THREE.DoubleSide})
  ];
  
  let cubeMaterial = new THREE.MeshFaceMaterial(colors);   
  let geometry = new THREE.SphereGeometry( 200, 10, 10 );
  mesh = new THREE.Mesh( geometry, cubeMaterial );
  
	let faceSize = mesh.geometry.faces.length;
    
  for (let x = 0; x < faceSize; x++) {
    let selected = mesh.geometry.faces[x];
    selected.materialIndex = x % 10;
  }
    
  /* geometry.computeFaceNormals() */;
  /* geometry.computeVertexNormals() */;
  
  /* mesh.geometry.colorsNeedUpdate = true */;
  
  scene.add(mesh);
  
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild(...