import { defineComponent } from 'vue' ; import { Sprite , SpriteMaterial , Texture , TextureLoader } from 'three' ; import Object3D , { Object3DSetupInterface } from '../core/Object3D' ; interface SpriteSetupInterface extends Object3DSetupInterface { texture ? : Texture ; material ? : SpriteMaterial ; sprite ? : Sprite ; } export default defineComponent ( { extends : Object3D , emits : [ 'loaded' ] , props : { src : { type : String , required : true } , } , setup ( ) { return { } ; } , created ( ) { this . texture = new TextureLoader ( ) . load ( this . src , this . onLoaded ) ; this . material = new SpriteMaterial ( { map : this . texture } ) ; this . sprite = new Sprite ( this . material ) ; this . initObject3D ( this . sprite ) ; } , unmounted ( ) { this . texture ?. dispose ( ) ; this . material ?. dispose ( ) ; } , methods : { onLoaded ( ) { this . updateUV ( ) ; this . $emit ( 'loaded' ) ; } , updateUV ( ) { if ( ! this . texture || ! this . sprite ) return ; const iWidth = this . texture . image . width ; const iHeight = this . texture . image . height ; const iRatio = iWidth / iHeight ; let x = 0.5 , y = 0.5 ; if ( iRatio > 1 ) { x = 0.5 * iRatio ; } else { y = 0.5 / iRatio ; } const positions = this . sprite . geometry . attributes . position . array as Array < number > ; positions [ 0 ] = - x ; positions [ 1 ] = - y ; positions [ 5 ] = x ; positions [ 6 ] = - y ; positions [ 10 ] = x ; positions [ 11 ] = y ; positions [ 15 ] = - x ; positions [ 16 ] = y ; this . sprite . geometry . attributes . position . needsUpdate = true ; } , } , __hmrId : 'Sprite' , } ) ;