title category import { OrthoControl } from "@oasis-engine/controls" ; import { AssetType , Camera , Sprite , SpriteRenderer , Texture2D , WebGLEngine } from "oasis-engine" ; const engine = new WebGLEngine ( "canvas" ) ; engine . canvas . resizeByClientSize ( ) ; const scene = engine . sceneManager . activeScene ; const rootEntity = scene . createRootEntity ( ) ; const cameraEntity = rootEntity . createChild ( "Camera" ) ; cameraEntity . transform . setPosition ( 0 , 0 , 50 ) ; const camera = cameraEntity . addComponent ( Camera ) ; camera . isOrthographic = true ; const cameraControl = cameraEntity . addComponent ( OrthoControl ) ; const mainElement = engine . canvas . _webCanvas ; mainElement . addEventListener ( "wheel" , ( e ) => { if ( e . deltaY < 0 ) { cameraControl . zoomIn ( ) ; } else { cameraControl . zoomOut ( ) ; } } , false ) ; mainElement . addEventListener ( "mousedown" , ( e ) => { cameraControl . panStart ( e . clientX , e . clientY ) ; } ) ; mainElement . addEventListener ( "mousemove" , ( e ) => { cameraControl . panMove ( e . clientX , e . clientY ) ; } ) ; mainElement . addEventListener ( "mouseup" , ( e ) => { cameraControl . panEnd ( ) ; } ) ; engine . resourceManager . load < Texture2D > ( { url : "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*KjnzTpE8LdAAAAAAAAAAAAAAARQnAQ" , type : AssetType . Texture2D } ) . then ( ( texture ) => { const spriteEntity = rootEntity . createChild ( "sprite" ) ; const spriteRenderer = spriteEntity . addComponent ( SpriteRenderer ) ; spriteRenderer . sprite = new Sprite ( engine , texture ) ; } ) ; engine . run ( ) ;