JSFiddle - React, Tailwind, and code Playground

A Gold Star for ZathChan on OkCupid

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.<br />Have a nice day. :)</div>

CSS

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

JavaScript

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

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

var zathChan = new n.VText({
  pos: [0, 100, 0],
  string: 'For ZathChan',
});

var star = new n.Ob3D({
  color: '#fc0',
  scale: [100, 100, 100],
  shape: {"points":[[0,-1,0],[-0.293893,-0.404509,0],[-0.951057,-0.309017,0],[-0.475528,0.154509,0],[-0.587785,0.809017,0],[0,0.5,0],[0.587785,0.809017,0],[0.475528,0.154509,0],[0.951056,-0.309017,0],[0.293892,-0.404509,0],[0,-0.7,0.3],[-0.205725,-0.283156,0.3],[-0.66574,-0.216312,0.3],[-0.33287,0.108156,0.3],[-0.41145,0.566312,0.3],[0,0.35,0.3],[0.41145,0.566312,0.3],[0.33287,0.108156,0.3],[0.66574,-0.216312,0.3],[0.205725,-0.283156,0.3],[0,-0.7,-0.3],[-0.205725,-0.283156,-0.3],[-0.66574,-0.216312,-0.3],[-0.33287,0.108156,-0.3],[-0.41145,0.566312,-0.3],[0,0.35,-0.3],[0.41145,0.566312,-0.3],[0.33287,0.108156,-0.3],[0.66574,-0.216312,-0.3],[0.205725,-0.283156,-0.3]],"lines":[[0,10],[0,20],[0,9],[0,1],[1,2],[1,21],[1,11],[2,22],[2,3],[2,12],[3,4],[3,23],[3,13],[4,5],[4,24],[4,14],[5,15],[5,6],[5,25],[6,26],[6,16],[6,7],[7,27],[7,8],[7,17],[8,9],[8,18],[8,28],[9,19],[9,29],[10,19],[10,11],[11,12],[12,13],[13,14],[14,15],[15,16],[16,17],[17,18],[18,19],[20,21],[20,29],[21,22],[22,23],[23,24],[24,25],[25,26],[26,27],[27,28],[28,29]]}
});

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(zathChan);
anchor.add(star);
s.add(animationController);