declare var os ; declare var Canvas ; export default class TestApp3 { 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 camera = new BABYLON . ArcRotateCamera ( 'Camera' , 3 * Math . PI / 2 , Math . PI / 8 , 50 , BABYLON . Vector3 . Zero ( ) , scene ) ; camera . attachControl ( this . canvas , true ) ; const light = new BABYLON . HemisphericLight ( 'hemi' , new BABYLON . Vector3 ( 0 , 1 , 0 ) , scene ) ; const box = BABYLON . Mesh . CreateBox ( 'box' , 6.0 , scene ) ; const sphere = BABYLON . Mesh . CreateSphere ( 'sphere' , 10.0 , 10.0 , scene ) ; const plan = BABYLON . Mesh . CreatePlane ( 'plane' , 10.0 , scene ) ; const cylinder = BABYLON . Mesh . CreateCylinder ( 'cylinder' , 3 , 3 , 3 , 6 , 1 , scene , false ) ; const torus = BABYLON . Mesh . CreateTorus ( 'torus' , 5 , 1 , 10 , scene , false ) ; const knot = BABYLON . Mesh . CreateTorusKnot ( 'knot' , 2 , 0.5 , 128 , 64 , 2 , 3 , scene ) ; const lines = BABYLON . Mesh . CreateLines ( 'lines' , [ new BABYLON . Vector3 ( - 10 , 0 , 0 ) , new BABYLON . Vector3 ( 10 , 0 , 0 ) , new BABYLON . Vector3 ( 0 , 0 , - 10 ) , new BABYLON . Vector3 ( 0 , 0 , 10 ) ] , scene ) ; lines . color = new BABYLON . Color3 ( 100 , 200 , 0 ) ; const exponentialPath = function ( p ) { const path = [ ] ; for ( const i = - 10 ; i < 10 ; i ++ ) { path . push ( new BABYLON . Vector3 ( p , i , Math . sin ( p / 3 ) * 5 * Math . exp ( - ( i - p ) * ( i - p ) / 60 ) + i / 3 ) ) ; } return path ; } ; const arrayOfPaths = [ ] ; for ( const p = 0 ; p < 20 ; p ++ ) { arrayOfPaths [ p ] = exponentialPath ( p ) ; } const ribbon = BABYLON . Mesh . CreateRibbon ( 'ribbon' , arrayOfPaths , false , false , 0 , scene ) ; box . position = new BABYLON . Vector3 ( - 10 , 0 , 0 ) ; sphere . position = new BABYLON . Vector3 ( 0 , 10 , 0 ) ; plan . position . z = 10 ; cylinder . position . z = - 10 ; torus . position . x = 10 ; knot . position . y = - 10 ; ribbon . position = new BABYLON . Vector3 ( - 10 , - 10 , 20 ) ; 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 ( ) ; } ) ; } }