JSFiddle - React, Tailwind, and code Playground

by jmg157

HTML

<script src="http://wxalert.info/private/dv/three.js"></script>
<script src="http://wxalert.info/private/dv/OrbitControls.js"></script>

JavaScript

// Global variables
var container, camera, scene, geometry, mesh, renderer, controls;
objects = [];

// DOM element
container = document.createElement('div');
document.body.appendChild(container);

init();
animate();

function init() {

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

	// Camera
	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.set(300, 0, 75);
	scene.add(camera);

	// Renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor(0x9999ff, 1);
	container.appendChild(renderer.domElement);

	// Controls
	controls = new THREE.OrbitControls(camera);

};

function createTextCanvas(text, color, font, size) {

	size = size || 24;
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	var fontStr = (size + 'px ') + (font || 'Arial');
	ctx.font = fontStr;
	var w = ctx.measureText(text).width;
	var h = Math.ceil(size);

	canvas.width = w;
	canvas.height = h;

	ctx.font = fontStr;

	ctx.fillStyle = color || 'black';
	ctx.fillText(text, 0, Math.ceil(size * 0.8));

	return canvas;

}

function createText2D(text, color, font, size, segW, segH) {

	var canvas = createTextCanvas(text, color, font, size);
	var plane = new THREE.PlaneGeometry(canvas.width, canvas.height, segW, segH);
	var tex = new THREE.Texture(canvas);

	tex.needsUpdate = true;

	var planeMat = new THREE.MeshBasicMaterial({
		map : tex,
		color : 0xffffff,
		transparent : true
	});

	var mesh = new THREE.Mesh(plane, planeMat);
	mesh.scale.set(0.2, 0.2, 0.2);
	mesh.doubleSided = true;

	return mesh;

}

var scatterPlot = new THREE.Object3D();
scene.add(scatterPlot);
scatterPlot.rotation.y = 0.5;

// Create grid labels
rng = [];
for (var i = -50; i < 55; i += 5) {
	rng.push(i);
}

for (var i = 0; i < rng.length; i++) {
	xMarks = createText2D(rng[i], 'black', null, 15);
	xMarks.position.x = rng[i];
	xMarks.position.y = -50;
	xMarks.position.z =...