持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

前言

之前已经学习了如何用bcbimJs创建初始化场景，模型的上传、加载、销毁、隐藏和显示等接口，今天接着讲如何创建文字模型。

文字模型

创建文字模型

api.creatMeshWriter(text,config);

接口描述:

创建字体文件

传入参数:

• text：所创建文字内容(必填)
• config：所创建文字的样式 (非必填)

调用实例:

首先在页面上增加一个设置文字模型的按钮。声明一下，我这是用html和jQuery写的demo,用来学习测试的，如果是vue就不需要这样写。

        <div>
            <button id="createWordModel">设置文字模型</button>
        </div>

        $('#createWordModel').click(() => {
            let config = {
                scale: 0.1, // 缩放大小 默认0.1
                anchor: 'center',//锚点 可选值 left、right、center默认center
                size: 10, // 文字大小 默认10
                color: '#333333',//默认#333333
                position: { //文字位置 默认x:0,y:0,z:0
                    x: 0,
                    y: 0,
                    z: 0
                }
            }
            api.creatMeshWriter('这是我添加的文字', config).then(textMesh => {
                console.log(textMesh)//创建完成返回的字体模型
            });
        })

点击按钮生成文字模型

这就是生成的文字模型，等我给他换个角度看，这就能看见了。

设置字体模型颜色，透明度

接着我们来给这个文字设置颜色，来个绿色吧，健康点,再加点透明度看看会怎么样。

api.creatMeshWriter('这是一段文字').then(textMesh => {
     console.log(textMesh) //返回的字体模型
     textMesh.setColor('#00ff00');// 设置字体模型颜色
     textMesh.setAlpha(0.5);// 设置字体模型透明度
});

设置字体模型旋转

但是这个文字添加好之后从初始角度看它是趴在地上的，扁平的，我们来让它旋转一下，以便于第一眼就能直观的看见文字内容。

api.setMeshWriteRotation(textMesh,rotation);

接口描述:

创建字体模型完成后，需要字体模型旋转调用此接口

传入参数:

• textMesh：创建完模型返回的字体模型（必填）

• rotation：各轴旋转度数（必填，不填默认为不旋转）

调用实例:

api.creatMeshWriter('这是一段文字').then(textMesh => {
    console.log(textMesh) //返回的字体模型
    let rotation = {
        x:-90,
        y:180,
        z:0
    }
    api.setMeshWriteRotation(textMesh,rotation)
});

设置字体模型位置

虽然现在可以一眼就看见模型的位置，但是模型和文字之间其实是有距离的，并不是挨在一起的。

我现在想让这个文字标记模型的某个位置，就需要调整文字模型的位置了。

api.setMeshWritePosition(textMesh,position);

接口描述:

创建字体模型完成后，需要修改字体模型位置调用此接口

传入参数:

• textMesh：创建完模型返回的字体模型（必填）

• position：位置坐标（必填，不填默认为原点）

  let position = {
  	x:100,
  	y:100,
  	z:100
  }
  

调用实例:

api.creatMeshWriter('这是一段文字').then(textMesh => {
    console.log(textMesh) //返回的字体模型
    let position = {
        x:-200,
        y:50,
        z:-600
    }
    api.setMeshWritePosition(textMesh,position)
});

这一下就将文字模型加到了模型内部，从那个窗口可以看见一面的文字。

销毁字体模型

之前讲过，创建的模型不会消失，如果在不需要使用该模型的时候，需要调销毁接口进行模型销毁。这个文字模型也是一样，为了不占用资源，他也需要在不使用的时候进行销毁。

api.creatMeshWriter('这是一段文字').then(textMesh => {
     console.log(textMesh) //返回的字体模型
     textMesh.dispose()// 销毁模型
});