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 geometry = new THREE.BoxGeometry( 1, 1, 1 );
/* we replace MeshStandardMaterial with MeshLambertMaterial  */
var material = new THREE.MeshLambertMaterial( { color: "#433F81" } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

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

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push(
  new THREE.Vector3( -2, 0, 0 ),
  new THREE.Vector3( 0, 2, 0 ),
  new THREE.Vector3( 2, 0, 0 ),
  new THREE.Vector3( 0, 0, 0 )
);

var line = new THREE.Line( lineGeometry, lineMaterial );
cube.add( line );

var pointMaterial = new THREE.PointsMaterial({ color: "#43ae81", size: 1, sizeAttenuation: false });

var pointGeometry = new THREE.Geometry();
pointGeometry.vertices.push(
  new THREE.Vector3( -1.5, 1.5, 2 ),
  new THREE.Vector3( 1.5, 2, -2 ),
  new THREE.Vector3( 1.5, -1.5, 0 ),
  new THREE.Vector3( 0, 0, 0 )
);

var points = new THREE.Points( pointGeometry, pointMaterial );
cube.add( points );


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

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

render();