<h1>Plane flags</h1>

<p>This demo shows a texture-mapping of a computed texture onto a
simple <code>THREE.PlaneGeometry</code>.</p>
body {
  max-width: 100%;
}
/* feel free to style the canvas any way you want. If you want it to
      use the entire window, set width: 100% and height: 100%. */

canvas {
  width: 80%;
  height: 500px;
  display: block;
  margin: 10px auto;
}
function makeFlagTexture(nickname) {
    var size, array, width, height, format;
    switch (nickname) {
    case 'nascar':
        size = 3;
        array = TW.createCheckerboardGray(size);
        width = height = TW.power2(size);
        format = THREE.LuminanceFormat;
        break;
    case 'checks':
        size = 3;
        array = TW.createCheckerboardRedWhite(size);
        width = height = TW.power2(size);
        format = THREE.RGBFormat;
        break;
    case 'US-Gray':
        size = 4;
        array = TW.createUSFlagGray(size);
        height = TW.power2(size);
        width = 2*height;
        format = THREE.LuminanceFormat;
        break;
    case 'US-RWB':
        size = 4;
        array = TW.createUSFlagRedWhiteBlue(size);
        height = TW.power2(size);
        width = 2*height;
        format = THREE.RGBFormat;
        break;
    default:
        throw "don't know this flag nickname: "+nickname;
    }
    // console.log("flag stuff: ",array, width, height, format);
    var obj = new THREE.DataTexture( array, width, height, format);
    obj.flipY = true;
    // we'll explain these filters next time
    obj.minFilter = THREE.NearestFilter;
    obj.magFilter = THREE.NearestFilter;
    obj.needsUpdate = true;
    return obj;
}


function makeFlag(name) {
    var flagTexture = makeFlagTexture(name);
    var flagGeom = new THREE.PlaneGeometry( 8, 4);
    var flagMat = new THREE.MeshBasicMaterial(
        {
            color: THREE.ColorKeywords.white,
            map: flagTexture,
        });
    var flagMesh = new THREE.Mesh( flagGeom, flagMat );
    return flagMesh;
}

// ================================================================
var guiParams = {
    flag: "US-RWB",
    sMin: 0,
    sMax: 1,
    tMin: 0,
    tMax: 1,
    lastParam: null
}

var scene = new THREE.Scene();
var flag = makeFlag(guiParams.flag);
scene.add(flag);

var renderer = new THREE.WebGLRenderer();

TW.mainInit(renderer,scene);

var state = TW.cameraSetup(renderer,
                           scene,
                           {minx: -4, maxx: 4,
                            miny: -2, maxy: 2,
                            minz: 0, maxz: 1});


function redoScene() {
    scene.remove(flag);
    flag = makeFlag(guiParams.flag);
    scene.add(flag);
    TW.render();
}

var gui = new dat.GUI();
gui.add(guiParams,"flag",["nascar","checks","US-Gray","US-RWB"]).onChange(redoScene);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/three.min.js
  2. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/OrbitControls.js
  3. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/tw.js
  4. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/dat.gui.min.js