Standard vs Lambert

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

/*
 * we track the rendering resolution as size (both width and height) and
 * the factor to multiply by to get the display resolution as scale.
 * so for size = 128 and scale = 4 we our rendering resulution is 128x128 pixels
 * and our dispay resolution is 512x512 pixels.
 */
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;

/* we set antialias to false to avoid blurring */
var renderer = new THREE.WebGLRenderer({antialias:false});

/* we make the renderer small */
renderer.setSize( size, size );

document.body.appendChild( renderer.domElement );

/* we use CSS to scale the canvas up without blurring */
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 );
var material = new THREE.MeshStandardMaterial( { color: "#433F81" } );
var cube = new THREE.Mesh( geometry, material );
cube.position.x -= 1.5
cube.scale.set(0.1, 3, 4)
scene.add( cube );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshLambertMaterial( { color: "#433F81" } );
var cube = new THREE.Mesh( geometry, material );
cube.position.x += 1.5
cube.scale.set(0.1, 3, 4)
scene.add( cube );


var pointlLight = new THREE.PointLight( 0xffffff, 1 );
scene.add( pointlLight );
var light = new THREE.AmbientLight( 0x404040, 5 );
scene.add( light );

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

  renderer.render(scene, camera);
};

render();