Flat Shaded Rotating Pixelated Cube and Lines

by ramseynasser

CSS

html, body {
  margin: 0;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

JavaScript

// adapted from https://medium.com/@necsoft/three-js-101-hello-world-part-1-443207b1ebe1
let size = 128;
let scale = 4;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );
camera.position.z = 4;

var renderer = new THREE.WebGLRenderer({antialias:false});

renderer.setSize( size, size );

document.body.appendChild( renderer.domElement );

renderer.domElement.style.imageRendering = "pixelated"
renderer.domElement.style.width = (size * scale) + 'px';
renderer.domElement.style.height = (size * scale) + 'px';

var lineMaterial = new THREE.LineBasicMaterial({ color: "#ae3F81" });

var lineGeometry = new THREE.Geometry();
for(var i=-20;i <10; i++) {
	lineGeometry.vertices.push(
		new THREE.Vector3( -2, 1, i ),
  	new THREE.Vector3( 0, 1.5, i ),
    new THREE.Vector3( 0, 1.5, i ),
    new THREE.Vector3( 2, 1, i ),
	)
}


var line = new THREE.LineSegments( lineGeometry, lineMaterial );
scene.add( line );



var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
var light = new THREE.AmbientLight( 0x404040, 5 );
scene.add( light );

var render = function () {
  requestAnimationFrame( render );

  renderer.render(scene, camera);
};

render();