// 创建几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);

// 材质
const boxMaterial = new THREE.MeshBasicMaterial({
  transparent: true,
});
const canvas = createCanvas(400, 400);
const canvasTexture = new THREE.CanvasTexture(canvas);
boxMaterial.map = canvasTexture;

// 网格
const box = new THREE.Mesh(
  boxGeometry,
  boxMaterial
);

// canvas的宽高如何确定？需要结合webgl里该材质的显示大小，然后再结合屏幕像素比即可
// 比如上面的边长为1的box，显示到屏幕上，可能会占到200px
// 然后再结合到屏幕的设备像素比为2的话，那么制作canvas材质时，尺寸应该为 200 * 2 = 400

function createCanvas(w, h) {
    const canvas = document.createElement('canvas');
    canvas.classList.add('test');
    const context = canvas.getContext('2d');
    canvas.width = w;
    canvas.height = h;
    context.textAlign = 'center';
    context.fillStyle = '#ff0000';
    context.fillRect(0, 0, w, w);
    context.fillStyle = '#fff';
    context.font = `${0.1 * w}px sans-serif`;
    context.fillText(`${Math.random().toFixed(5)}`, w * 0.5, h * 0.5);
    return canvas;
}