three.js - Creating mesh from .obj file using geometry.vertices and geometry.faces

Question

I am trying to create a mesh from an .obj file. I am doing this rather than using the obj loader because I meed to morph the shape using different sliders, select specific faces/vertices and draw a path between vertices.

I am currently getting errors when I try to render the scene and it seems to be something to do with the faces from the obj file. When I manually enter the faces I can create a triangle no problem.

Here is my code

   var camera, scene, renderer,
    geometry, material, mesh;

init();
animate();

function init() {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/img/originalMeanModel.obj', false);
    xhr.send(null);
    var text = xhr.responseText;
    var lines = text.split("\n");
    for (i=0; i<19343; i++){
      lines[i] = lines[i].split(" ");
    }

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 1, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 20;
    scene.add( camera );

    var geometry = new THREE.Geometry()

  /* 
    geometry.vertices.push( new THREE.Vector3( -0.01,  0.01, 0 ) );
    geometry.vertices.push( new THREE.Vector3( -0.01, -0.01, 0 ) );
    geometry.vertices.push( new THREE.Vector3(  0.01, -0.01, 0 ) );
  */
    geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );



    for(i=0; i<6449; i++){
      geometry.vertices.push( 
             new THREE.Vector3( 
              parseFloat(lines[i][1]),   
              parseFloat(lines[i][2]), 
              parseFloat(lines[i][3])) );
    }

    /*
    geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
    geometry.faces.push( new THREE.Face3( 600, 1, 3000 ) );
    geometry.faces.push( new THREE.Face3( 3000, 6400, 70 ) );
    */


    for(i=6449; i<19343; i++){
      geometry.faces.push( new THREE.Face3( parseInt(lines[i][1]), parseInt(lines[i][2]), parseInt(lines[i][3]) ) );
    }

    console.log(geometry.faces);
    console.log(geometry.vertices);


    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );
}

function animate() {
    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );
    render();
}

function render() {
    renderer.render( scene, camera );
}

When I inspect the console the faces and vertices have been printed out as expected. I also have this error printed out 5700+ times

Uncaught TypeError: Cannot read property 'visible' of undefined       Three.js:71
projectScene                                                          Three.js:71
render                                                               Three.js:245
render                                                          threeDemo.php:115
animate                                                         threeDemo.php:106

threeDemo.php:106 is this line of the animate function

render();

threeDemo.php:115 is this line of the render function

renderer.render( scene, camera );

Here is a link the the obj file that I am trying to create a mesh for. https://dl.dropbox.com/u/23384412/originalMeanModel.obj

Is anyone could point me in the right direction it would be really appreciated.

Thanks in advance.

Why not using OBJLoader for loading the different frames and using the parsed data for creating the new geometry? — mrdoob
Hi @mrdoob ! I need to show paths between vertices and click and select/highlight specific vertices. From looking at documentation I could only see a way of doing this by creating a mesh using geometry. If this isn't the case can you point me to some documentation/example? Thanks — TrueWheel
If you use OBJLoader then you have a geometry of it, right? If you have 2 frames, then you use OBJLoader two times and you have 2 geometries, right? Then you can read both geometries and create a third geometry with the lines that would go from the points of the first geometry to the second. — mrdoob
Thanks @mrdoob ! If that is the case could you take a look at my edited question as to why ray.intersectObjects(scene.children); doesn't work when I create the mesh using the obj loader. Thanks again! :) — TrueWheel
I think it's better if you create a new question for that. I can then post my answer as a proper answer for the original question. — mrdoob

mrdoob mrdoob · Accepted Answer · 2012-06-26T14:33:05

You can use two OBJLoaders for loading each frame geometry. Then create a third Geometry and create the lines using as reference the vertices from the frame geometries.

three.js - Creating mesh from .obj file using geometry.vertices and geometry.faces

1 Answers