案例展示

在场景中添加 3D 文字

文字格式

支持 json格式。

<template>
    <div class="container">
        <div id="TO"></div>
        <div v-if="loading" class="loading-overlay">
            <div class="loading-spinner"></div>
            <span class="loading-text">加载中...</span>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
let loading = ref(false)
let TO = null
onMounted(() => {
    //初始化场景
    TO = new ThingOrigin('text', document.getElementById('TO'), {
        scene: {
            //场景
            background: {
                //背景颜色
                type: 'color',
                color: {
                    alpha: 1,
                    color: '#000000'
                }
            },
            ground: {
                //地面
                active: false
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 0,
                y: 50,
                z: 200
            }
        },
        helper: {
            //辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        }
    })

    loading.value = true

    createText()
    createTextLine()
    createTextShape()
})

function createText() {
    //常规文字
    TO.font
        .initText({
            modelType: 'text', //模型类型
            position: {
                //位置
                x: -30,
                y: 45,
                z: 0
            },
            base: {
                text: '常规文字', //文本内容
                textType: 'text', //文本类型
                size: 10, //文本的大小
                depth: 10 //文本的厚度（深度）
            },
            material: {
                color: '#f00' //文本的颜色
            }
        })
        .then((model) => {
            console.log('🚀 ~ :68 ~ model:', model)
            loading.value = false
            //添加到场景中
            TO.scene.add(model)
        })
}

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

<style scoped>
.container {
    position: relative;
    width: 100%;
    height: 400px;
}

#TO {
    width: 100%;
    height: 100%;
    position: relative;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    margin-top: 12px;
    color: #fff;
    font-size: 14px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
</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	-	-