<h1>Colored library plane</h1>

<p>This demo shows a texture-mapping of the following image onto a
simple <code>THREE.PlaneGeometry</code>, but with an underlying
  color. Use the GUI at the above left to change the color.

<p>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2999896/bcLibrary0256.jpg" alt="Buffy">
    <span id="color" style="width:256px;height:256px;display:inline-block;background-color:#6fca74"></span>
</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;
}
var guiParams = {
    color: 0x6fca74,
    last: null
};

var library;

function makeLibraryPlane() {
    TW.loadTexture(
        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2999896/bcLibrary0256.jpg',
        function (texture) {
            var planeGeom = new THREE.PlaneGeometry( 4, 4);
            var libraryMat = new THREE.MeshBasicMaterial(
                {color: guiParams.color,
                 map: texture});
            scene.remove(library);
            library = new THREE.Mesh( planeGeom, libraryMat );
            scene.add(library);
            TW.render();
        });
}

// We always need a scene.
var scene = new THREE.Scene();

makeLibraryPlane();

// ================================================================
// 
var renderer = new THREE.WebGLRenderer();

TW.mainInit(renderer,scene);

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

var gui = new dat.GUI();
gui.addColor(guiParams, "color").onChange(function () {
    document.getElementById("color").style.backgroundColor = "#"+guiParams.color.toString(16);
    makeLibraryPlane();
    TW.render();
});

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