JSFiddle - React, Tailwind, and code Playground

by Javier Cruz

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>
-->

<!--- Using old THREE.js r60 -->
<!-- <script src="http://www.zen226082.zen.co.uk/TRI_VP_files/js/Three.js"></script>
-->

CSS

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

JavaScript

// http://jsfiddle.net/u049vL55/
// *** Text on Plane from canvas is truncated ***

var camera, scene, renderer;

init();
animate();

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

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set (0,0,800);
    scene.add(camera);     

    // AMBIENT LIGHT
	scene.add(new THREE.AmbientLight(0xffffff));
    
	//BACKPLANE
	bPlane  = SOW_F_Get_A_Plane(scene, camera , pColor=0xaaaaaa, 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);
    
	//THREE.js library version
	version = 70;
	//version = 60;
	
    //... r70 only
	if (version == 70)
	{
		//... r70
		camera.lookAt(0,0,0); 
		controls = new THREE.OrbitControls(camera, renderer.domElement);
		
		aPlane = F_Text_onto_Plane("r70 OLE 1234567890", 550, 40);// ... Text, Tbox width, Tbox height
		aPlane.position.set (0,0,0);
		scene.add(aPlane);
		
    } 
	else 
	{
		//... r60
		camera.lookAt (new THREE.Vector3(0, 0, 0));   

		aPlane = F_Text_onto_Plane("r60 OLE 1234567890", 550, 40);// ... Text, Tbox width, Tbox height
		aPlane.position.set (0,0,0);
		scene.add(aPlane);
    }
}//... EOF init

//====================================================================

function animate() 
{
        requestAnimationFrame(animate);        
        renderer.render(scene, camera);  
} //... EOF animate


//==================================================================================================

function SOW_F_Get_A_Plane(givenScene, givenCamera , givenColor, x,y,z, MaterialType) {

    //...MyPlane width or height are in scene units and do not have to match...