Attention Three.JS experts! Need help mapping points and faces

Question

Any help from this great community would be such a blesing. I've recently been trying to figure out how to plot a set of points and faces that come from an XML file with Three.js. The points look something like this:

<P id="1">472227.25640192 2943287.51179465 200.138787</P>
<P id="2">472232.14363148 2943288.56768013 200.129142</P>
<P id="3">472237.03086105 2943289.62356560 200.119496</P>

and the faces look like this:

<F>1021 1020 1061</F>
<F>640 754 641</F>
<F>1534 1633 1535</F>

Keep in mind that there are thousands of these faces and points and each of them has 3 numbers. I've converted to xml to json and done all the parsing required but when I try to do a sample of some of the points as lines in Three.js, I get nothing but a black screen. Here's what I tried. Is anything like I'm trying to do even possible with three.js? Is there a better alternative?

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

var scene = new THREE.Scene();

var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( 472227.25640192, 2943287.51179465, 200.138787) );
geometry.vertices.push(new THREE.Vector3( 472232.14363148, 2943288.56768013, 200.129142) );
geometry.vertices.push(new THREE.Vector3( 472237.03086105, 2943289.62356560, 200.119496) );

var line = new THREE.Line( geometry, material );
scene.add( line );
renderer.render( scene, camera );

Thanks, any help is appreciated.

Answer 1

The vertices you define are putting the line outside of the viewport. For example, change the coords to

geometry.vertices.push(new THREE.Vector3(1, 2, 0));
geometry.vertices.push(new THREE.Vector3(3, 3, 0));
geometry.vertices.push(new THREE.Vector3(5, 6, 0));

and you will see the line.

-or-

If the values you're working with are as large as the ones in your example, move the camera waaaaaay back on the z axis. (you could also scale the values to something more manageable)