Prog & Part Drawing

Three.js using Draw Range

by steveow

HTML

<!--- Uses the latest THREE.js (r70+) -->
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

<h1 id="title_A">Progressive and Partial Drawing</h1>

<input type="submit" id="byBtn_ObjectType" value="Click to change Target Object" onclick="F_change_ObjectType()" />

<input type="text" id="myTextField_ObjectType" value="SPHERE" />
<p></p>
<input type="submit" id="byBtn_DrawMode" value="Click to change DrawMode" onclick="F_change_DrawMode()" />

<input type="text" id="myTextField_DrawMode" value="Case A" />
<input type="text" id="myTextField_DrawDescription" value="Immediate & Full" />

CSS

body {
    background-color: #eeeeee;
    margin: 0px;
    overflow: hidden;
}

JavaScript

// MAIN //

//... Global variables.
var camera, scene, renderer, geometry, material, 
mybox, mybox2, mybox3;

var renderer_width, renderer_height;

var numWidthSegments = 64, numDepthSegments =64;

var nDiff = 0, nEnd = 0, nStep = 30*3;//... 30 triangles * 3 vertices
var UserCase = "Case A";
var Q_do_Progressive_Drawing = false, Q_do_Partial_Drawing =false;


//var ObType = "PLANE";
var ObType = "SPHERE";
var Sculpter_Target_mesh;
var Pmesh, Smesh;

//... HARD-WIRING
var Partial_Draw_Start_Fraction = 0.3;
var Partial_Draw_End_Fraction = 0.7;

init();
animate();
//-------------------------------------------------------------
function F_change_ObjectType() 
{

    ObjectType = document.getElementById('myTextField_ObjectType').value;

 
    if (ObjectType == "PLANE") 
    {
    	ObjectType = "SPHERE";
      Sculpter_Target_mesh = Smesh;
    }
    else if (ObjectType == "SPHERE") 
    {
    	ObjectType = "PLANE";
      Sculpter_Target_mesh = Pmesh;
    }

    document.getElementById('myTextField_ObjectType').value = ObjectType;
    
}
//-------------------------------------------------------------
function F_change_DrawMode() 
{

    UserCase = document.getElementById('myTextField_DrawMode').value;
    //... Case A OK
    
    //... Case B 
    // ... Plane: only draws part.
    //...  Sphere: draws entirety.
 
    if (UserCase == "Case D") 
    {UserCase = "Case A";
      Q_do_Progressive_Drawing = false;
      Q_do_Partial_Drawing = false;
      var DrawDescription =  "Immediate & Full";
      //... Case A: 
    }
    else if (UserCase == "Case A") 
    {UserCase = "Case B";
      Q_do_Progressive_Drawing = true;
      Q_do_Partial_Drawing = false;
      var DrawDescription =  "Progressive & Full";
      //... Case B:
     } 
    else if (UserCase == "Case B") 
    {UserCase = "Case C";
      Q_do_Progressive_Drawing = false;
      Q_do_Partial_Drawing = true;
      var DrawDescription =  "Immediate & Partial";
      //... Case C: 
    } 
    else if (UserCase ==...