Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
	<input id="isAlex" type="checkbox"><label for="isAlex">Alex Model</label><br>
	Pose:<select id="pose_select"></select><br>
	Texture:<input id="file" type="file" accept=".png"><div id="thumb"></div><br>
  <button id="rotate">rotate</button>
  <button id="reset">reset camera</button>
  <button id="execute">draw</button><br>
  <div id="background">
	<canvas id="myCanvas" ></canvas>
  </div>
	<img id="steve" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABJlBMVEUAAAAAmZkAqKgAr68AaGgAnp4mGgoAf38oGwopHAwrHg0sHg4vHw86MYlqQDCGUzSHVTuWX0GWb1uqfWZ1Ry8wKHIqHQ0kGAgmGAs/Pz8AzMwAW1uBUzknGwstHQ4tIBCaY0QoGg1GOqUmIVsfEAsrHg4mGgxRMSVSPYliQy8sHhF0SC8oGwt6TjMoHAuDVTuEUjEkGAovIhGHWDqIWjmKWTsjFwkyIxAzJBGcY0WcZ0icaUydak+iakc6KBS0hG27iXL///9ra2ttQyqPXj6QXkOWX0BvRSwoKChCKhKaZEp3QjWcY0YvIA2AUzScclw0JRKfaElSKCYjIyOsdlqtgG2ze2JWScy1e2e2iWy3gnIAYGC9i3K9jnK9jnS+iGzGloA/KhVn+dXJAAAAAXRSTlMAQObYZgAAAs9JREFUeF7t1uWO4zAUBeAxhBnKPMzMPMvMzPv+L7En9lgD2d0U/vaokq8q3a+5qSV7QqVcruBTmU4vMzFoyhXXBVBJ/cAPgmEA19Ul8BbxBwcqbjaDWx4aQK+uu6MAol8Bb4YAdNfSpzNAZAjA0pFyeeC/0TT1lrXX6Ty33dWKbpc7nT2rpZum2hf9ALpj2fu2be8//u2s7tuWowNQ+6IQcKq6NbO8Ydmfv//69uPdK2tjecbSq47aF8Uj9NqO2XI2k7Pk/cvzo6NNp2U67Z6p9kUxYJqzu1sHp2cX85/O5y+S04Ot3Vl8KfdFX0CvurgebT/78MX3f5682I7WF6s9AKK/D8Ax2wvH3SC9/+Apcq+ZBt3jhbbpqH1RCARBNziMdpYe3m02V9bWVpZ2Xh8+OewGQaojaQCgOB+RR4hC66lI/etlFEDrderP+XPFgC+SA+rIqABFvz/KCHmgVJoqTSJYstUzDKNBtOZJs6lpBqJRShmjVNZMrAy5AqauAYjBuUGphn7GUHPKEAAoDUaZhu9uA6UbAAeABo2gkyNMhgoYRSHQ4LyBBo2gS9aEUSIBjf3vCVB4CG80GoRkbYQ0ENENLYqiMEFCFNl6E/A8jCAB9HAAog0Yh4OKSiBOkiiUwL/fQQYwRqgAOBfdQEIJxAKI42sAcvtfUABqjlIC8tEByFHyAKIAJgBGZC2DPglEt4BaTQG12h3E4IZBCPqpBFCL1xBJIImQbJRrgGxUK0aZmsziAcg2medRQrxJAaATExQBGEUKRNYo4EUI+uJQPcE444wzzjD3BXWoDg3UkZEAqi4Wo4zQB5C/L3hYDYQyqql7wQCAXOWpTBlWPhiAVQHqfjAUkLsXFCR3X8jdCwoBeZxdAepIU8CgI2RALIEQJ9sggBwlFECSqFGKAeQmEEkg7AvI3xciJJEAoMIR8se9+OV4FACzx+jE+lfgD+unoJasfasbAAAAAElFTkSuQmCC" style="display:none" />
  <img id="alex" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAA6lBMVEUAAACLuoiMvorckzzljT/lmUfonUzr07Py2rry3cJ6r3d6tXd9sno7Ozvs1Ljv2r9oRTB5VT2BtX/YgDJkQSzky6kaPxlvTDVyTjbp0bMYOBZJSUlNTU2AWkDy38iGh2FaWlpcXFxjY2OHiWI/Pz+MjWhPgEyqiV53r3Xv2b3YupTfxqNKSkp4VDxhYWFISEjly61MTExdXV1XV1cjYiSGXkZra2ttSjNSUlJwcHD7+/soKCjq1Ljky6rvu7FQUFCAglrp0K99tHru17ny272Ki2ZGRkbkyajv2bt1UDice1B3sHTu1raPkGtqGsFNAAAAAXRSTlMAQObYZgAAAzZJREFUeF7tluWS4zoQhUcI5jDTMOMy4+X7/q+zp2Wn1ilPlT2ZvzmBliruT92SUz57aykl6S07hfaeKkkAoXSncwJtAVBCKymk6pz8A51sUQEACojtAVKjCy0utgXQBgql9dYAISW1AABpC4BGsqYWCj2hdK00UqkF+qIIVh6Ulg3Ov0hFEBivaTovSdUCissJI4xBkpTS52qEJgBaVguhhBDG9npKKQEKIfI+agHIp6VF790L61686wl/GP5Fdel6gNTCOGv/+8s6++O7NcKnUh/0qW+B+jfWOaR/+mStcUbk2y/znWlyBxpUADlLHCN+H6VCeXtN1IXeQ+t5uOhAWmWF1oAgCM7NeSMA1FG6AgibAy4uFo8CzLlpBDDWKiWrLVQBoIZB1pq9zrpZl/MoCjHnBKBb0f9N6FjbDKsHnEV0OeOsvHoQZMNWC/lZdzCbDUO68CcAlk4xCOh/0m4zhtVDFnH6mTFeBiB1MMuGeWwN/UrRkTFSaUpqQ5wBgNIYp4BC+Gb/6LK1ATjl/OhIabQThJxResS+HBx8Wfy/KEIZAA1evhxQzCBaCYCI628ouwBwzv+EjDFFKAHiOO5mV1dZF4M/IFQQRpz5vABimNCM8qwlhLHGlgCTySRe3t8vYwymDw9TAnCeI6gdrM4w5cgH4KtJPibWujIAun716npSAEKI81PKAQBj0GiSmMSMrD1LblNrRxuAOAfEOWDcH/ePAcA+HPf9mP+LyXECjZxL0iRxrlzBdPomXu7vL+M30+nl58+X6CAYj8f9Pj4BSkAkTj9J0tS5OQHm7sMmYEUVrEoARm0z7IEfc7+NaZqk87lLEecbFRweHq72377dX2Fwc3d34+/V7G8oYznMiyVnAKCFpADstNNOO23lF7R/rD8DoPRzAZJ8wTMAMnwCgHzC61kroziIOD2dlCyeclw2WR2ErNUarv0CErUCIPcFDQHDbDZY+4XcF0SFL2jUPwDoYA2o+IIaVfxCxRfUqOIXKr6gRhW/4H0BCInxvqBOVb+AxLMRAW4bAap+ofAFeagHVP0CPY6dG/nQAFD1CykB4AtAcPN5LaDqF1IDS5Jbm0cBvwBC9HbyqcFqywAAAABJRU5ErkJggg==" style="display:none" />
	<img id="drawed">

              
            
