#

luxiaotao1123

2024-05-08 19d6c1cbe579409b4fdf77530300b29aa63518d7

 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 Text = ({
  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);