threejs 模型添加文字的多种方式汇总

更新时间：2023年03月04日 10:43:54 作者：杨大大28

这篇文章主要介绍了threejs 模型添加文字的几种方式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1 将文字绘制到canvas中，并将其用作Texture

给正方体某个表面添加文字为例；如下创建一个正方体

// ---------------------------------------------------------------------
// 添加模型
// ---------------------------------------------------------------------
var geometry = new THREE.BoxGeometry( 30,30, 30 );
var materials = [ 
    new THREE.MeshBasicMaterial( { color: 'blue' } ), // right
    new THREE.MeshBasicMaterial( { color: 'yellow' } ), // left
    new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(getTextCanvas1()) } ), // top
    new THREE.MeshBasicMaterial( { color: 'black' } ), // bottom
    new THREE.MeshBasicMaterial( { color: 'green' } ), // back
    new THREE.MeshBasicMaterial( { color: 'red' } ) // front 
    ];
var cube = new THREE.Mesh( geometry, materials );
scene.add(cube);

登录后复制免费讲解

其中正方体顶部表面,使用CanvasTexture作为材质，如下该材质可以用canvas或者img或者视频元素作为贴图，下面以canvas为例；

在canvas中绘制文本，可以通过filltext绘制文本，遍历可以实现换行的效果

// CanvasTexture
function getTextCanvas1(){ 
    let texts=[{
        name:"北京",
        value:323
    },{
        name:"杭州",
        value:121
    },{
        name:"南京",
        value:56
    }]
    var width=512, height=256; 
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#C3C3C3';
    ctx.fillRect(0, 0, width, height);
    ctx.font = 32+'px " bold';
    ctx.fillStyle = '#2891FF';
    texts.forEach((text,index)=>{
        ctx.fillText(`${text.name}:${text.value}`, 10, 32 * index + 30);
    }) 
    return canvas;
}

登录后复制免费讲解

效果:

优点是可以绘制任意样式文字，缺点是canvas一旦生成，因为分辨率不再改变，所以在threejs中放大时会模糊

2 用一个透明表面贴在几何体表面

这种方式适合较规范的几何体模型；仍然以上面正方体为例，跟第一种方式原理差不多，将文字绘制在一个透明几何平面上，然后把平面的位置设置在刚好覆盖正方体前表面；

代码如下

function getTextCanvas2(){
 //用canvas生成图片
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext('2d')
  canvas.width = 300
  canvas.height = 300
  //制作矩形
  ctx.fillStyle = "gray"; 
  ctx.fillRect(0, 0, 300, 300)
  //设置文字
  ctx.fillStyle = "white";
  ctx.font = 'normal 20px "楷体"'
  ctx.fillText('这个平面将被贴在正方体前表面', 0, 20)
  
  //生成图片
  let url = canvas.toDataURL('image/png');
  //将图片构建到纹理中
  let geometry1 = new THREE.PlaneGeometry(30, 30)
  let material1 = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load(url),
    side: THREE.DoubleSide,
    opacity: 1
  })
  let rect = new THREE.Mesh(geometry1, material1)
  rect.position.set(0, 0, 25.1)
  scene.add(rect)
}
getTextCanvas2();

登录后复制免费讲解

效果:

可以看到没有贴到表面，需要调整z值为15.1， rect.position.set(0, 0, 15.1)，看最后效果

但是平面的颜色将原本正方体颜色覆盖

将canvas矩形的颜色和材质颜色都设置为透明即可

//制作矩形
ctx.fillStyle = "transparent";  // 设为透明
 
 
//将图片构建到纹理中
let geometry1 = new THREE.PlaneGeometry(30, 30)
let material1 = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load(url),
  side: THREE.DoubleSide,
  opacity: 1,
  transparent: true, // 设为透明
})

登录后复制免费讲解

3 使用threejs提供的文字几何体接口

通过THREE.TextGeometry生成文字几何体。在一个立方体表面遍历添加一排文字，效果如下:

代码如下:

