JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/mrdoob/stats.js/master/build/Stats.js"></script>
<script src="https://chestergl.commondatastorage.googleapis.com/chester.js"></script>
<div style="width: 320px; margin: 1em auto 0 auto;">
<canvas id="gameCanvas" width="320" height="320" style="border 1px solid black"></canvas>
<input type="button" id="pause" value="pause" style="display: block; margin-left: auto; margin-right: auto;"/>
</div>
JavaScript
// used for shaders and other assets where the url is not absolute (including protocol)
chesterGL.settings.basePath = "https://chestergl.commondatastorage.googleapis.com/"
// initialize chester with the specified canvas id
chesterGL.setup("gameCanvas");
var size = chesterGL.viewportSize();
// just a convenient definition (used to rotate objects)
var oneDeg = Math.PI / 180.0;
chesterGL.loadAsset('texture', 'https://chestergl.commondatastorage.googleapis.com/images/star.png', 'star');
// the callback will be executed when all assets are loaded
chesterGL.assetsLoaded("all", function() {
// setup the perspective and finish initialization
chesterGL.setupPerspective();
// create a new scene block. This is the root node
var sceneBlock = new chesterGL.Block(null, chesterGL.Block.TYPE.SCENE);
// scene nodes can have a title, this will be sent to google analytics
// along with perf info if you enable that config
sceneBlock.title = "Test::Fiddle";
chesterGL.setRunningScene(sceneBlock);
// simple block, if the first argument is a string, then it's a block frame
// (cached from before), if it's a rect ([x,y,w,h]) then it uses that. Otherwise
// it will use the full frame of the texture when you set it
// if you specify a block frame, then the texture will also be set at that point
var star = new chesterGL.Block();
star.setTexture("star");
// positions are coordinates in the 3d space. You can pass any value on the Z coord
// + 0 -> closer to the camera
// - 0 -> far away
// By default all blocks are in the same plane Z=0, they are rendered in the order
// added to the parent block
star.setPosition([size.width / 2, size.height / 2, 0]);
// add the star to the scene graph
// you can also add more blocks to create a more complex scene graph
sceneBlock.addChild(star);
// this will be executed every frame, delta is the dt from last
// frame, so you can update your...