Palette Constrained Flat Shaded Rotating Pixelated Cube and Lines

by ramseynasser

HTML

<!-- we need a few more scripts out of the three.js distribution -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/postprocessing/ShaderPass.js"></script>

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;

/*
 * we construct a canvas manually so we can specify that
 * we want a webgl2 context
 */
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2', { alpha: false } );
var renderer = new THREE.WebGLRenderer({antialias:false, canvas: canvas, context: context });

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

/*
 * we have to change the way we're rendering the scene. instead of rendering
 * using the...