JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<canvas id="numbers" width="1024" height="64" style="position: absolute; margin: 5px; border: 1px dashed yellow;"></canvas>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 10, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x404040);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let g = new THREE.IcosahedronGeometry(5);
let colors = [];
let c = new THREE.Vector3();
let uv = [];
for(let i = 0; i < 20;i++){
	c.random().multiplyScalar(0.5).addScalar(0.5);
	colors.push(c.x, c.y, c.z, c.x, c.y, c.z, c.x, c.y, c.z);
  uv.push(
  	(0.067 + i) / 20, 0.25, 
    (0.933 + i) / 20, 0.25, 
    (0.5 + i) / 20, 1
  );
}
g.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
g.setAttribute("uv", new THREE.Float32BufferAttribute(uv, 2));

let m = new THREE.MeshBasicMaterial({vertexColors: true, map: makeNumbers()});
let o = new THREE.Mesh(g, m);
scene.add(o);


renderer.setAnimationLoop( _ => {
	renderer.render(scene, camera);
})

function makeNumbers(){
	let c = numbers;
  let ctx = c.getContext("2d");
  ctx.fillStyle = "#fff";
	ctx.fillRect(0, 0, c.width, c.height);
  
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = "#000";
  ctx.font = 'bold 20px Arial';
  let step = 1024 / 20;
  let start = step * 0.5;
  
  for (let i = 0; i < 20; i++){
  	ctx.fillText(i + 1, start + step * i, 32);
  }
  
  return new THREE.CanvasTexture(c);
}