Canvas作为精灵或网格模型标签的贴图

最新推荐文章于 2025-05-09 18:18:21 发布

OYlan_

最新推荐文章于 2025-05-09 18:18:21 发布

阅读量1.1k

点赞数 19

CC 4.0 BY-SA版权

分类专栏： THREE 文章标签： javascript 前端笔记 webgl

本文链接：https://blog.youkuaiyun.com/OYlan_/article/details/136214857

该篇文章详细讲解了如何使用three.js中的canvas技术，配合精灵模型和平面网格模型创建动态显示信息的标签，并实现通过后端数据变化实时更新显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

郭隆邦老师threejs教程学习笔记

threejs可以使用精灵模型或者平面网格模型作为模型标签，为了显示模型的信息，可以用一张图片作为精灵或平面网格模型的颜色贴图，也可以在canvas画布上绘制好要表达的几何图形、文字等信息，比如进度条，然后作为精灵或平面网格模型的颜色贴图。

canvas画布作为精灵模型的颜色贴图

    //创建一个canvas画布绘制模型的信息，作为模型标签精灵的颜色贴图
    const canvas = document.createElement("canvas");
    //精灵模型会随着场景缩放，注意画布宽高尺寸不能太小
    //如果canvas宽高太小，精灵标签可能会模糊
    canvas.width = 512;
    canvas.height = 128;
    const ctx = canvas.getContext('2d');
    // 矩形区域填充背景，半透明
    ctx.fillStyle = 'rgba(0,0,0,0.6)';
    ctx.fillRect(0, 0, 512, 128);
    ctx.beginPath();
    ctx.beginPath();
    ctx.translate(50, 64);
    ctx.font = "bold 48px 宋体";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "#ffffff";
    ctx.fillText("写字楼人数:", 0, 0);
    ctx.translate(300, 0);
    ctx.fillStyle = "#00ffff";
    ctx.fillText("100人", 0, 0);
    //canvas画布不需要插入到body中
    // document.body.appendChild(canvas)

    // canvas画布对象作为CanvasTexture的参数重建一个纹理对象
    // canvas画布可以理解为一张