JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
function createArray(length) {
var arr = new Array(length || 0),
i = length;
if (arguments.length > 1) {
var args = Array.prototype.slice.call(arguments, 1);
while (i--)
arr[length - 1 - i] = createArray.apply(this, args);
}
return arr;
}
var M_PI = Math.PI;
var WIDTH = 1920;
var HEIGHT = 1080;
var oncept = 0;
var dotsscale = 1000; // dots array scale, 100^(x), example 100 1000 10000 1000000 etc
var dots = (M_PI * dotsscale) | 0; // Pi*1000=3142
var rotateradius = 1;
var fps = 0;
var frameRateSmoothing = 1.0;
var numFrames = 0;
var lastFpsTime;
var persp = 45.0;
var stateof = [true, true, true];
var stateofdir = [true, true, true];
var mainrot = [false, false];
var scale = 0.5;
js_function.funcid;
js_function.lastfuncid;
js_function.datax;
js_function.datay;
js_function.rotatex;
js_function.rotatey;
js_function.rotatez;
function js_function() {
js_function.funcid = 0;
js_function.rotatex = 0;
js_function.rotatey = 0;
js_function.rotatez = 0;
js_function.datax = new Array(dots);
js_function.datay = new Array(dots);
js_function.calculate();
js_function.findaxis();
}
//t=[0, pi*xpi]
js_function.gett = function (xpi, n) {
return xpi * (n / dotsscale);
}
//t=[-pi*xpi, pi*xpi]
js_function.gettm = function (xpi, n) {
return xpi * (-1 * M_PI) + xpi * 2 * (n / dotsscale);
}
js_function.FunctionList = function () {
for (var n = 0; n < dots; n++) {
var t = js_function.gettm(1, n);
js_function.datax [n] = t;
js_function.datay [n] = Math.tan(t);
}
return;
}
js_function.calculate = function () {
js_function.FunctionList();
}
js_function.findaxis = function () {
}
function display() {
drawfunction();
}
function drawfunction() {
var ii = 0;
for (var r = 0; r < 360; r += rotateradius) {
for (var n = 0; n < dots; n++) {
star[ii][n] = new THREE.Vector3();
star[ii][n].x =...