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

입니다. 106 애니메이션 기능

render();

threeDemo.php이 라인이다 : 또한이 오류

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가 5700+ 회

를 인쇄 한 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를 두 번 사용하면 2 개의 기하학을 갖게됩니다. 맞습니까? 그런 다음 두 기하학을 모두 읽고 첫 x 째 기하학 점에서 두 x 째 기하학 점으로 이동할 행으로 세 x 째 기하학을 작성할 수 있습니다. – mrdoob

각 프레임 형상을로드하는 데 두 개의 OBJLoaders을 사용할 수 있습니다. 그런 다음 세 번째 Geometry을 만들고 프레임 구조의 정점을 참조로 사용하여 선을 만듭니다.

출처

2012-06-26 14:33:05 mrdoob

three.js - geometry.vertices 및 geometry.faces를 사용하여 .obj 파일에서 메쉬 만들기

답변

관련 문제