以base64字符串的形式在react中加载three.js纹理

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

const MyComponent = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    // 创建场景、相机、渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    canvasRef.current.appendChild(renderer.domElement);

    // 创建纹理对象并加载Base64字符串
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load('data:image/png;base64,iVBORw0KG...'); // 使用你的Base64字符串
    const material = new THREE.MeshBasicMaterial({ map: texture });

    // 创建一个立方体并应用纹理
    const geometry = new THREE.BoxGeometry();
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 设置相机位置
    camera.position.z = 5;

    // 渲染场景
    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();

    // 组件卸载时清理资源
    return () => {
      renderer.dispose();
      texture.dispose();
    };
  }, []);

  return <div ref={canvasRef} />;
};

export default MyComponent;