使用 geometry.vertices 和 geometry.faces 从 .obj 文件创建网格

Creating mesh from .obj file using geometry.vertices and geometry.faces

本文关键字:geometry obj 文件创建 网格 faces vertices 使用      更新时间:2023-09-26

我正在尝试从.obj文件创建一个网格。我这样做而不是使用 obj 加载器,因为我使用不同的滑块变形形状,选择特定的面/顶点并在顶点之间绘制路径。

我目前在尝试渲染场景时遇到错误,这似乎与 obj 文件中的面孔有关。当我手动输入面时,我可以创建一个三角形没有问题。

这是我的代码

   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 );
}

当我检查控制台时,面和顶点已按预期打印出来。我也打印了这个错误5700+次

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 是动画函数的这一行

render();

threeDemo.php:115 是渲染函数的这一行

renderer.render( scene, camera );

这是我尝试为其创建网格的obj文件的链接。 https://dl.dropbox.com/u/23384412/originalMeanModel.obj

有谁可以指出我正确的方向,将不胜感激。

提前谢谢。

您可以使用

两个OBJLoaders来加载每个帧几何体。然后创建第三个Geometry并使用帧几何中的顶点作为参考来创建线。