JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<script src="http://stegges.net/data.js"></script>
<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/loaders/DDSLoader.js"></script>
<script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script>
<button id="parse">Parse</button>
<div id="3dview"></div>
<div id="container"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Slabo+27px);
.line{
    width: 100%;
}
    
.node {
    position: relative;
    background-color: #eee;
    text-align: center;
    width: 200px;
    height: 280px;
    margin-left: 8px;
    margin-top: 8px;
    display: inline-block;
}

.bind {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 18px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 30px;
}

.bind span{
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0px;
    top: 5px;
}

.node .dview{
    cursor: pointer;
    font-family: 'Slabo 27px', serif;
    font-size: 20px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.7);
    display: none;
    position: absolute;
    border: none;
    bottom: 0px;
    left: 0px;
    width: 200px;
    height: 30px;
    background-color: rgba(32, 152, 209, 0.7);
}

.node:hover .dview{
    display: block;
    border: none;
    box-shadow: none;
}

.node:hover .bind{
    display: block;
}

JavaScript

document.getElementById("parse").addEventListener("click", parse, false);
function parse(){
    console.log("Parse start");
if (window.DOMParser)
  {
      
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
      console.log("DOMParser");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(txt);
  }

var container = document.getElementById("container");
    var column = 0;
    var linecontainer;
    for (var i=0; i<xmlDoc.getElementsByTagName("img").length; i++){    
        column++;
        if (column == 1){
           linecontainer = document.createElement("div");
           linecontainer.setAttribute("class", "line");
           container.appendChild(linecontainer);
        }
        
        var name = xmlDoc.getElementsByTagName("img")[i].getElementsByTagName("imagename")[0].innerHTML;
        var data = xmlDoc.getElementsByTagName("img")[i].getElementsByTagName("imagedata")[0].innerHTML;
        
        var node = document.createElement("div");
        node.setAttribute("class", "node");
        linecontainer.appendChild(node);
        var button = document.createElement("button");
        button.setAttribute("class", "dview");
        button.setAttribute("onclick", "View3D('"+data+"')");
        var ButtonText = document.createElement("span");
        button.appendChild(document.createTextNode("3D"));
        node.appendChild(button);
        var bind = document.createElement("div");
        bind.setAttribute("class", "bind");
        var BindText = document.createElement("span");
        BindText.appendChild(document.createTextNode(name));
        bind.appendChild(BindText);
        var canElem = document.createElement("canvas");
        canElem.setAttribute("id", name.substring(0, name.length - 6) + i);
        canElem.setAttribute("width", "200");
        canElem.setAttribute("height", "280");
        node.appendChild(canElem);
       ...