Text on Plane

Truncation problem three.js

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

<!--- 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.x = 0;
    camera.position.y = 0;
    camera.position.z = 900;
    scene.add(camera);     

    // AMBIENT LIGHT
	scene.add(new THREE.AmbientLight(0x555555));
    
	
    // POINT LIGHT
    PL_color = 0x00aaff;
    PL_intensity = 50;
    PL_range_to_zero_intensity = 500;
    PL = new THREE.PointLight
        (PL_color, PL_intensity, PL_range_to_zero_intensity);    
	scene.add(PL);

    // RENDERER
    renderer = new THREE.WebGLRenderer({antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = false;
    document.body.appendChild(renderer.domElement);
    
	version = "70plus";
	//version = 60;
	
    //... r70 only
	if (version == "70plus")
	{
		//... r70
		camera.lookAt(0,0,0); 
		controls = new THREE.OrbitControls(camera, renderer.domElement);
		
		bPlane = F_Text_Plane_Make_wo_box("70plus" +  " OLE 1234567890");//...by oleduc
		bPlane.position.set (0,0,0);
		scene.add(bPlane);
		
    } else {
		//... r60
		camera.lookAt (new THREE.Vector3(0, 0, 0));   

		bPlane = F_Text_Plane_Make_wo_box("r60" + " OLE 1234567890");//...by oleduc
		bPlane.position.set (0,0,0);
		scene.add(bPlane);
    }
}

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

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

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

function F_Text_Plane_Make_wo_box(text)

//... after oleduc at https://github.com/mrdoob/three.js/issues/1321
{
	var canvas1 =...