JSFiddle - React, Tailwind, and code Playground

by dnprock

HTML

<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="https://mrdoob.github.io/three.js/examples/fonts/helvetiker_regular.typeface.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/vidalab/d3three/master/d3.js "></script>
<div id="canvas">
    <div id="canvas-svg"></div>
</div>

CSS

/*--- GUIDELINES --- 
1. Use CSS styling
2. Use class or id specific to style elements related the visualization only
3. Avoid using styling that alters this webapp (Example: html, body, h1, a, etc.). 
   Documents may get flagged if doing so ---*/

#canvas {
}

#canvas-svg {
    width: 100%;
    height: 100%;
}

body {
  margin: 0px;
  overflow: hidden;
}

JavaScript

D3THREE = function() {
  this.labelGroup = new THREE.Object3D();
}

D3THREE.prototype.init = function() {
  // standard THREE stuff, straight from examples
  this.renderer = new THREE.WebGLRenderer({antialias: true, alpha : true});
  this.renderer.shadowMapEnabled = true;
  this.renderer.shadowMapType = THREE.PCFSoftShadow;
  this.renderer.shadowMapSoft = true;
  this.renderer.shadowCameraNear = 1000;
  this.renderer.shadowCameraFar = 1000;
  this.renderer.shadowCameraFov = 50;
  this.renderer.shadowMapBias = 0.0039;
  this.renderer.shadowMapDarkness = 0.25;
  this.renderer.shadowMapWidth = 10000;
  this.renderer.shadowMapHeight = 10000;
  this.renderer.physicallyBasedShading = true;
  this.renderer.setSize( window.innerWidth, window.innerHeight );
  document.getElementById('canvas-svg').appendChild( this.renderer.domElement );

  this.camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 100000 );
  this.camera.position.z = 800;

  this.controls = new THREE.OrbitControls( this.camera );

  this.scene = new THREE.Scene();

  var light = new THREE.AmbientLight( 0xbbbbb ); // soft white light
  this.scene.add( light );
    
  this.scene.add(this.labelGroup);

  // continue with THREE stuff
  window.addEventListener( 'resize', onWindowResize, false );
}

D3THREE.prototype.animate = function() {
  requestAnimationFrame( d3three.animate );
  d3three.renderer.render( d3three.scene, d3three.camera );
  d3three.controls.update();
  
  d3three.labelGroup.children.forEach(function(l){
    l.rotation.setFromRotationMatrix(d3three.camera.matrix, "YXZ");
    l.rotation.x = 0;
    l.rotation.z = 0;
  });
}

D3THREE.prototype.render = function(element) {
  element.render(this);
}

d3three = new D3THREE();

D3THREE.Axis = function() {
  this._scale = d3.scale.linear();
  this._orient = "x";
  this._tickFormat = function(d) { return d };
}

D3THREE.Axis.prototype.orient = function(o) {
  if (o) {
    this._orient = o;
  }
  return...