Three.js - PostProcessing - Custom

by realhunts

HTML

<canvas id="c"></canvas>
  
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r103/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r103/js/shaders/CopyShader.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r103/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r103/js/postprocessing/RenderPass.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r103/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.min.js"></script>

CSS

body {
        margin: 0;
    }
    #c {
        width: 100vw;
        height: 100vh;
        display: block;
    }

JavaScript

// Three.js - PostProcessing - Custom
// from https://threejsfundamentals.org/threejs/threejs-postprocessing-custom.html

  'use strict';

/* global THREE dat */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas: canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 2;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x) {
  var textureLoader = new THREE.TextureLoader();
      THREE.TextureLoader.crossOrigin = '';

        var texture = textureLoader.load('https://raw.githubusercontent.com/waverider404/game-assets/master/environ/frontend-large.jpg');
  
  
    const material = new THREE.MeshPhongMaterial({color, map: texture});

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    return cube;
  }

  const cubes = [
    makeInstance(geometry, 0x44aa88,  0),
    makeInstance(geometry, 0x8844aa, -2),
    makeInstance(geometry, 0xaa8844,  2),
  ];

  const composer = new THREE.EffectComposer(renderer);
  composer.addPass(new THREE.RenderPass(scene, camera));
 var textureLoader = new THREE.TextureLoader();
      THREE.TextureLoader.crossOrigin = '';

        var noisetex = textureLoader.load('https://cdn.glitch.com/914286e5-f549-4fa2-8bfa-3fba4562c778%2FPerlinExample.png?1555817375716');
  const colorShader = {
    uniforms: {
      tDiffuse: { value: null },
      color:    { value: new THREE.Color(0x88CCFF) },
      iChannel1: {value: noisetex},
      time:...