declare var os ; declare var Canvas ; export default class TestApp5 { private canvas : any ; private engine : any ; constructor ( ) { this . canvas = new Canvas ( ) ; this . engine = new BABYLON . Engine ( this . canvas , true , { stencil : true , disableWebGL2Support : false , preserveDrawingBuffer : true , premultipliedAlpha : false } ) ; BABYLON . Engine . ShadersRepository = 'Shaders/' ; } createScene ( ) { const scene = new BABYLON . Scene ( this . engine ) ; const light = new BABYLON . PointLight ( 'Omni' , new BABYLON . Vector3 ( 0 , 100 , 100 ) , scene ) ; const camera = new BABYLON . ArcRotateCamera ( 'Camera' , 0 , 0.8 , 100 , BABYLON . Vector3 . Zero ( ) , scene ) ; camera . attachControl ( this . canvas , true ) ; const box1 = BABYLON . Mesh . CreateBox ( 'Box1' , 10.0 , scene ) ; box1 . position . x = - 20 ; const box2 = BABYLON . Mesh . CreateBox ( 'Box2' , 10.0 , scene ) ; const materialBox = new BABYLON . StandardMaterial ( 'texture1' , scene ) ; materialBox . diffuseColor = new BABYLON . Color3 ( 0 , 1 , 0 ) ; const materialBox2 = new BABYLON . StandardMaterial ( 'texture2' , scene ) ; box1 . material = materialBox ; box2 . material = materialBox2 ; box2 . position . x = 20 ; const animationBox = new BABYLON . Animation ( 'tutoAnimation' , 'scaling.x' , 30 , BABYLON . Animation . ANIMATIONTYPE_FLOAT , BABYLON . Animation . ANIMATIONLOOPMODE_CYCLE ) ; const keys = [ ] ; keys . push ( { frame : 0 , value : 1 } ) ; keys . push ( { frame : 20 , value : 0.2 } ) ; keys . push ( { frame : 100 , value : 1 } ) ; animationBox . setKeys ( keys ) ; box1 . animations . push ( animationBox ) ; scene . beginAnimation ( box1 , 0 , 100 , true ) ; scene . registerBeforeRender ( function ( ) { box2 . material . diffuseColor = new BABYLON . Color3 ( Math . random ( ) , Math . random ( ) , Math . random ( ) ) ; } ) ; scene . onPrePointerObservable . add ( function ( pointerInfo , eventState ) { const event = pointerInfo . event ; let delta = 0 ; if ( event . wheelDelta ) { delta = event . wheelDelta ; } else if ( event . detail ) { delta = - event . detail ; } if ( delta ) { const dir = scene . activeCamera . getDirection ( BABYLON . Axis . Z ) ; if ( delta > 0 ) { scene . activeCamera . position . addInPlace ( dir . scaleInPlace ( delta * 10 ) ) ; } else { scene . activeCamera . position . subtractInPlace ( dir . scaleInPlace ( - delta * 10 ) ) ; } } } , BABYLON . PointerEventTypes . POINTERWHEEL , false ) ; return scene ; } run ( ) { const scene = this . createScene ( ) ; this . engine . runRenderLoop ( ( ) => { const before = os . clock ( ) ; scene . render ( ) ; const time = ( os . clock ( ) - before ) ; console . log ( `Render time: ${ time } sec.` ) ; } ) ; window . addEventListener ( 'resize' , ( ) => { this . engine . resize ( ) ; } ) ; } }