import { defineComponent , PropType , watch } from 'vue' ; import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js' ; import { Font , FontLoader } from 'three/examples/jsm/loaders/FontLoader.js' ; import Mesh , { MeshSetupInterface } from './Mesh' ; interface TextSetupInterface extends MeshSetupInterface { geometry ? : TextGeometry ; font ? : Font ; } const props = { text : { type : String , required : true , default : 'Text' } , fontSrc : { type : String , required : true } , size : { type : Number , default : 80 } , height : { type : Number , default : 5 } , depth : { type : Number , default : 1 } , curveSegments : { type : Number , default : 12 } , bevelEnabled : { type : Boolean , default : false } , bevelThickness : { type : Number , default : 10 } , bevelSize : { type : Number , default : 8 } , bevelOffset : { type : Number , default : 0 } , bevelSegments : { type : Number , default : 5 } , align : { type : [ Boolean , String ] as PropType < boolean | string > , default : false } , } as const ; export default defineComponent ( { extends : Mesh , props , setup ( ) { return { } ; } , created ( ) { if ( ! this . fontSrc ) { console . error ( 'Missing required prop: "font-src"' ) ; return ; } const watchProps = [ 'text' , 'size' , 'height' , 'curveSegments' , 'bevelEnabled' , 'bevelThickness' , 'bevelSize' , 'bevelOffset' , 'bevelSegments' , 'align' , ] ; watchProps . forEach ( p => { watch ( ( ) => this [ p ] , ( ) => { if ( this . font ) this . refreshGeometry ( ) ; } ) ; } ) ; const loader = new FontLoader ( ) ; this . loading = true ; loader . load ( this . fontSrc , ( font ) => { this . loading = false ; this . font = font ; this . createGeometry ( ) ; this . initMesh ( ) ; } ) ; } , methods : { createGeometry ( ) { this . geometry = new TextGeometry ( this . text , { font : this . font , size : this . size , height : this . height , depth : this . depth , curveSegments : this . curveSegments , bevelEnabled : this . bevelEnabled , bevelThickness : this . bevelThickness , bevelSize : this . bevelSize , bevelOffset : this . bevelOffset , bevelSegments : this . bevelSegments , } ) ; if ( this . align === 'center' ) { this . geometry . center ( ) ; } } , } , } ) ;