!

CSS

              
                
		body {
			background-color: white;
		}

		#background {
			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQIHWPYXc9QvxsAB2ICdaBJUyUAAAAASUVORK5CYII=);
			background-size: 12px 12px;
			image-rendering: pixelated;
			-ms-interpolation-mode: nearest-neighbor;
			display: inline-block;
		}

#myCanvas {
  cursor: all-scroll;
}
              
            
!

JS

              
                var main_object;
var models;
var objcamera;
var loader;
var controls;
var texture_changed = false
var tex_canvas

$(function () {

	const width = 400 * 1;
	const height = 636 * 1;
	const zoom = 0.94

	// initialize renderer -------------------------------------------------------------------------
	const renderer = new THREE.WebGLRenderer({
		canvas: document.querySelector('#myCanvas'),
		antialias: false,
		alpha: true,
		preserveDrawingBuffer: true
	});
	renderer.setClearColor(0xFF00FF, 0);
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(width, height);
  
	Object.keys(animations).forEach( key => {
		$("#pose_select").append(
			$("<option/>", {value: key, text: key})
		)
	})

	$("#pose_select option[value='default_pose']").prop("selected", true)

	$("#pose_select").change( function(){
		set_pose( $("#pose_select option:selected").val() )
	})

	$("#execute").on("click", function () {
		let img = document.querySelector("#drawed");
		img.src = renderer.domElement.toDataURL('image/png');
	});
  
	$("#reset").on("click", function(){
		controls.reset()
    main_object.rotation.y = 0
	});
  
  $("#rotate").on("click", function(){
    main_object.rotation.y = (main_object.rotation.y + 0.7853981633974483) % 6.283185307179586
  })

	// Input Skin image
	$("#file").change( function(e) {
		let files = e.currentTarget.files

		let onload = function(){
			//change texture
			let canvas = document.querySelector("#canvas");
			let context = canvas.getContext("2d")
			
			context.clearRect(0, 0, 64, 64);
			context.drawImage(this, 0, 0);
			if(this.height < 64){
				convert64(context, this)
			}

			loader.materials[0].map.image = canvas
			loader.materials[0].map.needsUpdate = true;
      
      texture_changed = true
		}
		
		if(files.length && files[0].type.match('image.*')){
			let fileRdr = new FileReader();
			fileRdr.self = this;
			fileRdr.onload = function(){
				let img = new Image()
				img.onload = onload;
				img.src = this.result
			}
			fileRdr.readAsDataURL(files[0])
		}
	})

	// Change model Steve or Alex
	$("#isAlex").change(function(){
    
    if(!texture_changed){
        let tex = document.querySelector($(this).prop("checked") ? "#alex": "#steve")
        tex_canvas.context.drawImage(tex, 0, 0)
        loader.materials[0].map.needsUpdate = true
    }

		// Pixel to UVworld mapping
		let setUVS = function (mesh, uvs, overlay){
			for(let i=0; i<mesh.geometry.faceVertexUvs[0].length; i++){
				let face = mesh.geometry.faceVertexUvs[0][i]
				for(let j=0; j<3; j++){
					face[j].x = (uvs[i][j].x + (overlay==2 ? 16: 0)) / 64
					face[j].y = (uvs[i][j].y - (overlay==1 ? 16: 0)) / 64
					face[j].z = (uvs[i][j].z + (overlay==2 ? 16: 0)) / 64
				}
			}
			mesh.geometry.uvsNeedUpdate = true
		}

		let checked = $("#isAlex").prop("checked")
		if(checked){
			// change arm models
			models.leftArm.children[0].children[0].geometry.vertices.forEach( vertex => {
				vertex.x = Math.sign(vertex.x) * 1.5
				vertex.y = Math.sign(vertex.y) * 6
				vertex.z = Math.sign(vertex.z) * 2
			})
			models.leftArm.children[0].children[0].geometry.verticesNeedUpdate = true

			models.leftArm.children[1].children[0].geometry.vertices.forEach( vertex => {
				vertex.x = Math.sign(vertex.x) * 2
				vertex.y = Math.sign(vertex.y) * 6.5
				vertex.z = Math.sign(vertex.z) * 2.5
			})
			models.leftArm.children[1].children[0].geometry.verticesNeedUpdate = true
			
			models.rightArm.children[0].children[0].geometry.vertices.forEach( vertex => {
				vertex.x = Math.sign(vertex.x) * 1.5
				vertex.y = Math.sign(vertex.y) * 6
				vertex.z = Math.sign(vertex.z) * 2
			})
			models.rightArm.children[0].children[0].geometry.verticesNeedUpdate = true

			models.rightArm.children[1].children[0].geometry.vertices.forEach( vertex => {
				vertex.x = Math.sign(vertex.x) * 2
				vertex.y = Math.sign(vertex.y) * 6.5
				vertex.z = Math.sign(vertex.z) * 2.5
			})
			models.rightArm.children[1].children[0].geometry.verticesNeedUpdate = true

			// adjust arm positions
			models.leftArm.children[0].children[0].position.set(-5.5, 18.5, 0)
			models.rightArm.children[0].children[0].position.set(5.5, 18.5, 0)

			models.leftArm.children[1].children[0].position.set(-5.5, 18.5, 0)
			models.rightArm.children[1].children[0].position.set(5.5, 18.5, 0)

			models.leftArm.children[0].position.y = -22.5
			models.rightArm.children[0].position.y = -22.5

			models.leftArm.children[1].position.y = -22.5
			models.rightArm.children[1].position.y = -22.5

			models.leftArm.position.y = 21.5
			models.rightArm.position.y = 21.5

			// Alex UV offsets
			let uvs = [
				[
					[{x: 47, y: 32}, {x: 51, y: 32}, {x: 47, y: 44}],
					[{x: 51, y: 44}, {x: 47, y: 44}, {x: 51, y: 32}],
					[{x: 44, y: 44}, {x: 40, y: 32}, {x: 44, y: 32}],
					[{x: 40, y: 32}, {x: 44, y: 44}, {x: 40, y: 44}],
					[{x: 44, y: 44}, {x: 47, y: 48}, {x: 44, y: 48}],
					[{x: 47, y: 48}, {x: 44, y: 44}, {x: 47, y: 44}],
					[{x: 47, y: 48}, {x: 50, y: 48}, {x: 47, y: 44}],
					[{x: 50, y: 44}, {x: 47, y: 44}, {x: 50, y: 48}],
					[{x: 44, y: 32}, {x: 47, y: 32}, {x: 44, y: 44}],
					[{x: 47, y: 44}, {x: 44, y: 44}, {x: 47, y: 32}],
					[{x: 54, y: 44}, {x: 51, y: 32}, {x: 54, y: 32}],
					[{x: 51, y: 32}, {x: 54, y: 44}, {x: 51, y: 44}],
				],
				[
					[{x: 39, y: 0}, {x: 43, y: 0}, {x: 39, y: 12}],
					[{x: 43, y: 12}, {x: 39, y: 12}, {x: 43, y: 0}],
					[{x: 36, y: 12}, {x: 32, y: 0}, {x: 36, y: 0}],
					[{x: 32, y: 0}, {x: 36, y: 12}, {x: 32, y: 12}],
					[{x: 36, y: 12}, {x: 39, y: 16}, {x: 36, y: 16}],
					[{x: 39, y: 16}, {x: 36, y: 12}, {x: 39, y: 12}],
					[{x: 39, y: 16}, {x: 42, y: 16}, {x: 39, y: 12}],
					[{x: 42, y: 12}, {x: 39, y: 12}, {x: 42, y: 16}],
					[{x: 36, y: 0}, {x: 39, y: 0}, {x: 36, y: 12}],
					[{x: 39, y: 12}, {x: 36, y: 12}, {x: 39, y: 0}],
					[{x: 46, y: 12}, {x: 43, y: 0}, {x: 46, y: 0}],
					[{x: 43, y: 0}, {x: 46, y: 12}, {x: 43, y: 12}],
				],
			]

			setUVS( models.leftArm.children[0].children[0], uvs[0] )
			setUVS( models.leftArm.children[1].children[0], uvs[0], 1)

			setUVS( models.rightArm.children[0].children[0], uvs[1] )
			setUVS( models.rightArm.children[1].children[0], uvs[1], 2)

		} else {
			// change arm models
			models.leftArm.children[0].children[0].geometry.vertices.forEach( vertex => {
				vertex.x = Math.sign(vertex.x) * 2
				vertex.y = Math.sign(vertex.y) * 6
				vertex.z = Math.sign(vertex.z) * 2
			})
			models.leftArm.children[0].children[0].geometry.verticesNeedUpdate = true

			models.leftArm.children[1].children[0].geometry.vertices.forEach( vertex => {
				vertex.x = Math.sign(vertex.x) * 2.5
				vertex.y = Math.sign(vertex.y) * 6.5
				vertex.z = Math.sign(vertex.z) * 2.5
			})
			models.leftArm.children[1].children[0].geometry.verticesNeedUpdate = true
			
			models.rightArm.children[0].children[0].geometry.vertices.forEach( vertex => {
				vertex.x = Math.sign(vertex.x) * 2
				vertex.y = Math.sign(vertex.y) * 6
				vertex.z = Math.sign(vertex.z) * 2
			})
			models.rightArm.children[0].children[0].geometry.verticesNeedUpdate = true

			models.rightArm.children[1].children[0].geometry.vertices.forEach( vertex => {
				vertex.x = Math.sign(vertex.x) * 2.5
				vertex.y = Math.sign(vertex.y) * 6.5
				vertex.z = Math.sign(vertex.z) * 2.5
			})
			models.rightArm.children[1].children[0].geometry.verticesNeedUpdate = true

			// adjust arm positions
			models.leftArm.children[0].children[0].position.set(-6, 18, 0)
			models.rightArm.children[0].children[0].position.set(6, 18, 0)

			models.leftArm.children[1].children[0].position.set(-6, 18, 0)
			models.rightArm.children[1].children[0].position.set(6, 18, 0)

			models.leftArm.children[0].position.y = -22
			models.rightArm.children[0].position.y = -22

			models.leftArm.children[1].position.y = -22
			models.rightArm.children[1].position.y = -22

			models.leftArm.position.y = 22
			models.rightArm.position.y = 22

			// Steve UV offsets
			let uvs = [
				[
					[{x: 48, y: 32},{x: 52, y: 32},{x: 48, y: 44},],
					[{x: 52, y: 44},{x: 48, y: 44},{x: 52, y: 32},],
					[{x: 44, y: 44},{x: 40, y: 32},{x: 44, y: 32},],
					[{x: 40, y: 32},{x: 44, y: 44},{x: 40, y: 44},],
					[{x: 44, y: 44},{x: 48, y: 48},{x: 44, y: 48},],
					[{x: 48, y: 48},{x: 44, y: 44},{x: 48, y: 44},],
					[{x: 48, y: 48},{x: 52, y: 48},{x: 48, y: 44},],
					[{x: 52, y: 44},{x: 48, y: 44},{x: 52, y: 48},],
					[{x: 44, y: 32},{x: 48, y: 32},{x: 44, y: 44},],
					[{x: 48, y: 44},{x: 44, y: 44},{x: 48, y: 32},],
					[{x: 56, y: 44},{x: 52, y: 32},{x: 56, y: 32},],
					[{x: 52, y: 32},{x: 56, y: 44},{x: 52, y: 44},],
				],
				[
					[{x: 40, y: 0},{x: 44, y: 0},{x: 40, y: 12},],
					[{x: 44, y: 12},{x: 40, y: 12},{x: 44, y: 0},],
					[{x: 36, y: 12},{x: 32, y: 0},{x: 36, y: 0},],
					[{x: 32, y: 0},{x: 36, y: 12},{x: 32, y: 12},],
					[{x: 36, y: 12},{x: 40, y: 16},{x: 36, y: 16},],
					[{x: 40, y: 16},{x: 36, y: 12},{x: 40, y: 12},],
					[{x: 40, y: 16},{x: 44, y: 16},{x: 40, y: 12},],
					[{x: 44, y: 12},{x: 40, y: 12},{x: 44, y: 16},],
					[{x: 36, y: 0},{x: 40, y: 0},{x: 36, y: 12},],
					[{x: 40, y: 12},{x: 36, y: 12},{x: 40, y: 0},],
					[{x: 48, y: 12},{x: 44, y: 0},{x: 48, y: 0},],
					[{x: 44, y: 0},{x: 48, y: 12},{x: 44, y: 12},],
				]
			]

			setUVS( models.leftArm.children[0].children[0], uvs[0] )
			setUVS( models.leftArm.children[1].children[0], uvs[0], 1)

			setUVS( models.rightArm.children[0].children[0], uvs[1] )
			setUVS( models.rightArm.children[1].children[0], uvs[1], 2)
		}
	});
  
  
  // convert 64x32 to 64x64
  let convert64 = function(context, img){
    let m = val => Math.floor(val * (img.width / 64))
    
    context.translate(img.width, 0);
    context.scale(-1, 1);
    context.drawImage(img, m(4), m(16), m(4), m(4), m(40), m(48), m(4), m(4))
    context.drawImage(img, m(8), m(16), m(4), m(4), m(36), m(48), m(4), m(4))
    context.drawImage(img, m(0), m(20), m(4),  m(12), m(44), m(52), m(4), m(12))
    context.drawImage(img, m(4), m(20), m(4),  m(12), m(40), m(52), m(4), m(12))
    context.drawImage(img, m(8), m(20), m(4),  m(12), m(36), m(52), m(4), m(12))
    context.drawImage(img, m(12), m(20), m(4), m(12), m(32), m(52), m(4), m(12))

    context.drawImage(img, m(44), m(16), m(4), m(4), m(24), m(48), m(4), m(4))
    context.drawImage(img, m(48), m(16), m(4), m(4), m(20), m(48), m(4), m(4))
    context.drawImage(img, m(40), m(20), m(4), m(12), m(28), m(52), m(4), m(12))
    context.drawImage(img, m(44), m(20), m(4), m(12), m(24), m(52), m(4), m(12))
    context.drawImage(img, m(48), m(20), m(4), m(12), m(20), m(52), m(4), m(12))
    context.drawImage(img, m(52), m(20), m(4), m(12), m(16), m(52), m(4), m(12))

    context.restore(0, 0);
    context.resetTransform();
  }

	// initilaize scene
	const scene = new THREE.Scene();

	let pos_x = 0, pos_y = -144, pos_z = 0;
	

	let img = document.querySelector("#steve")
  
  let temp = img.src
  img.src = ""
  img.src = temp
  img.onload = function(){
    
	  let canvas = createCanvas(64, 64);
    canvas.context.drawImage(img, 0, 0)
    canvas.canvas.setAttribute("id", "canvas")
    $(canvas.canvas).appendTo("#thumb")
    tex_canvas = canvas


    if(img.height < 64){
      convert64(canvas.context, img)
    }

    loader = new BBModelLoader({
      filename: json_url,
      texture_name: ["#canvas"],
      side: THREE.DoubleSide,
    }).loadEntity(function(object, parts){
      main_object = object;
      models = parts;
      object.scale.set(8.5, 8.5, 8.5);
      object.position.set(pos_x, pos_y, pos_z);

      scene.add(object);
      Render(scene);
    });
  }
	
	function Render(scene) {

		// initilalize camera
		var viewSize = 268.2;

		var aspectRatio = width / height;
		const camera = new THREE.OrthographicCamera(
			-aspectRatio * viewSize / 2,
			aspectRatio * viewSize / 2,
			viewSize / 2,
			-viewSize / 2,
			-1000,
			1000
		);

		camera.position.set(viewSize, viewSize * 0.8168, viewSize); // Isometric position
		camera.lookAt(scene.position);
		camera.zoom = zoom;
		camera.updateProjectionMatrix();
		controls = new THREE.OrbitControls(camera, renderer.domElement);
		controls.enableKeys = false;

		objcamera = camera;

		// Lighting -------------------------------------------------------------------------------------

		const dirLight = new THREE.DirectionalLight(0xFFFFFF);
		//dirLight.intensity = 0.435;
		dirLight.intensity = 0.45;
		dirLight.position.set(-1.25, 4.25, 1.24).normalize();
		dirLight.castShadow = true;
		dirLight.shadow.mapSize.width = 2048;
		dirLight.shadow.mapSize.height = 2048;
		var d = 50;
		dirLight.shadow.camera.left = -d;
		dirLight.shadow.camera.right = d;
		dirLight.shadow.camera.top = d;
		dirLight.shadow.camera.bottom = -d;
		dirLight.shadow.camera.far = 3500;
		dirLight.shadow.bias = -0.0001;
		scene.add(dirLight);
		var ambientLight = new THREE.AmbientLight(0xFCFCFF);
		ambientLight.intensity = 0.618;
		scene.add(ambientLight);

		// Run tick -------------------------------------------------------------------------------------
		
		tick();

		function tick() {

			// Rendering
			renderer.render(scene, camera);
			requestAnimationFrame(tick);
		}
	}
});


