JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/OBJLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/CopyShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/shaders/FXAAShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/OutlinePass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/libs/stats.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/libs/dat.gui.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/objects/Fire.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

var container, stats;
var camera, scene, renderer, controls;
var raycaster = new THREE.Raycaster();

var mouse = new THREE.Vector2();
var selectedObjects = [];

var composer, outlinePass
var group = new THREE.Group();
var fire;

var params = {
  fireOn: false
};

// Init gui

var gui = new dat.GUI( { width: 300 } );
gui.add( params, 'fireOn' );

init();
animate();

function init() {
  container = document.createElement( 'div' );
  document.body.appendChild( container );

  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer( {
    antialias: false,
    alpha: true
  } );

  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  renderer.setClearColor( 0x000000, 0 );

  renderer.shadowMap.enabled = true;
  // todo - support pixelRatio in this demo
  renderer.setSize( width, height );
  document.body.appendChild( renderer.domElement );

  scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x111111 );
        
  camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );
  camera.position.set( 0, 0, 8 );

  controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.minDistance = 5;
  controls.maxDistance = 20;
  controls.enablePan = false;
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;

  //

  scene.add( new THREE.AmbientLight( 0xaaaaaa, 0.2 ) );

  var light = new THREE.DirectionalLight( 0xddffdd, 0.6 );
  light.position.set( 1, 1, 1 );

  light.castShadow = true;

  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 1024;

  var d = 10;

  light.shadow.camera.left = - d;
  light.shadow.camera.right = d;
  light.shadow.camera.top = d;
  light.shadow.camera.bottom = - d;

  light.shadow.camera.far = 1000;

  scene.add( light );

  // model

  var manager = new THREE.LoadingManager();

  manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
  };

  scene.add( group );
  
  // Fire
  var...