JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
JavaScript
var old = false;
var orbit = true;
function toBinaryInt(num) {
/**
* @author fernandosavio
* http://stackoverflow.com/a/16155417/1763602
*/
"use strict";
return (num >>> 0).toString(2); // jshint ignore:line
}
function getNextPowerOfTwo(num) {
/**
* @author Marco Sulla (marcosullaroma@gmail.com)
* @date Feb 17, 2016
*/
"use strict";
if (num < 0) {
throw new Error("Argument must be positive");
}
var bin_str = toBinaryInt(num - 1);
if (bin_str.indexOf("0") < 0 || bin_str === "0") {
return num;
}
else {
return Math.pow(2, bin_str.length);
}
}
function adaptCanvasToText(canvas, message, font_size, font_face) {
/**
* @author Marco Sulla (marcosullaroma@gmail.com)
* @date Feb 17, 2016
*/
"use strict";
var context = canvas.getContext('2d');
if (canvas.height > canvas.width) {
canvas.width = canvas.height;
}
while (true) {
var side = getNextPowerOfTwo(canvas.width);
if (side < 128) {
side = 128;
}
canvas.width = canvas.height = side;
context.font = "Bold " + font_size + "pt " + font_face;
var metrics = context.measureText(message);
var text_width = metrics.width;
var text_side = getNextPowerOfTwo(Math.max(text_width, font_size));
if (text_side >= 128) {
if (side !== text_side) {
canvas.width = text_side;
continue;
}
}
else if (side !== 128) {
canvas.width = 128;
continue;
}
break;
}
}
function getVector3(arg1, y, z) {
/**
* @author Marco Sulla (marcosullaroma@gmail.com)
* @date Feb 17, 2016
*/
"use strict";
var x_new;
var y_new;
var z_new;
if (y !==...