function set_pose(pose_name){

	let setrotation = (parts, values) => {
		parts.rotation.set(0, 0, 0)
		let axis = new THREE.Vector3(1, 0, 0);
		parts.rotateOnWorldAxis(axis, deg2rad(values[0]));
		axis.set(0, 1, 0);
		parts.rotateOnWorldAxis(axis, deg2rad(values[1]));
		axis.set(0, 0, 1);
		parts.rotateOnWorldAxis(axis, deg2rad(values[2]));
	}

	if(animations.hasOwnProperty(pose_name)){

		pose = animations[pose_name]

		setrotation(models.head, pose.bones.head.rotation)
		setrotation(models.body, pose.bones.body.rotation)
		setrotation(models.rightArm, pose.bones.leftarm.rotation)
		setrotation(models.leftArm, pose.bones.rightarm.rotation)
		setrotation(models.rightLeg, pose.bones.leftleg.rotation)
		setrotation(models.leftLeg, pose.bones.rightleg.rotation)
	}
	
}

let animations = 
{
	"default_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"head" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 0, 0, 5 ]
			},
			"leftleg" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightarm" : {
				"rotation" : [ 0, 0, -5 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 0, 0, 0 ]
			}
		}
	},
	"default_armor_stand_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"head" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ -10, 0, 10 ]
			},
			"leftleg" : {
				"rotation" : [ -1, 0, 1 ]
			},
			"rightarm" : {
				"rotation" : [ -15, 0, -10 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 1, 0, -1 ]
			}
		}
	},
	"no_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"head" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"leftleg" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightarm" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 0, 0, 0 ]
			}
		}
	},
	"solemn_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, -2 ]
			},
			"head" : {
				"rotation" : [ 15, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ -30, -15, -15 ]
			},
			"leftleg" : {
				"rotation" : [ -1, 0, 1 ]
			},
			"rightarm" : {
				"rotation" : [ -60, 20, 10 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 1, 0, -1 ]
			}
		}
	},
	"athena_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, -2 ]
			},
			"head" : {
				"rotation" : [ -5, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 10, 0, 5 ]
			},
			"leftleg" : {
				"rotation" : [ -3, 3, 3 ]
			},
			"rightarm" : {
				"rotation" : [ -60, -20, 10 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 3, -3, -3 ]
			}
		}
	},
	"brandish_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 2 ]
			},
			"head" : {
				"rotation" : [ -15, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 20, 0, 10 ]
			},
			"leftleg" : {
				"rotation" : [ 5, 3, 3 ]
			},
			"rightarm" : {
				"rotation" : [ -110, -50, 0 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ -5, -3, -3 ]
			}
		}
	},
	"honor_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"head" : {
				"rotation" : [ -15, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ -110, -35, 0 ]
			},
			"leftleg" : {
				"rotation" : [ 5, 3, 3 ]
			},
			"rightarm" : {
				"rotation" : [ -110, 35, 0 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ -5, -3, -3 ]
			}
		}
	},
	"entertain_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"head" : {
				"rotation" : [ -15, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ -110, 35, 0 ]
			},
			"leftleg" : {
				"rotation" : [ 5, 3, 3 ]
			},
			"rightarm" : {
				"rotation" : [ -110, -35, 0 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ -5, -3, -3 ]
			}
		}
	},
	"salute_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"head" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 10, 0, 5 ]
			},
			"leftleg" : {
				"rotation" : [ -1, 0, 1 ]
			},
			"rightarm" : {
				"rotation" : [ -70, 40, 0 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 1, 0, -1 ]
			}
		}
	},
	"hero_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, -8, 0 ]
			},
			"head" : {
				"rotation" : [ -4, -67, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 16, -32, 8 ]
			},
			"leftleg" : {
				"rotation" : [ 0, 75, 8 ]
			},
			"rightarm" : {
				"rotation" : [ -99, -63, 0 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 4, -63, -8 ]
			}
		}
	},
	"riposte_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"head" : {
				"rotation" : [ 16, -20, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 4, -8, -237 ]
			},
			"leftleg" : {
				"rotation" : [ -14, 18, 16 ]
			},
			"rightarm" : {
				"rotation" : [ 246, 0, -89 ]
			},
			"rightitem" : {
				"rotation" : [ 0, -180, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 8, -20, -4 ]
			}
		}
	},
	/*
	"wiggle" : {
		"loop" : true,
		"bones" : {
			"baseplate" : {
				"rotation" : [ 0.0, "math.sin((variable.armor_stand.hurt_time query.frame_alpha) * 120) * 3", 0.0 ]
			}
		}
	},*/
	"zombie_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"head" : {
				"rotation" : [ -10, 0, 5 ]
			},
			"leftarm" : {
				"rotation" : [ -105, 0, 0 ]
			},
			"leftleg" : {
				"rotation" : [ 7, 0, 0 ]
			},
			"rightarm" : {
				"rotation" : [ -100, 0, 0 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ -46, 0, 0 ]
			}
		}
	},
	"cancan_a_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, -22, 0 ]
			},
			"head" : {
				"rotation" : [ -5, -18, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 8, 0, 114 ]
			},
			"leftleg" : {
				"rotation" : [ -111, -55, 0 ]
			},
			"rightarm" : {
				"rotation" : [ 0, -84, -111 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ 0, -23, 13 ]
			}
		}
	},
	"cancan_b_pose" : {
		"loop" : true,
		"bones" : {
			"body" : {
				"rotation" : [ 0, 18, 0 ]
			},
			"head" : {
				"rotation" : [ -10, 20, 0 ]
			},
			"leftarm" : {
				"rotation" : [ 0, 0, 112 ]
			},
			"leftleg" : {
				"rotation" : [ 0, 0, -13 ]
			},
			"rightarm" : {
				"rotation" : [ 8, -90, -111 ]
			},
			"rightitem" : {
				"rotation" : [ 0, 0, 0 ]
			},
			"rightleg" : {
				"rotation" : [ -119, 42, 0 ]
			}
		}
	},
}

