#

luxiaotao1123

2024-04-24 51fb05a668caf25227b5d5d9fde468ec58444c5e

 src/components/text.jsx

@@ -1,7 +1,6 @@
import * as THREE from 'three';
import { useEffect, useState } from 'react';


function generateSprite(text, color, fontSize = 50) {
  const canvas = document.createElement('canvas');
  canvas.width = 300;
@@ -18,17 +17,18 @@
  return canvas;
}

const Text2 = ({
  text,
  position,
  scale = new THREE.Vector3(100, 100, 100),
  color = '#00D1D1',
  fontSize = 50,
}) => {
const Text = (props) => {
  const { text, position, color = '#00D1D1', fontSize = 100 } = props;

  const [material, setMaterial] = useState(undefined);
  const [scale, setScale] = useState(new THREE.Vector3(100, 100, 100));

  useEffect(() => {
    const canvas = generateSprite(text, color, fontSize);
    const texture = new THREE.CanvasTexture(canvas);
    setScale(new THREE.Vector3(texture.image.width / 4, texture.image.height / 4, 1));
    const material = new THREE.SpriteMaterial({
      map: new THREE.CanvasTexture(generateSprite(text, color, fontSize)),
      map: texture,
      blending: THREE.AdditiveBlending,
    });
    setMaterial(material);
@@ -37,4 +37,4 @@
  return <sprite material={material} position={position} scale={scale} />;
}

export default Text2;
export default Text;