three.js - 使用geometry.vertices和geometry.faces創建.obj文件中的網格

我想從.obj文件創建網格。我這樣做而不是使用obj加載器，因爲我使用不同的滑塊來變形形狀，選擇特定的面/頂點並在頂點之間繪製路徑。three.js - 使用geometry.vertices和geometry.faces創建.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是此行animate函數

render();

threeDemo.php的：115是此行渲染功能的

renderer.render(scene, camera);

這是一個鏈接，我試圖創建一個網格的obj文件。 https://dl.dropbox.com/u/23384412/originalMeanModel.obj

任何人都可以指出我在正確的方向，這將是非常感激。

在此先感謝。

來源

2012-06-25 TrueWheel

爲什麼不使用OBJLoader加載不同的幀並使用解析的數據來創建新的幾何？ – mrdoob

嗨@mrdoob！我需要顯示頂點之間的路徑，並單擊並選擇/高亮顯示特定的頂點。從查看文檔，我只能通過使用幾何創建網格來看到這樣做的方法。如果情況並非如此，你能否指點我一些文檔/示例？謝謝 – TrueWheel

如果你使用OBJLoader，那麼你有它的幾何，對吧？如果你有2幀，那麼你使用OBJLoader兩次，你有兩個幾何，對吧？然後，您可以讀取兩個幾何圖形，並使用從第一個幾何體的點到第二個幾何體的線創建第三個幾何體。 – mrdoob

您可以使用兩個OBJLoaders加載每個框架幾何體。然後創建第三個Geometry並使用作爲框架幾何圖形頂點的參考創建線條。

來源

2012-06-26 14:33:05 mrdoob

three.js - 使用geometry.vertices和geometry.faces創建.obj文件中的網格

回答

相關問題