Sprite可以用来做三维场景中的显示框,它是一个2D的东西,在3D场景中始终面向摄像头,就很适合来做一种状态显示之类的东西
感谢大佬的带更新文字的旋转地球的案例教学,我在此基础上,大体流程是这样的,先做一个canvas,并设置style="display:none,因为创建它的目的,是在它上面写信息,然后把它作为点精灵材质(SpriteMaterial)的参数去构造一个点精灵材质,进一步构造一个点精灵Sprite,上面的案例中的提前准备的canvas中只加了一个文本,而我这里还添加了一个矩形、画了一段线,让它看起来更像一个状态框,在W3SCHOOL里运行出来是这样的
Three.js Sprite 更新
可以看到:

  1. 我把伸出来的线终点画到了canvas的正中心,因为只有这样,做出来的sprite在3D场景中旋转时,才会以终点处为旋转点,也就是以画布的正中心来旋转
  2. 上面案例里也提到过,要重新设置sprite的尺寸,因为默认的(1,1,1)在我这里也小的看不到,我这里设置的(60,60,1)Z轴没用,设置1就好
  3. 还要注意的问题是,用animate()去更新sprite(其实是重新绘制canvas的内容)的时候,要注意先从scene里把这个sprite给remove,然后再重新add进去,否则,不更新还好,只是字体越来越粗越黑,更新的话内容会重叠;其次,写文字画矩形画线之前的这一句:*ctx.canvas.width=300;*不能省略,省略了,就算remove了之前的sprite再重新add一样会重叠内容,而且必须加在所有的最前面,比如如果我跳过画边框,加在他后面,那么只能绘制出文字和线段。

相关文章:

  • 2021-09-01
  • 2022-12-23
  • 2021-12-25
  • 2022-12-23
  • 2021-04-09
  • 2021-12-19
  • 2021-04-08
  • 2021-05-18
猜你喜欢
  • 2021-12-06
  • 2022-12-23
  • 2021-08-08
  • 2021-04-14
  • 2022-12-23
  • 2021-05-06
  • 2021-07-20
相关资源
相似解决方案