var json_url = "data:application/json;base64,eyJtZXRhIjp7ImZvcm1hdF92ZXJzaW9uIjoiMy4wIiwibW9kZWxfZm9ybWF0IjoiYmVkcm9jayIsImJveF91diI6dHJ1ZX0sIm5hbWUiOiJzdGV2ZSIsImdlb19uYW1lIjoiZ2VvbWV0cnkuaHVtYW5vaWQiLCJyZXNvbHV0aW9uIjp7IndpZHRoIjo2NCwiaGVpZ2h0Ijo2NH0sImVsZW1lbnRzIjpbeyJuYW1lIjoiaGVhZCIsImZyb20iOlstNCwyNCwtNF0sInRvIjpbNCwzMiw0XSwiYXV0b3V2IjowLCJjb2xvciI6Niwib3JpZ2luIjpbMCwwLDBdLCJ1dWlkIjoiOTM1NWJjYjctM2Q0Yi0zYzVhLTI4ZTgtYzNiN2U1ZDkwN2Y4In0seyJuYW1lIjoiYm9keSIsImZyb20iOlstNCwxMiwtMl0sInRvIjpbNCwyNCwyXSwiYXV0b3V2IjowLCJjb2xvciI6NSwib3JpZ2luIjpbMCwwLDBdLCJ1dl9vZmZzZXQiOlsxNiwxNl0sInV1aWQiOiJmODcxMzc1MC0xZmQwLTY4YjctYTE2NC03OGEzZGUxMjJhZWUifSx7Im5hbWUiOiJsZWZ0QXJtIiwiZnJvbSI6WzQsMTIsLTJdLCJ0byI6WzgsMjQsMl0sImF1dG91diI6MCwiY29sb3IiOjMsIm9yaWdpbiI6WzAsMCwwXSwidXZfb2Zmc2V0IjpbNDAsMTZdLCJ1dWlkIjoiNDZmMjFkNmQtZmUyOC00NGI2LWViOTMtZjE5MTI3MzdjYTMwIn0seyJuYW1lIjoicmlnaHRBcm0iLCJmcm9tIjpbLTgsMTIsLTJdLCJ0byI6Wy00LDI0LDJdLCJhdXRvdXYiOjAsImNvbG9yIjo1LCJvcmlnaW4iOlswLDAsMF0sInV2X29mZnNldCI6WzMyLDQ4XSwidXVpZCI6IjdlODZlY2Q1LWE2N2ItMDFmNy00ZTAzLTlmOTAzOGEwMDkxOCJ9LHsibmFtZSI6ImxlZnRMZWciLCJmcm9tIjpbLTAuMSwwLC0yXSwidG8iOlszLjksMTIsMl0sImF1dG91diI6MCwiY29sb3IiOjQsIm9yaWdpbiI6WzAsMCwwXSwidXZfb2Zmc2V0IjpbMCwxNl0sInV1aWQiOiJlOGY3NGIwOC01MTBiLTIyZjEtY2VjMS1kYzZmYzc2NDE5MGYifSx7Im5hbWUiOiJyaWdodExlZyIsImZyb20iOlstMy45LDAsLTJdLCJ0byI6WzAuMSwxMiwyXSwiYXV0b3V2IjowLCJjb2xvciI6MSwib3JpZ2luIjpbMCwwLDBdLCJ1dl9vZmZzZXQiOlsxNiw0OF0sInV1aWQiOiI2YmU3YTU2YS00ZmIwLTY3YzgtMTNjNS00ZDJkNGZiZTUwNzAifSx7Im5hbWUiOiJoZWFkIiwiZnJvbSI6Wy00LDI0LC00XSwidG8iOls0LDMyLDRdLCJhdXRvdXYiOjAsImNvbG9yIjo2LCJpbmZsYXRlIjowLjUsIm9yaWdpbiI6WzAsMCwwXSwidXZfb2Zmc2V0IjpbMzIsMF0sInV1aWQiOiJmMWE2ZTI2NC0wZmM3LTc4MmYtZTAwMS1kZTRmZWJkMTdkMjUifSx7Im5hbWUiOiJib2R5IiwiZnJvbSI6Wy00LDEyLC0yXSwidG8iOls0LDI0LDJdLCJhdXRvdXYiOjAsImNvbG9yIjo1LCJpbmZsYXRlIjowLjUsIm9yaWdpbiI6WzAsMCwwXSwidXZfb2Zmc2V0IjpbMTYsMzJdLCJ1dWlkIjoiNGQwOTE3YmEtNDIxMi1hNjRiLWQ0ZTMtMTM5MmM2OGYzMmIzIn0seyJuYW1lIjoibGVmdEFybSIsImZyb20iOls0LDEyLC0yXSwidG8iOls4LDI0LDJdLCJhdXRvdXYiOjAsImNvbG9yIjozLCJpbmZsYXRlIjowLjUsIm9yaWdpbiI6WzAsMCwwXSwidXZfb2Zmc2V0IjpbNDAsMzJdLCJ1dWlkIjoiYzg2MmI0YmMtYzMxNi04NmU0LWIyM2QtMzZjOTk1NjNkMjQ4In0seyJuYW1lIjoicmlnaHRBcm0iLCJmcm9tIjpbLTgsMTIsLTJdLCJ0byI6Wy00LDI0LDJdLCJhdXRvdXYiOjAsImNvbG9yIjo1LCJpbmZsYXRlIjowLjUsIm9yaWdpbiI6WzAsMCwwXSwidXZfb2Zmc2V0IjpbNDgsNDhdLCJ1dWlkIjoiNGE2ZTliODUtZDY2Ny1lMGE4LWMwNDctYWZmYjcxZWM0M2JmIn0seyJuYW1lIjoibGVmdExlZyIsImZyb20iOlstMC4xLDAsLTJdLCJ0byI6WzMuOSwxMiwyXSwiYXV0b3V2IjowLCJjb2xvciI6NCwiaW5mbGF0ZSI6MC41LCJvcmlnaW4iOlswLDAsMF0sInV2X29mZnNldCI6WzAsMzJdLCJ1dWlkIjoiYTA1NWEyMjYtZTQ0Zi01MDRiLTg3MDktNTliYTkzZGViMzMxIn0seyJuYW1lIjoicmlnaHRMZWciLCJmcm9tIjpbLTMuOSwwLC0yXSwidG8iOlswLjEsMTIsMl0sImF1dG91diI6MCwiY29sb3IiOjEsImluZmxhdGUiOjAuNSwib3JpZ2luIjpbMCwwLDBdLCJ1dl9vZmZzZXQiOlswLDQ4XSwidXVpZCI6IjVlZTQ4NjQxLTY4OTAtODZhYi1lNDkxLTQ3YzkyMWYzMTdlYiJ9XSwib3V0bGluZXIiOlt7Im5hbWUiOiJoZWFkIiwic2hhZGUiOmZhbHNlLCJ1dWlkIjoiNzA5NzFkZmEtY2Q5My01NjNiLWQ2MjUtOGQ5YzJiNzQyZjc1IiwiZXhwb3J0Ijp0cnVlLCJpc09wZW4iOnRydWUsInZpc2liaWxpdHkiOnRydWUsImF1dG91diI6MCwib3JpZ2luIjpbMCwyNCwwXSwiY2hpbGRyZW4iOlsiOTM1NWJjYjctM2Q0Yi0zYzVhLTI4ZTgtYzNiN2U1ZDkwN2Y4IiwiZjFhNmUyNjQtMGZjNy03ODJmLWUwMDEtZGU0ZmViZDE3ZDI1Il19LHsibmFtZSI6ImJvZHkiLCJzaGFkZSI6ZmFsc2UsInV1aWQiOiI4ZGVhYTFkMC1kZTFhLTZkMWUtOWI3YS0xMjBkYTEyZjkyMTEiLCJleHBvcnQiOnRydWUsImlzT3BlbiI6dHJ1ZSwidmlzaWJpbGl0eSI6dHJ1ZSwiYXV0b3V2IjowLCJvcmlnaW4iOlswLDI0LDBdLCJjaGlsZHJlbiI6WyJmODcxMzc1MC0xZmQwLTY4YjctYTE2NC03OGEzZGUxMjJhZWUiLCI0ZDA5MTdiYS00MjEyLWE2NGItZDRlMy0xMzkyYzY4ZjMyYjMiXX0seyJuYW1lIjoibGVmdEFybSIsInNoYWRlIjpmYWxzZSwidXVpZCI6IjdjM2U5N2I1LTk3MjItYjhlMC05MDg5LTZhYjY4YjEwZjFjOCIsImV4cG9ydCI6dHJ1ZSwiaXNPcGVuIjp0cnVlLCJ2aXNpYmlsaXR5Ijp0cnVlLCJhdXRvdXYiOjAsIm9yaWdpbiI6WzUsMjIsMF0sInJvdGF0aW9uIjpbMCwwLC01XSwiY2hpbGRyZW4iOlsiNDZmMjFkNmQtZmUyOC00NGI2LWViOTMtZjE5MTI3MzdjYTMwIiwiYzg2MmI0YmMtYzMxNi04NmU0LWIyM2QtMzZjOTk1NjNkMjQ4Il19LHsibmFtZSI6InJpZ2h0QXJtIiwic2hhZGUiOmZhbHNlLCJ1dWlkIjoiMjNjZmNlOTctZjhmZS1hMTQwLWZlOGItZTk1YWYwNTg2NmE5IiwiZXhwb3J0Ijp0cnVlLCJpc09wZW4iOnRydWUsInZpc2liaWxpdHkiOnRydWUsImF1dG91diI6MCwib3JpZ2luIjpbLTUsMjIsMF0sInJvdGF0aW9uIjpbMCwwLDVdLCJjaGlsZHJlbiI6WyI3ZTg2ZWNkNS1hNjdiLTAxZjctNGUwMy05ZjkwMzhhMDA5MTgiLCI0YTZlOWI4NS1kNjY3LWUwYTgtYzA0Ny1hZmZiNzFlYzQzYmYiXX0seyJuYW1lIjoibGVmdExlZyIsInNoYWRlIjpmYWxzZSwidXVpZCI6ImIzZGY2ZTY5LWRlMDAtNzRmNy05YTdhLTg1ZTdkNjViMWRjMyIsImV4cG9ydCI6dHJ1ZSwiaXNPcGVuIjp0cnVlLCJ2aXNpYmlsaXR5Ijp0cnVlLCJhdXRvdXYiOjAsIm9yaWdpbiI6WzEuOSwxMiwwXSwiY2hpbGRyZW4iOlsiZThmNzRiMDgtNTEwYi0yMmYxLWNlYzEtZGM2ZmM3NjQxOTBmIiwiYTA1NWEyMjYtZTQ0Zi01MDRiLTg3MDktNTliYTkzZGViMzMxIl19LHsibmFtZSI6InJpZ2h0TGVnIiwic2hhZGUiOmZhbHNlLCJ1dWlkIjoiMDA0MDAyMTQtYzQyNi1lYmRmLTc5NGYtODk3YWUwYjE5OTNmIiwiZXhwb3J0Ijp0cnVlLCJpc09wZW4iOnRydWUsInZpc2liaWxpdHkiOnRydWUsImF1dG91diI6MCwib3JpZ2luIjpbLTEuOSwxMiwwXSwiY2hpbGRyZW4iOlsiNmJlN2E1NmEtNGZiMC02N2M4LTEzYzUtNGQyZDRmYmU1MDcwIiwiNWVlNDg2NDEtNjg5MC04NmFiLWU0OTEtNDdjOTIxZjMxN2ViIl19XSwidGV4dHVyZXMiOlt7InBhdGgiOiJzdGV2ZS5wbmciLCJuYW1lIjoic3RldmUucG5nIiwiZm9sZGVyIjoiZW50aXR5IiwibmFtZXNwYWNlIjoibWluZWNyYWZ0IiwiaWQiOiIwIiwicGFydGljbGUiOmZhbHNlLCJtb2RlIjoibGluayIsInNhdmVkIjp0cnVlLCJ1dWlkIjoiYThiNmJmYmItMTNmNy02N2QwLTY3NjktYTgzYThkNzNlMjFjIn1dfQ=="
              
            
!
999px

Console