I would greatly appreciate any assistance from this wonderful community. Lately, I've been grappling with the challenge of plotting a series of points and faces extracted from an XML file using Three.js. The point data appears as follows:
<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>
Meanwhile, the face information is structured like this:
<F>1021 1020 1061</F>
<F>640 754 641</F>
<F>1534 1633 1535</F>
It's worth noting that there are numerous points and faces, each comprised of three numbers. I've successfully converted the XML to JSON and performed all necessary parsing tasks. However, my attempt at creating a basic line visualization in Three.js yields only a blank screen. Below is a snippet of my code. Could someone please advise if what I'm trying to achieve is feasible with Three.js or suggest 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 );
Your help would be immensely valued. Thank you.