title category import { Camera , Logger , Vector3 , WebGLEngine , Entity } from "oasis-engine" ; import { SpineAnimation } from "@oasis-engine/spine" ; import * as dat from "dat.gui" ; Logger . enable ( ) ; const gui = new dat . GUI ( ) ; const engine = new WebGLEngine ( "canvas" ) ; engine . canvas . resizeByClientSize ( ) ; const scene = engine . sceneManager . activeScene ; const rootEntity = scene . createRootEntity ( ) ; const cameraEntity = rootEntity . createChild ( "camera_node" ) ; const camera = cameraEntity . addComponent ( Camera ) ; cameraEntity . transform . position = new Vector3 ( 0 , 0 , 60 ) ; engine . resourceManager . load ( { urls : [ 'https://gw.alipayobjects.com/os/OasisHub/c51a45ef-f248-4835-b601-6d31a901f298/1629713824525.json' , 'https://gw.alipayobjects.com/os/OasisHub/b016738d-173a-4506-9112-045ebba84d82/1629713824527.atlas' , 'https://gw.alipayobjects.com/zos/OasisHub/747a94f3-8734-47b3-92b3-2d7fe2d36e58/1629713824527.png' , ] , type : "spine" } ) . then ( ( spineEntity ) => { rootEntity . addChild ( spineEntity ) ; const spineAnimation = spineEntity . getComponent ( SpineAnimation ) ; const { skeleton , state } = spineAnimation ; spineEntity . transform . setPosition ( 0 , - 18 , 0 ) ; state . setAnimation ( 0 , "dance" , true ) ; skeleton . setSkinByName ( 'girl' ) ; skeleton . setSlotsToSetupPose ( ) ; state . apply ( skeleton ) ; spineAnimation . scale = 0.05 ; const info = { skin : 'girl' } ; gui . add ( info , "skin" , [ "girl" , "girl-blue-cape" , "girl-spring-dress" , "boy" ] ) . onChange ( ( skinName ) => { skeleton . setSkinByName ( skinName ) ; skeleton . setSlotsToSetupPose ( ) ; state . apply ( skeleton ) ; } ) ; } ) ; engine . run ( ) ;