JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<script src="http://admiralpotato.github.io/js/npos3d/build/npos3d.min.js"></script>

JavaScript

var n = NPos3d;
var s = new n.Scene({
    lineWidth: 2,
    frameRate: 9001
});

var pointHolder = new n.Ob3D({
    renderStyle: 'points',
    shape: {
        points: []
    },
    renderAlways: true
});
s.add(pointHolder);

var hue = 0;

var rotaryUpdate = function(){
	var t = this, point;
	if(t === sun){
		//t.rot[0] = -s.mpos.y * deg / 10;
		//t.rot[1] = s.mpos.x * deg / 10;
		//t.pos[0] = s.mpos.x;
		//t.pos[1] = s.mpos.y;
		t.rot[0] += deg * 0.08;
		//t.rot[1] += deg * 0.08;
    	t.rot[2] += deg * 2;
	}
	t.rot[2] += deg * 2;
	t.render();
	if(t === moon){
        point = myText.gPos.slice();
        point.push('rgb(' + hue + ', 255, 255)');
        hue += 1;
        pointHolder.shape.points.push(point);        
		pointHolder.rot[0] = -s.mpos.y * deg / 2;
		pointHolder.rot[1] = s.mpos.x * deg / 2;
    }
};

var mySphereGeom = new n.Geom.Sphere({
	radius:100,
    rings: 3,
    segments: 4,
	order:'xyz'
});
var addAxiesToShape = function(shape){
	shape.points.push([-300,0,0, '#f00'], [300,0,0, '#f00']);
	shape.lines.push([shape.points.length -2, shape.points.length -1, '#f00']);
	shape.points.push([0,-300,0, '#0f0'], [0,300,0, '#0f0']);
	shape.lines.push([shape.points.length -2, shape.points.length -1, '#0f0']);
	shape.points.push([0,0,-300, '#00f'], [0,0,300, '#00f']);
	shape.lines.push([shape.points.length -2, shape.points.length -1, '#00f']);
};
addAxiesToShape(mySphereGeom);

var sun = new n.Ob3D({
	renderAlways: true,
	shape: mySphereGeom,
	rot: [45 * deg, 0, 0],
	scale: [1,1,1],
	rotOrder: [0,1,2],
	color: '#fd0',
	renderStyle: 'both',
	pointScale: 5
});
sun.update = rotaryUpdate;
s.add(sun);

var erf = new n.Ob3D({
	shape: mySphereGeom,
	pos: [250,0,0],
	rotOrder: [0,1,2],
	rot: [45 * deg, 0, 0],
	scale: [0.25,0.25,0.25],
	color: '#05f'
});
erf.update = rotaryUpdate;
sun.add(erf);

var moon = new n.Ob3D({
	shape: mySphereGeom,
	//rot: [deg * -45, 0, 0],
	pos: [300,0,0],
	rotOrder: [0,1,2],
	scale: [0.5,0.5,0.5],
	color: '#ffd'
});
moon.update =...