update

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild

src/main.ts

@@ -2,7 +2,7 @@ import './style.css';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { flyChaos } from './fly';
-
+import { randomPng } from './random/png';
 const gridSize = 10;
 const cardSize = 3;
 const scene = new THREE.Scene();
@@ -25,7 +25,9 @@ const cards: THREE.Mesh[] = [];
 
 const geometry = new THREE.BoxGeometry(cardSize, cardSize, 0.1);
 const textureLoader = new THREE.TextureLoader();
-const pandaTexture = textureLoader.load('./panda.png');
+// const pandaTexture = textureLoader.load('./panda.png');
+// const pandaTexture = textureLoader.load(randomPng(8));
+const pandaTexture = textureLoader.load(randomPng("小熊猫"));
 pandaTexture.colorSpace = THREE.SRGBColorSpace;
 const material = new THREE.MeshStandardMaterial({
   map: pandaTexture,

src/random/png.ts

@@ -0,0 +1,16 @@
+// 数字图片，然后base64的图片
+export const randomPng = (content: number | string = 1) =>{ 
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d')!;
+  const size = 128;
+  canvas.width = size;
+  canvas.height = size;
+  ctx.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
+  ctx.fillRect(0, 0, size, size);
+  ctx.font = 'bold 32px Arial';
+  ctx.fillStyle = '#ffffff';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(content.toString(), size / 2, size / 2);
+  return canvas.toDataURL();
+}