<h1>Mikey cube</h1>
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;
}
/* Kelsey Reiman
   Summer 2014 
   
   Creates a cube with a different texture on each face.

   Modified by Scott to use the newer texture loader, Fall 2016
*/

var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();

TW.mainInit(renderer,scene);

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

var modifyFront = false;

var mikeyCube; 

function makeMikeyCube() {
    TW.loadTextures(
        [ 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2999896/mikey1.jpg',
          'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2999896/mikey2.jpg',
          'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2999896/mikey3.jpg',
          'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2999896/mikey4.jpg',
          'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2999896/mikey5.jpg',
          'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2999896/mikey6.jpg' ],
        function (textures) {
            // create an array of materials from these textures
            var mats = [];
            for( var i=0; i < textures.length; i++ ) {
                textures[i].wrapS = THREE.RepeatWrapping;
                textures[i].wrapT = THREE.RepeatWrapping;
                mats.push(new THREE.MeshBasicMaterial( {map: textures[i]} ));
            }
            // create a cube using MeshFaceMaterial, one material for each face
            var cube = new THREE.Mesh( new THREE.BoxGeometry(2,2,2),
                                       new THREE.MeshFaceMaterial( mats ) );
            if(modifyFront) doModifyFront(cube);
            scene.remove(mikeyCube);
            scene.add(cube);
            mikeyCube = cube;
            TW.render();
        });
}

makeMikeyCube();

function doModifyFront(cube) {
    var geom = cube.geometry;
    var faces = geom.faces;
    var UVs = geom.faceVertexUvs[0];
    for( var i = 0; i < faces.length; i++ ) {
        var face = faces[i];
        // modify the (s,t) parameters to give 2x3 pattern on front face (4)
        if( face.materialIndex == 4 ) {
            var faceUV = UVs[i];
            // for all three vertices
            for( j = 0; j < 3; j++ ) {
                var UV = faceUV[j];
                UV.x = 2*UV.x;
                UV.y = 3*UV.y;
            }
        }
    }
    /*
    document.getElementById('info').innerHTML = 
     "<pre>"+TW.stringifyGeometry(geom)+"</pre>";
     */
}

TW.setKeyboardCallback('p',function () { modifyFront = !modifyFront;
                                         makeMikeyCube(); },
                       "pattern on front of cube");

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