JSFiddle - React, Tailwind, and code Playground

by Simon060694

HTML

<html>
  <head>
    <title>Cube Count</title>
    <link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/x3dom.css">
    </link>
    <script type="text/javascript" src="http://www.x3dom.org/download/x3dom.js"></script>
    <script type="text/javascript" src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script> 


  </head>
  <body>
     


   
     
<script src="http://webgl.unilimes.com/project/INTMERGE/assets/packages.js"></script> 

<script type="text/test" id="indexes_fig_1">
0 1 4 3 0  0 2 5 3 0  1 2 5 4 1
</script>
<script type="text/test" id="vertices_fig_1">
10 -10 -5 3 -1 5 -15 -11 -6 8 5 -5 -3 10 -1 -13 8 -6 
</script>
    
<script type="text/test" id="indexes_fig_2">
0 1 5 4 0  0 3 7 4 0  1 2 6 5 1  2 3 7 6 2
</script>
<script type="text/test" id="vertices_fig_2">
 -1 -5 10  -8 -3 7  -7 -15 7  -2 -16 9 
 5 5 -15  -5 3 -13  3 -5 -13  7 0 -16
</script>
<script type="text/test" id="indexes_fig_3">
 0 1 4 0 0 2 4 0 2 1 4 2  0 1 3 0 0 2 3 0 
</script>
<script type="text/test" id="vertices_fig_3">
 10 -5 -5  -10 0 -7  -3 4 5  5 10 0  -5 -8 0 
</script>
<script type="text/test" id="indexes_tetrahedron">
4 19 2 4 21 19 5 21 4 5 22 21 6 22 5 6 23 22 7 23 6 7 24 23 8 24 7 8 25 24 9 25 8 9 26 25 10 26 9 10 27 26 11 27 10 11 28 27 12 28 11 12 29 28 13 29 12 13 30 29 14 30 13 14 31 30 15 31 14 15 32 31 16 32 15 16 33 32 17 33 16 17 34 33 18 34 17 18 20 34 1 20 18 21 35 19 21 37 35 22 37 21 22 38 37 23 38 22 23 39 38 24 39 23 24 40 39 25 40 24 25 41 40 26 41 25 26 42 41 27 42 26 27 43 42 28 43 27 28 44 43 29 44 28 29 45 44 30 45 29 30 46 45 31 46 30 31 47 46 32 47 31 32 48 47 33 48 32 33 49 48 34 49 33 34 36 49 20 36 34 37 50 35 37 52 50 38 52 37 38 53 52 39 53 38 39 54 53 40 54 39 40 55 54 41 55 40 41 56 55 42 56 41 42 57 56 43 57 42 43 58 57 44 58 43 44 59 58 45 59 44 45 60 59 46 60 45 46 61 60 47 61 46 47 62 61 48 62 47 48 63 62 49 63 48 49 51 63 36 51 49 52 64 50 52 66 64 53 66 52 53 67 66 54 67 53 54 68 67 55...

CSS

* {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            background: #222;
            min-width: 960px;
        }

        rect {
            fill: none;
            pointer-events: all;
        }

        circle {
            fill: none;
            stroke-width: 2.5px;
        }

        .figures {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

        .figure {
            width: 30%;
            min-width: 340px;
            float: left;
            height: 50%;
        }

        x3d{
            width:30vw;
            height:48vh;
        }
        iframe{
            width: 100%;
            height: 90%;
        }

JavaScript

var drawScene = function (type, id, isPolyhedron) {
    var
        viewPst = [15, 20, 22],
        backColor = '#565656',
        outColor = "#fff",
        pi = Math.PI,
        vis = d3.select(type + id).append("x3d").style('background', backColor),
        scene = vis.append('scene'),
		curFig = id,
        group = scene.append('Transform')
            .attr('DEF', 'viewS')
            .attr('translation', [0, 0, 0]),
        view = scene.append('Viewpoint')
            .attr('position', viewPst)
            .attr('centerOfRotation', '0, 0, 0')
        // .attr('orientation', "-1.2  1  0.2 0.8796459430051422")
        ,


        center = [0, 0, 0]
        ;


    function drawGSphegeo(arg) {
        var
            r = arg.radius,
            step = 5 * pi / 180,
            end = 360 * pi / 180,
            result = {indexes: [], coord: []},
            index = 0,
            y = arg.y,
            t = arg.theta;
        for (var i = 0; i < end; i += step) {
            var
                s = i,
                x = r * Math.cos(s) * Math.sin(t),
                y = r * Math.sin(s) * Math.sin(t),
                z = r * Math.cos(t);
            result.coord.push(x, z, y);
            result.indexes.push(index++);

            if (Math.random() > 0.98) {


                var Transform = group.append('Transform')
                        .attr('DEF', 'sphereTrafo')
                        .attr('translation', [x, z, y]),
                    shape_ = Transform.append('shape'),
                    appearance = shape_.append('appearance'),
                    material = appearance.append('material')
                        .attr('ambientIntensity', '0.9')
                        .attr('diffuseColor', outColor)
                        .attr('emissiveColor', '0,0,0')
                        .attr('shininess', '0.8')
                        .attr('specularColor', '0.,0,0')
//                                    .attr('transparency', '0.9')
                    ;
    ...