ThingOrigin.js

案例展示 ​

在场景中添加 3D 文字

文字格式 ​

支持 json格式。

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

<script setup>
import { ref,onMounted } from 'vue';

const loading = ref(false)


onMounted(() => {
  let TO = new ThingOrigin("text", document.getElementById("TO"), {
    helper: {
      axes: {
        active: false,
      },
      grid: {
        active: false,
      },
    }
  }
  );

  loading.value = true;
  //常规文字
  TO.font.initText(
    {
      modelType: "text",
      position: {
        x: -30,
        y: 30,
        z: 0,
      },
      scale: {
        x: 1,
        y: 1,
        z: 1,
      },
      rotation: {
        x: 0,
        y: 0,
        z: 0,
      },
      base: {
        text: "ThingOriginJS",
        textType: "text",
        size: 10,
        depth: 10,
        color: "#f00",
        fontUrl: `${import.meta.env.BASE_URL}assets/font/YaHei.json`,
      }
    }
  ).then((model) => {
    loading.value = false;
    TO.scene.add(model)
  })

  //字体描线文字
  TO.font.initTextLine(
    {
      modelType: "text",
      position: {
        x: -30,
        y: 0,
        z: 0,
      },
      scale: {
        x: 1,
        y: 1,
        z: 1,
      },
      rotation: {
        x: 0,
        y: 0,
        z: 0,
      },
      base: {
        text: "ThingOriginJS",
        textType: "traceText",
        size: 10,
        depth: 10,
        color: "#f00",
        fontUrl: `${import.meta.env.BASE_URL}assets/font/YaHei.json`,
      }
    }
  ).then((model) => {
    loading.value = false;
    TO.scene.add(model)
  })

  //字体形状文字
  TO.font.initTextShape(
    {
      modelType: "text",
      position: {
        x: -30,
        y: -30,
        z: 0,
      },
      scale: {
        x: 1,
        y: 1,
        z: 1,
      },
      rotation: {
        x: 0,
        y: 0,
        z: 0,
      },
      base: {
        text: "ThingOriginJS",
        textType: "shapeText",
        size: 10,
        depth: 10,
        color: "#f00",
        fontUrl: `${import.meta.env.BASE_URL}assets/font/YaHei.json`,
      }
    }
  ).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?: any)Promise<Object3D<Object3DEventMap>>添加 3D 文字

参数说明：

参数名类型是否必选描述
modelInfoany否模型参数

font.initTextShape ​

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

参数说明：

参数名类型是否必选描述
modelInfoany否模型参数

font.initTextLine ​

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

参数说明：

参数名类型是否必选描述
modelInfoany否模型参数