JSFiddle - React, Tailwind, and code Playground

Shape template for VoxelFox

by Admiral Potato

HTML

<script src="https://raw.github.com/AdmiralPotato/npos3d/master/src/core.js"></script>
<script src="https://raw.github.com/AdmiralPotato/npos3d/master/src/font.js"></script>
<div id="instructions">Click to rotate manually.<br />Click again to auto-rotate.</div>

CSS

#instructions{
  position: absolute;
  z-index: 10;
  padding: 8px;
  color: #fff;
  font-family: sans-serif;
}

JavaScript

var shapeName = 'Name your shape!';
var customShape = {
  points: [[0,30,30],[0,-30,0],[0,30,-30]],
  lines: [[0,1],[1,2],[2,0]]
}; // Replace the {} with your clipboard!

var scale = 1;


var n = NPos3d;
var s = new n.Scene();

var anchor = new n.Ob3D({
  shape: {}
});

var label = new n.VText({
  pos: [0, 100, 0],
  string: shapeName,
});

var object = new n.Ob3D({
  color: '#fc0',
  scale: [scale, scale, scale],
  shape: customShape
});

var manual = false;
var manualFlip = function(){
	manual = !manual;
};
s.canvas.addEventListener('mousedown', manualFlip, false);
var animationController = {
  update: function() {
		if(manual){
			anchor.rot[0] = -s.mpos.y / 100;
			anchor.rot[1] = s.mpos.x / 100;
		} else {
			anchor.rot[1] -= deg;
		}
  }
};


s.add(anchor);
anchor.add(label);
anchor.add(object);
s.add(animationController);