T Race T Race - 1 year ago 169
CSS Question

How to fix Three.js Cube thin wireframe?

The problem: 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.

Examples: Here are a list of screen shots demonstrating the behavior.

  • desktop (constrained to mimic iPhone 6 size in chrome browser) -

enter image description here

  • mobile (actual iPhone 6 size in ios chrome browser) -

enter image description here

Here is my current 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;

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 );

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%;**/
text-align: center;
bottom: 0;


<link href='https://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>

<div id="textthing">
<h1>weeflix LLC</h1>
<!--<h2>Coming soon.</h2>-->
<p>Jake Schnieder || Thomas Bisnitsz</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

Answer Source

Try adding this line to the your <head> section

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

See this MDN article for what setting the viewport does

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download