JSFiddle - React, Tailwind, and code Playground

by nicolasrannou

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js"></script>

<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/FXAAShader.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js"></script>

<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/dat.gui.min.js"></script>

CSS

body {
  margin: 0;
  background: linear-gradient(to bottom, rgba(200, 200, 200, 1), rgba(76, 76, 76, 1));
}

JavaScript

/**
 * @author spidersharma / http://eduperiment.com/
 */

THREE.OutlinePass = function ( resolution, scene, camera, selectedObjects ) {

    this.renderScene = scene;
    this.renderCamera = camera;
    this.selectedObjects = selectedObjects !== undefined ? selectedObjects : [];
    this.visibleEdgeColor = new THREE.Color( 1, 1, 1 );
    this.hiddenEdgeColor = new THREE.Color( 0.1, 0.04, 0.02 );
    this.edgeGlow = 0.0;
    this.usePatternTexture = false;
    this.edgeThickness = 1.0;
    this.edgeStrength = 3.0;
    this.downSampleRatio = 2;
    this.pulsePeriod = 0;

    THREE.Pass.call( this );

    this.resolution = ( resolution !== undefined ) ? new THREE.Vector2( resolution.x,
        resolution.y ) : new THREE.Vector2( 256, 256 );

    var pars = {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBAFormat
    };

    var resx = Math.round( this.resolution.x / this.downSampleRatio );
    var resy = Math.round( this.resolution.y / this.downSampleRatio );

    this.maskBufferMaterial = new THREE.MeshBasicMaterial( {
        color: 0xffffff
    } );
    this.maskBufferMaterial.side = THREE.DoubleSide;
    this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution
        .y, pars );
    this.renderTargetMaskBuffer.texture.name = "OutlinePass.mask";
    this.renderTargetMaskBuffer.texture.generateMipmaps = false;

    this.depthMaterial = new THREE.MeshDepthMaterial();
    this.depthMaterial.side = THREE.DoubleSide;
    this.depthMaterial.depthPacking = THREE.RGBADepthPacking;
    this.depthMaterial.blending = THREE.NoBlending;

    this.prepareMaskMaterial = this.getPrepareMaskMaterial();
    this.prepareMaskMaterial.side = THREE.DoubleSide;

    this.renderTargetDepthBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution
        .y, pars );
    this.renderTargetDepthBuffer.texture.name = "OutlinePass.depth";
   ...