#

luxiaotao1123

2024-04-24 51fb05a668caf25227b5d5d9fde468ec58444c5e

#

 src/components/area.jsx

@@ -41,8 +41,6 @@
        <Text
          position={new THREE.Vector3(position.x, textHeight, position.z)}
          text={textContent}
          scale={new THREE.Vector3(100, 100, 100)}
          fontSize={100}
        />
      )}
    </group>

 src/components/text.jsx

@@ -17,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);