Just diving into Three.js and might've messed up somewhere. I'm trying to generate a geometry by using coordinates and surface data from a .k file. I checked the geometry.vertices and geometry.faces, they seem fine. I even played around with the camera position, but nothing is appearing on the screen. Any help is appreciated!
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.Geometry();
var map = {}; // mapping node id to index in geometry vertices
// reading in k file line by line
document.getElementById('file').onchange = function(){
var file = this.files[0];
var reader = new FileReader();
var node_flag = false, element_flag = false;
reader.onload = function(progressEvent){
var lines = this.result.split('\n');
for(var line = 0; line < lines.length; ++line){
if(!node_flag && lines[line].substr(0,5) == "*NODE") {
node_flag = true;
continue;
}
if(lines[line].substr(0,8) == "$# title")
node_flag = false;
else if(lines[line].substr(0,14) == "*ELEMENT_SHELL") {
element_flag = true;
continue;
}
else if(lines[line].substr(0,14) == "*ELEMENT_SOLID")
break;
// reading nodes and creating vectors
if(node_flag) {
let data = lines[line].match(/\S+/g);
map[data[0]] = geometry.vertices.length-1;
geometry.vertices.push((new THREE.Vector3(+data[1], +data[2], +data[3])));
}
// reading element shell and creating surfaces
if(element_flag){
let data = lines[line].match(/\S+/g);
geometry.faces.push(new THREE.Face3(map[data[2]], map[data[3]],map[data[4]]));
}
}
}
reader.readAsText(file);
finish_loading();
}
var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var cube;
var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
camera.position.z = 100;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
renderer.render( scene, camera );
}
function finish_loading(){
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
animate();
}<!DOCTYPE html>
<html>
<head>
<title>MDP Web-tool</title>
<link type="text/css" href="css/style.css">
<script src = "js/library/three.js"></script>
<script src="js/library/node_modules/hashmap/hashmap.js"> </script>
</head>
<body>
<canvas id = "myCanvas"></canvas>
<input type="file" id="file">
<script src="js/model.js"></script>
</body>
</html>