// ---------------------------------------------------------------------
// 添加文字模型
// ---------------------------------------------------------------------
let texts1=[
{
    name:"北 京",
    value:23
}
,{
    name:"杭 州",
    value:23
},
{
    name:"南 京",
    value:23
},
{
    name:"南 京",
    value:23
} 
,{
    name:"杭 州",
    value:23
},
{
    name:"南 京",
    value:23
},
{
    name:"南 京",
    value:23
}
  
]
texts1.forEach((text,index)=>{
    addTextGeometry(text,index);
})
  
  
// 添加文字geometry
function addTextGeometry(text,index){
    var loader = new THREE.FontLoader(); 
    loader.load("/statics/fonts/chinese.json", function (res) { 
        var geometry = new THREE.TextGeometry(`${text.name}: ${text.value}`, {
            font: res,          // 字体格式
            size: 13,           // 字体大小
            height: 1,          // 字体深度
            curveSegments: 11,  // 曲线控制点数
            bevelEnabled: true, // 斜角
            bevelThickness: 0.1,  // 斜角的深度
            bevelSize: 1,       // 斜角的大小
            bevelSegments: 1    // 斜角段数
        });
        var mat = new THREE.MeshPhongMaterial({
            color: "white",
            opacity: 0.8,
            shininess: 1,
        });
        var mesh = new THREE.Mesh(geometry, mat);
        mesh.rotation.y=-Math.PI/2
        mesh.position.set(-151,150-40*index, 15.1);
        scene.add(mesh);
    }); 
}

登录后复制免费讲解

其中chinese.json是字体文件，如下 three提供了几中默认的字体格式，但是都支持英文，如果要添加中文文字，需要借助转换工具，将ttf的文字格式转换为json文件

转换很简单:

首先下载字体，参考网站：https://www.jb51.net/fonts/

然后使用在线转换工具Facetype.js，转换为json文件后下载即可。也可以将该工具下载到本地，直接运行；

如果在使用过程中，报错找不到stylename的情况，可能是因为下载的ttf某些属性缺失，那么可以适当调整main.js代码，如下

更多文章请参考文献

http://xiaobaigis.com

到此这篇关于threejs 模型添加文字的几种方式的文章就介绍到这了,更多相关threejs 模型添加文字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信公众号搜索 “ 脚本之家 ” ，选择关注

程序猿的那些事、送书等活动等着你

原文链接：https://blog.csdn.net/popstarqq/article/details/121358143

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 reterry123@163.com 进行投诉反馈，一经查实，立即处理！

threejs太阳光与阴影效果实例代码
在Threejs中类似于我们现实世界,物体显示的颜色是由物体本身的颜色及光照的颜色相互叠加而得到的,这篇文章主要给大家介绍了关于threejs太阳光与阴影效果的相关资料,需要的朋友可以参考下
2022-04-04
JavaScript中的时间处理小结
这篇文章主要介绍了JavaScript中的时间处理小结的相关资料,需要的朋友可以参考下
2016-02-02
JavaScript正则函数中test和match的区别解析
在javascript中，用于检测一个字符串是否匹配某个模式用的比较多的就是test和match方法。，这篇文章主要介绍了js正则函数中test和match的区别,需要的朋友可以参考下
2022-11-11
js 火狐下取本地路径实现思路
火狐下取本地全路径使用js代码实现，感兴趣的朋友可以参考下哈，希望可以帮助到你
2013-04-04
基于JavaScript打造一款桌面级便签系统
本文将用html，css和JavaScript实现一个简单的便签系统。除非手动清空便签，否则便签会一直保留，非常方便。感兴趣的小伙伴可以跟随小编一起动手试一试
2022-02-02
JS生成唯一id方式之UUID和NanoID
这篇文章主要介绍了JS生成唯一id方式之UUID和NanoID，唯一id有了更好的方式，那就是NanoID，今天这篇文章记录一下NanoID 正在取代 UUID？及js 生成uuid及NanoID的方法，下面来看文章的详细介绍
2021-12-12
基于require.js的使用(实例讲解)
下面小编就为大家带来一篇基于require.js的使用(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
javascript实现二分查找法实现代码
javascript实现二分查找法实现代码...
2007-11-11
typescript配置alias的详细步骤
这篇文章主要介绍了typescript配置alias，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
两种方法实现文本框输入内容提示消失
第一种方法:基于HTML5 input标签的新特性 - placeholder 。另外，x-webkit-speech 属性可以实现语音输入功能;第二种方法：用span模拟，定位span，借助JS键盘事件判断输入，确定span里的内容显示隐藏
2013-03-03