title: How to fix Three.js Cube thin wireframe?
body: <p><strong>The problem</strong>: The Three.js 3d cube I created has a wireframe or outline mode attribute enabled. It works correctly on desktop/tablet but when constrained down to mobile, it becomes extremely thin and unusable. I would like to stop this from happening and keep the same desktop/tablet wireframe weight but for mobile as well.</p>
  
  <p><strong>Examples:</strong> Here are a list of screen shots demonstrating the behavior.</p>
  
  <ul>
  <li>desktop (constrained to mimic iPhone 6 size in chrome browser) -</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/8N5Nn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8N5Nn.png" alt="enter image description here"></a></p>
  
  <ul>
  <li>mobile (actual iPhone 6 size in ios chrome browser) - </li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/dWMLt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dWMLt.png" alt="enter image description here"></a></p>
  
  <p><strong>Here is my current code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75,     window.innerWidth / window.innerHeight, 0.1, 1000 );
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  //makes the site responsive
  window.addEventListener('resize', function(){
    var width = window.innerWidth; 
    var height = window.innerHeight;
  
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  });
  
  var geometry = new THREE.BoxGeometry( 1.5, 1.5, 1.5 );
  var material = new THREE.MeshBasicMaterial( { color:     0x00ff00, wireframe: true } );
  var cube = new THREE.Mesh( geometry, material );
  
  scene.add( cube );
  
  camera.position.z = 5;
  
  function render() {
    requestAnimationFrame( render );
  
    cube.rotation.x += 0.025;
    cube.rotation.y += 0.025;
  
    renderer.render( scene, camera );
  }
  render();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body { 
  
    margin: 0;
    overflow: hidden;
  
  }
  canvas { 
  
    width: 100%; 
    height: 100%;
    background-color: black;
  
  }
  h1 {
  
    font-family: 'Maven Pro', sans-serif;
    font-size: 3em;
  }
  
  p {
    font-family: 'Lato', sans-serif;
    font-size: 1em;
  }
  #textthing {
  
    position: absolute;
    margin-bottom: 60px;
    color: #00FF00;
    /**height: 90%;**/
    width:100%;
    text-align: center;
    bottom: 0;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   
  &lt;link href='https://fonts.googleapis.com/css?family=Maven+Pro'     rel='stylesheet' type='text/css'&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Lato:400,300'     rel='stylesheet' type='text/css'&gt; 
          
  
  &lt;div id="textthing"&gt;
    &lt;h1&gt;weeflix LLC&lt;/h1&gt;
    &lt;!--&lt;h2&gt;Coming soon.&lt;/h2&gt;--&gt;
    &lt;p&gt;Jake Schnieder  ||  Thomas Bisnitsz&lt;/p&gt;
  &lt;/div&gt;
          
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"&gt;&lt;/script&gt;
  
  
   </code></pre>
  </div>
  </div>
  </p>