JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<script src="https://code.playcanvas.com/playcanvas-latest.js"></script>
<canvas id="application-canvas"></canvas>

CSS

body {
    margin: 0;
}

canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#logo {
    position: absolute;
    top: 10px;
    right: 10px;
}

JavaScript

// Castle entity

var canvas = document.getElementById("application-canvas");
var app = new pc.Application(canvas, {});

app.start();

var boxMaterial = new pc.StandardMaterial();
boxMaterial.diffuse.set(0.2, 0.77, 0.55);
boxMaterial.update();

var ledgeMaterial = new pc.StandardMaterial();
ledgeMaterial.diffuse.set(0.2, 0.99, 0.55);
ledgeMaterial.update();

var main_base = new pc.Entity();
main_base.addComponent('model', {
    type: "box"
});
main_base.setPosition(0, .5, 0);
var corner_1 = new pc.Entity();
corner_1.addComponent('model', {
    type: "box"
});
corner_1.setPosition(0, .75, 0);
corner_1.setLocalScale(1.3, .2, 1.3);

app.root.addChild(main_base);
app.root.addChild(corner_1);

main_base.model.model.meshInstances[0].material = boxMaterial;
corner_1.model.model.meshInstances[0].material = ledgeMaterial;
var castle_pieces = [];
castle_pieces.push(main_base);
castle_pieces.push(corner_1);
//console.log(asset);
// Fill the available space at full resolution
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);



// Create camera entity
var camera = new pc.Entity();
camera.addComponent('camera', {
    clearColor: new pc.Color(0.1, 0.2, 0.3)
});

// Create directional light entity
var light = new pc.Entity();
light.addComponent('light');

// Add to hierarchy
app.root.addChild(camera);
app.root.addChild(light);

// Set up initial positions and orientations
camera.setPosition(0, 2, 10);
light.setEulerAngles(45, 0, 0);

// Register an update event
app.on("update", function(dt) {
	castle_pieces.forEach(function(piece){
        piece.rotate(0, 10* dt, 0);
    })
});

window.addEventListener('resize', function() {
    app.resizeCanvas(canvas.width, canvas.height);
});