JSFiddle - React, Tailwind, and code Playground

by nag reddy

HTML

<div id="canvas"></div>
<div class="cnt">
  <canvas id="depth0" width="140" height="30"></canvas>
  <canvas id="depth1" width="120" height="30"></canvas>
  <canvas id="depth2" width="100" height="30"></canvas>
</div>
hh
<input id="scale" type="range" />

CSS

.cnt {
    display: none;
}

CoffeeScript

createNode = (params)->
  style =
    "0":
      w: 140
      h: 140
      y: 0
      z: 0
      c: 0x0000aa
      fillStyle: "#0000aa"
      canvas: $("#depth0").get(0)
    "1":
      w: 120
      h: 120
      y: 0
      z: 30
      c: 0xaa0000
      fillStyle: "#aa0000"
      canvas: $("#depth1").get(0)
    "2":
      w: 100
      h: 100
      y: 0
      z: 60
      c: 0x00aa00
      fillStyle: "#00aa00"
      canvas: $("#depth2").get(0)
        
  s = style[params.depth]
  geo  = new THREE.CubeGeometry s.w, s.h, 30
  mat  = new THREE.MeshLambertMaterial color: s.c
  mesh = new THREE.Mesh geo, mat
  mesh.position.x = params.x
  mesh.position.y = params.y + s.y
  mesh.position.z = s.z
  params.obj3d.add mesh
          
  ctx = s.canvas.getContext("2d")
  ctx.fillStyle = s.fillStyle
  ctx.fillRect 0,0,s.w,30
  ctx.fillStyle = "#aaaaaa"
  ctx.fillText params.text, s.w/4,20
  ctx.stroke()

  texture   = new THREE.ImageUtils.loadTexture s.canvas.toDataURL()
  lGeo      = new THREE.PlaneGeometry s.w,30
  lMat      = new THREE.MeshLambertMaterial map: texture
  label     = new THREE.Mesh lGeo, lMat
  label.position.x = mesh.position.x
  label.position.y = mesh.position.y - s.h/2 - 0.01
  label.position.z = mesh.position.z       
  label.rotation.x = 90*Math.PI/180
  params.obj3d.add label
            
createEdge = (params)->
  geo  = new THREE.CylinderGeometry 10, 10, params.h
  mat  = new THREE.MeshLambertMaterial color: params.color || "#888888"
  mesh = new THREE.Mesh geo, mat
  mesh.position.x = params.x
  mesh.position.y = params.y
  mesh.position.z = 0
  mesh.rotation.z = 90*Math.PI/180 if params.rz
  params.obj3d.add mesh
$ ->
  width = 640
  height = 480
  grid = 250
  group = new THREE.Object3D
  group.rotation.x = 60*Math.PI/180
  group.rotation.y = 180*Math.PI/180
    
  createNode
    depth: 0
    x: -grid
    y: grid
    obj3d: group
    text: "FW/SLB"

  createNode
    depth: 0
    x: 0
    y: grid
    obj3d: group
    text: "FW/SLB"

  createNode
   ...