Multiple TEXT on Plane's

by steveow

HTML

<!--- Using 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">Multiple Text_on_Plane ABB's</h1>	 
<input type="submit" id="byBtn1" value="Continue" onclick="F_Continue()" />	
<input type="submit" id="byBtn2" value="Pause" onclick="F_Pause()" />

CSS

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

JavaScript

// http://jsfiddle.net/steveow/qL1skL0s/

// *** Multiple Text on Plane's from canvas ***


var camera, scene, renderer, clock, canvas1, context1;
var count = 0, xpos = 200, ypos = 0, zpos = 0, yDirection = 1, lastUpdateTime = 0;
var mode = 1;
var BB_Array = [];
var BB_1,BB_2,BB_3;
var lastUpdateTime=0;
var Continue_or_Pause = "Pause";

F_init();
F_animate();

//--------------------------------------------------------------------

function F_init() 
{

    clock = new THREE.Clock();
    scene = new THREE.Scene();

    // CAMERA 
	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);    
    scene.add(camera);     
	camera.position.set ( -250, 0, 300 );
	camera.lookAt( 0, 0, 0 ); 

    // AMBIENT LIGHT
	scene.add(new THREE.AmbientLight(0xffffff));
    
	// BACKPLANE
	bPlane  = SOW_F_Get_A_Plane( scene, camera , pColor=0x0099aa, 0,0,-100, "Basic" ); 
	bPlane.rotation.x = Math.PI/2;
	scene.add(bPlane);

    // RENDERER
    renderer = new THREE.WebGLRenderer({antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = false;
    document.body.appendChild(renderer.domElement);
	
	// CONTROLS
	controls = new THREE.OrbitControls( camera, renderer.domElement );
		
    // INITIALIZE BB's
    var xxx = SOW_F_grob_BB_Init_All();
		
}//... EOF F_init

//========================================================
function F_update()
{
 var time = clock.getElapsedTime();
 var deltaTsecs = time - lastUpdateTime;
 
	if ( deltaTsecs >= 0.1 )
	{
	   count +=1;
	   if ( Math.abs(ypos) > 50 ) yDirection *= -1;
	   ypos += yDirection * 0.2;
	   lastUpdateTime = time;
   
		 //NEW UPDATE
		 
		 BB_1.params.py += yDirection * 0.2; BB_1.params.pz +=  0.2;
		 BB_2.params.py += yDirection * 0.2; BB_2.params.pz +=  0.2;
		 BB_3.params.py += yDirection * 0.2; BB_3.params.pz +=  0.2;
		 
		 SOW_F_grob_BB_Update_a_BB ( BB_1, "BB1: count = " + count );
		...