(window.webpackJsonp=window.webpackJsonp||[]).push([[191],{707:function(n,e,t){"use strict";t.r(e),e.default="const {Scene, Sprite} = spritejs;\nconst container = document.getElementById('stage');\nconst spriteScene = new Scene({\n  container,\n  width: 600,\n  height: 600,\n  autoRender: false,\n  contextType: 'webgl',\n});\nconst bglayer = spriteScene.layer('bglayer');\nconst fglayer = spriteScene.layer('fglayer', {\n  handleEvent: false,\n});\n\nconst imgUrl = 'https://p5.ssl.qhimg.com/t01a2bd87890397464a.png';\nconst sprite = new Sprite({\n  texture: imgUrl,\n  pos: [300, 300],\n  anchor: 0.5,\n});\nbglayer.append(sprite);\n\n/* globals clay */\nconst app = clay.application.create(fglayer.canvas, {\n\n  // Enable event. Or the mouseover, mouseout events will not be triggered.\n  event: true,\n\n  init(app) {\n    // Create camera\n    this._camera = app.createCamera([0, 0.5, 7], [0, 0, 0]);\n\n    function makeRandomColor() {\n      return [Math.random(), Math.random(), Math.random()];\n    }\n    function createCube() {\n      const randomColor = makeRandomColor();\n      const cube = app.createCube({\n        color: randomColor,\n      });\n      cube.on('mouseover', () => {\n        cube.material.set('color', [1, 0, 0]);\n      }, this).on('mouseout', () => {\n        cube.material.set('color', randomColor);\n      }, this);\n      return cube;\n    }\n\n    this._cubes = [];\n    // Create cube\n    for(let i = 0; i < 3; i++) {\n      for(let k = 0; k < 3; k++) {\n        const cube = createCube();\n        cube.scale.set(0.5, 0.5, 0.5);\n        cube.position.set((i - 1) * 2, (k - 1) * 2, 0);\n        this._cubes.push(cube);\n      }\n    }\n\n    // Create light\n    this._mainLight = app.createDirectionalLight([-1, -1, -1]);\n    app.createAmbientLight('#fff', 0.3);\n  },\n\n  loop(app) {\n    this._cubes.forEach((cube) => {\n      bglayer.render();\n      cube.rotation.rotateY(app.frameTime / 1000);\n    });\n  },\n});"}}]);