Lichtenstein’s Lunch

In this example below you will see how to do a Lichtenstein’s Lunch with some HTML / CSS and Javascript

Recreating Ricardo Cabello's baseline postprocessing example on threejs.org, knob-twisted to highlight two of my all-time favorite print effects: miscalibrated RGB and halftone a la Lichtenstein. I slowed down the rotation and added OrbitalControls, for handsy full-mouse and/or three-finger 3D direction of the glitchy spew.

Thumbnail
This awesome code was written by januff, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright januff ©
  • HTML
  • CSS
  • JavaScript
    

/*Downloaded from https://www.codeseek.co/januff/lichtensteinandx2019s-lunch-wKVJbj */
    html, body {
  margin: 0;
  overflow: hidden;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/143273/licht.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* 
  HTML COLOR NAME REMINDERS
  floralwhite FFFAF0
  blanchedalmond FFEBCD
  burlywood DEB887
  darkseagreen 8FBC8F
  darkkhaki BDB76B
  darkolivegreen 556B2F
  lime 00FF00
  deeppink FF1493
  lightpink FFB6C1
  hotpink FF69B4
  indianred CD5C5C
  lightsalmon FFA07A
  dimgray 696969
*/



/*Downloaded from https://www.codeseek.co/januff/lichtensteinandx2019s-lunch-wKVJbj */
    var camera, scene, renderer, composer;
var object, light;

init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer({
    alpha: true
  });
  renderer.setClearColor(0x000000, 0);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  //

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;
  controls = new THREE.OrbitControls(camera);

  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0x000000, 1, 1000);

  object = new THREE.Object3D();
  scene.add(object);

  var geometry = new THREE.SphereGeometry(1, 3, 4);
  var material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading
  });

  for (var i = 0; i < 150; i++) {

    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
    mesh.position.multiplyScalar(Math.random() * 300);
    mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
    mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 80;
    object.add(mesh);

  }

  scene.add(new THREE.AmbientLight(0x999999));

  light = new THREE.DirectionalLight(0x777777);
  light.position.set(1, 1, 1);
  scene.add(light);

  // postprocessing
  
   var width = window.innerWidth || 1;
  var height = window.innerHeight || 1;
  var parameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: false
  };

  var renderTarget = new THREE.WebGLRenderTarget(width, height, parameters);

  composer = new THREE.EffectComposer(renderer, renderTarget);
  composer.addPass(new THREE.RenderPass(scene, camera));

  var effect = new THREE.ShaderPass(THREE.DotScreenShader);
  effect.uniforms['scale'].value = 1;
  composer.addPass(effect);

  var effect = new THREE.ShaderPass(THREE.RGBShiftShader);
  effect.uniforms['amount'].value = 0.01;
  effect.renderToScreen = true;
  composer.addPass(effect);

  //

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

  requestAnimationFrame(animate);

  object.rotation.x += 0.001;
  object.rotation.y += 0.001;

  composer.render();

}

Comments