案例展示

在场景中添加 3D 文字

文字格式

支持 json格式。

<template>
  <div id="TO" v-loading="loading"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const loading = ref(false);
let TO = null;
onMounted(() => {
  //初始化场景
  TO = new ThingOrigin("text", document.getElementById("TO"), {
    helper: {//辅助工具
      axes: {
        active: false,
      },
      grid: {
        active: false,
      },
    }
  });

  loading.value = true;

  createText();
  createTextLine();
  createTextShape();
});

function createText() {
  //常规文字
  TO.font.initText(
    {
      modelType: "text", //模型类型
      position: { //位置
        x: -30,
        y: 65,
        z: 0,
      },
      base: {
        text: "常规文字", //文本内容
        textType: "text", //文本类型
        size: 10, //文本的大小
        depth: 10, //文本的厚度（深度）
        color: "#f00",//文本的颜色
        fontUrl: `${import.meta.env.BASE_URL}assets/font/YaHei.json`, //字体文件的 URL
      }
    }
  ).then((model) => {
    loading.value = false;
    //添加到场景中
    TO.scene.add(model);
  })
}

function createTextLine() {
  //字体描线文字
  TO.font.initTextLine(
    {
      modelType: "text",//模型类型
      position: { //位置
        x: -30,
        y: 35,
        z: 0,
      },
      base: {
        text: "字体描线文字",//文本内容
        textType: "traceText",//文本类型
        lineWidth: 2, //文本宽度
        opacity: 1, //透明度
        size: 10, //文本大小
        color: "#f00",//文本的颜色
        fontUrl: `${import.meta.env.BASE_URL}assets/font/YaHei.json`,//字体文件的 URL
      }
    }
  ).then((model) => {
    loading.value = false;
    //添加到场景中
    TO.scene.add(model);
  })
}
function createTextShape() {
  //字体形状文字
  TO.font.initTextShape(
    {
      modelType: "text",//模型类型
      position: {//位置
        x: -30,
        y: 5,
        z: 0,
      },
      base: {
        text: "字体形状文字", //文本内容
        textType: "shapeText",//文本类型
        transparent: true, //是否启用透明效果
        opacity: 0.4, //透明度
        size: 10, //文本大小
        color: "#f00",//文本的颜色
        fontUrl: `${import.meta.env.BASE_URL}assets/font/YaHei.json`,//字体文件的 URL
      }
    }
  ).then((model) => {
    loading.value = false;
    //添加到场景中
    TO.scene.add(model);
  })
}
</script>

<style scoped>
#TO {
  width: 100%;
  height: 400px;
  position: relative;
}
</style>

API 介绍

font.initText

方法签名	返回值	描述
initText(modelInfo?: modelInfoParams)	Promise<Object3D>	创建常规 3D 文字

font.initTextLine

方法签名	返回值	描述
initTextLine(modelInfo?: modelInfoParams)	Promise<Object3D>	创建字体描线文字

font.initTextShape

方法签名	返回值	描述
initTextShape(modelInfo?: modelInfoParams)	Promise<Object3D>	创建字体形状文字

参数说明：

参数名	说明	类型	必填	默认值
modelInfo	模型参数	modelInfoParams	-	-