JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>

JavaScript

var scene, camera, renderer;
var geometry, material, mesh;
var step = 0.04;
var linestep = 0.07;
var a1 = 1;
var b1 = 1;
var m1 = 5;
var n11 = 1;
var n21 = 1;
var n31 = 2;
var a2 = 1;
var b2 = 1;
var m2 = 5;
var n12 = 1;
var n22 = 1;
var n32 = 8;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 300;
    var geometry = new THREE.Geometry();
    geometry.dynamic = true;
    var vertices = [];
    var holes = [];
    var step = 0.05;
    var q = parseInt(2 * Math.PI / step + 1.3462);
    var o = parseInt(Math.PI / step + 1.5);
    for (var l = 0; l < (q); l++) {
        var u = -Math.PI + l * step;
        for (var h = 0; h < (o); h++) {
            var s = -Math.PI / 2 + h * step;
            var m, k, n, g, v, e, t;
            var f = 0;
            var p = 0;
            var w = 0;
            m = Math.cos(m1 * u / 4);
            m = 1 / a1 * Math.abs(m);
            m = Math.abs(m);
            k = Math.sin(m1 * u / 4);
            k = 1 / b1 * Math.abs(k);
            k = Math.abs(k);
            g = Math.pow(m, n21) + Math.pow(k, n31);
            v = Math.abs(g);
            v = Math.pow(v, (-1 / n11));
            m = Math.cos(m2 * s / 4);
            m = 1 / a2 * Math.abs(m);
            m = Math.abs(m);
            k = Math.sin(m2 * s / 4);
            k = 1 / b2 * Math.abs(k);
            k = Math.abs(k);
            e = Math.pow(m, n22) + Math.pow(k, n32);
            t = Math.abs(e);
            t = Math.pow(t, (-1 / n12));
            f = v * Math.cos(u) * t * Math.cos(s) * 100;
            p = v * Math.sin(u) * t * Math.cos(s) * 100;
            w = t * Math.sin(s) * 100;
            geometry.vertices.push(new THREE.Vector3(f, p, w))
        }
    }


    var triangles = THREE.Shape.Utils.triangulateShape(geometry.vertices, []);
    console.log(triangles);

    for (var i = 0; i < triangles.length; i++) {
   ...