From 3da8a06c9d64f84b3d6121c5950e91e295b8872f Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 08 五月 2024 15:31:41 +0800
Subject: [PATCH] #
---
src/components/text.jsx | 20 ++++++++++----------
1 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/src/components/text.jsx b/src/components/text.jsx
index d5dfdaa..eed3fe5 100644
--- a/src/components/text.jsx
+++ b/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;
--
Gitblit v1.9.1