Loop Subdivision (simplified)

by jmchen

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
    
</script>
<script src="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="http://threejs.org/examples/js/modifiers/SubdivisionModifier.js"></script>

<div id="stats"></div>

CSS

body {
    font-family: Monospace;
    background-color: #f0f0f0;
    margin: 0px;
    overflow: hidden;
}

#stats {
    text-align: right;
    position:absolute;
    bottom: 50px;
    color: #ff0000;
}

JavaScript

var container;
var camera, controls, scene, renderer;
var cube;
var keyboard = new KeyboardState();

var subdivisions = 1;

// start scene

init();
animate();

function nextSubdivision(x) {
    subdivisions = Math.max(0, subdivisions + x);
    addStuff();
}

function addStuff() {

    if (cube) {

        scene.remove(group);
        scene.remove(cube);

    }


    var modifier = new THREE.SubdivisionModifier(subdivisions);

    //geometry = new THREE.BoxGeometry (200, 200, 200, 2, 2, 2);//, materials);
    geometry = new THREE.IcosahedronGeometry (100, 1);//, materials);
    //var meshScale = params.meshScale ? params.meshScale : 1;
	var meshScale = 2;

   /*
   (to-do): call back to do Suzanne.js
   
    var loader2 = new THREE.JSONLoader();
	loader2.load( 'http://threejs.org/examples/obj/Suzanne.js', function ( geom ) {
		geometry = geom.clone();
//				geometriesParams.push({type: 'Suzanne', args: [ ], scale: 100, meshScale:2 });
	} );

    */
    
    // Cloning original geometry for debuging

    smooth = geometry.clone();

    // mergeVertices(); is run in case of duplicated vertices
    smooth.mergeVertices();
    smooth.computeFaceNormals();
    smooth.computeVertexNormals();

    modifier.modify(smooth);


    // assign vertex color based on the Y coordinate
    var faceABCD = "abcd";
    var color, f, p, n, vertexIndex;

    for (i = 0; i < smooth.faces.length; i++) {

        f = smooth.faces[i];


        n = (f instanceof THREE.Face3) ? 3 : 4;

        for (var j = 0; j < n; j++) {

            vertexIndex = f[faceABCD.charAt(j)];

            p = smooth.vertices[vertexIndex];

            color = new THREE.Color(0xffffff);
            color.setHSL((p.y) / 200 + 0.5, 1.0, 0.5);

            f.vertexColors[j] = color;

        }

    }

    // group: the control mesh (geometry: createSomething)
    group = new THREE.Group();
    scene.add(group);

    var material = new THREE.MeshBasicMaterial({
        color: 0xfefefe,
        wireframe: true,
     ...