Canvas 用ThreeJS更新'THREE.Sprite'中的文本

我使用

context.fill

方法创建了一个包含文本的sprite对象。但是，我想更改文本，使其显示我在3D画布中计算的距离。我经常计算，所以这就是为什么我不简单地创建带有新值的新精灵

例如：

精灵始终显示，当我在3D世界中计算距离时，精灵内的文本将更改为距离值

我正在使用：ThreeJS r66和以下内容：

函数makeTextSprite（消息、参数）{
如果（参数===未定义）参数={}；
var fontface=parameters.hasOwnProperty（“fontface”）？
参数[“fontface”]：“Arial”；
var fontsize=parameters.hasOwnProperty（“fontsize”）？
参数[“fontsize”]：18；
var borderThickness=parameters.hasOwnProperty（“borderThickness”）？
参数[“边界厚度”]：4；
var borderColor=parameters.hasOwnProperty（“borderColor”）？
参数[“borderColor]：{r:0，g:0，b:0，a:1.0}；
var backgroundColor=parameters.hasOwnProperty（“backgroundColor”）？
参数[“backgroundColor]：{r:255，g:255，b:255，a:1.0}；
//var spriteAlignment=THREE.spriteAlignment.topLeft；
var canvas=document.createElement（'canvas'）；
var context=canvas.getContext（'2d'）；
context.font=“Bold”+fontsize+“px”+fontface；
//获取大小数据（高度仅取决于字体大小）
var metrics=context.measureText（消息）；
var textWidth=metrics.width；
//背景色
context.fillStyle=“rgba（“+backgroundColor.r+”，“+backgroundColor.g+”，”
+backgroundColor.b+“，“+backgroundColor.a+”；
//边框颜色
context.strokeStyle=“rgba（“+borderColor.r+”，“+borderColor.g+”，”
+borderColor.b+“，“+borderColor.a+”；
context.lineWidth=边框厚度；
roundRect（上下文、borderThickness/2、borderThickness/2、textWidth+borderThickness、fontsize*1.4+borderThickness、6）；
//1.4是基线以下文本的额外高度系数：g、j、p、q。
//文本颜色
context.fillStyle=“rgba（0,0,0,1.0）”；
context.fillText（消息、边框厚度、字体大小+边框厚度）；
//画布内容将用于纹理
var纹理=新的三点纹理（画布）
texture.needsUpdate=true；
var spriteMaterial=新的三个spriteMaterial(
{map:texture，useScreenCoordinates:false}）；
变量sprite=新的三个sprite（spriteMaterial）；
雪碧.天平.套装（1000，500，10）；
返回精灵；
}
//用于绘制圆形矩形的函数
函数roundRect（ctx，x，y，w，h，r）{
ctx.beginPath（）；
ctx.moveTo（x+r，y）；
ctx.lineTo（x+w-r，y）；
四次曲线（x+w，y，x+w，y+r）；
ctx.lineTo（x+w，y+h-r）；
四次曲线（x+w，y+h，x+w-r，y+h）；
ctx.lineTo（x+r，y+h）；
四次曲线（x，y+h，x，y+h-r）；
ctx.lineTo（x，y+r）；
ctx.二次曲线（x，y，x+r，y）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
}

我将从您的问题中提取您的解决方案，并将其发布在此处，以在将来帮助其他人

这是一个图像，您可以用新的整体绘制填充它，并重写文本，如下所示：

message=“它能工作！”；
context.fillStyle=“rgba（0,0,0,1.0）”；//黑色透明（新背景色）
context.fill（）；//填空
context.fillStyle=“rgba（255,0,0,1.0）”；//文本为红色
context.fillText（消息，context.lineWidth，24+context.lineWidth）；//写文本
spritey.material.map.needsUpdate=true；//并更新图像。。
Render（）；//正常渲染后：）

---

唯一的问题是，你不能有不透明度/透明背景的精灵，因为你正在“画”它。如果将fillStyle设置为alpha值=0.5，则旧文本将通过新文本可见。

不建议直接设置

\u needsUpdate

属性。改为设置

needsUpdate

。