From 31beb8b95d758d7bfdbb6e233e0de0d9f9429a21 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 11 五月 2024 11:09:01 +0800
Subject: [PATCH] #
---
src/components/text.jsx | 18 +++++++++---------
1 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/src/components/text.jsx b/src/components/text.jsx
index 6d35cfd..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 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);
--
Gitblit v1.9.1