インポートされた* .objの面を3jsで移動する

Question

dat.gui経由で、8つの頂点と6つの面（頂点インデックス）を持つ3D * .obj（キューブなど）をアップロードしています。頂点にポイントを移動することはできますが、モデルの面に均等に分布させることはできません。

これは、これまでのところ、私のプロセスです：

（1）LOADオブジェクトファイル

例* .objファイルは非常に簡単です：

v 5.526871 -3.827843 1.523720 
v 5.526871 -1.827843 1.523720 
v 5.526871 -3.827843 -0.476280 
v 5.526871 -1.827843 -0.476280 
v 7.526871 -3.827843 1.523720 
v 7.526871 -1.827843 1.523720 
v 7.526871 -3.827843 -0.476280 
v 7.526871 -1.827843 -0.476280 
s off 
f 2 4 3 1 
f 4 8 7 3 
f 8 6 5 7 
f 6 2 1 5 
f 1 3 7 5 
f 6 8 4 2 

（2）その頂点をTRIM &ファクス

私はRegExパターンを使用しています頂点と面をトリムして、それらをジオメトリにプッシュします。

var faces_pattern1 = /f(+[\d]+)([\d]+)([\d]+)([\d]+)?/g; // f vertex vertex vertex ... 
if ((result = faces_pattern1.exec(line)) !== null) { 
    faces_pattern1.exec(line); 
    if (result[ 4 ] === undefined) { 
     faces1.push([ 
      parseInt(result[ 1 ]) - 1, 
      parseInt(result[ 2 ]) - 1, 
      parseInt(result[ 3 ]) - 1 
     ]); 
    } else { 
     faces1.push([ 
      parseInt(result[ 1 ]) - 1, 
      parseInt(result[ 2 ]) - 1, 
      parseInt(result[ 3 ]) - 1, 
      parseInt(result[ 4 ]) - 1 
     ]); 
    } 
} 
// push faces to geometry 
for (var i = 0; i < faces1.length; i++) { 
    this.renderer.geometry.faces.push(new THREE.Face3(faces1[i][0], faces1[i][1], faces1[i][2], faces1[i][3])); 
} 

（3）VERTICES

I頂点への粒子の数、i個の位置を有するON MOVE粒子。これは正常に動作します。

var lg = allParticle.length; 
for(var i = 0; i < lg; i++){ 
    var p = allParticle[i]; 
    p.diffX = (vertices[h][0] * scale - p.x); 
    p.diffY = (-vertices[h][1] * scale - p.y); 
    p.diffZ = (-vertices[h][2] * scale - p.z); 
    h += 1; 
    if(h > nbVertices - 1) h = 0; 
} 

（4）粒子には、私は今は均等立方体の面上の同じ粒子を分散するトグルを有する

に面する分配します。私はGeometryUtils.randomPointsInGeometry

var randomPointPositions = THREE.GeometryUtils.randomPointsInGeometry(this.renderer.geometry, lg ); 
this.renderer.geometry.computeBoundingBox(); 
for(var i = 0; i < randomPointPositions.length; i++){ 

    var p = allParticle[i]; 
    p.diffX = randomPointPositions[i].x * scale ; 
    p.diffY = randomPointPositions[i].y * scale; 
    p.diffZ = randomPointPositions[i].z * scale ; 
} 

これは、顔の領域に均等にだけx軸上の点を配布していないを使用してこれを実行してみてください。すべての手がかりは？

- これらは、顔（THREE.Face3が）私は取得しています：

{a: 1, b: 3, c: 2, normal: T…E.Vector3, vertexNormals: Array[0]…} 
{a: 3, b: 7, c: 6, normal: T…E.Vector3, vertexNormals: Array[0]…} 
{a: 7, b: 5, c: 4, normal: T…E.Vector3, vertexNormals: Array[0]…} 
{a: 5, b: 1, c: 0, normal: T…E.Vector3, vertexNormals: Array[0]…} 
{a: 0, b: 2, c: 6, normal: T…E.Vector3, vertexNormals: Array[0]…} 
{a: 5, b: 7, c: 3, normal: T…E.Vector3, vertexNormals: Array[0]…} 

彼らの計算_areaは常にゼロです。

同様の質問： THREE.js - position particles evenly on objects faces rather than verticies

Answer 1

OK - それは私にしばらく時間がかかったが、私はそれを解決しました。

私はG.Profenzaが提案したOBJLoaderメソッドを試しました。

基本的にオブジェクトをロードし、そのメッシュを取得し、GeometryUtils.randomPointsinBufferGeometryを使用して、あなたが得るのVector3に粒子を移動させる：

OBJLoader: function() { 
     var manager = new THREE.LoadingManager(); 
     manager.onProgress = function (item, loaded, total) { 
      console.log(item, loaded, total); 
     }; 

     var onProgress = function (xhr) { 
      if (xhr.lengthComputable) { 
       var percentComplete = xhr.loaded/xhr.total * 100; 
       console.log(Math.round(percentComplete, 2) + '% downloaded'); 
      } 
     }; 

     var onError = function (xhr) { 
      console.log ("ERROR", xhr); 
     }; 

     var loader = new THREE.OBJLoader(manager); 
     var allParticle = this.scene.getParticles(); 
     var lg = allParticle.length; 
     var scale = this.renderer.scale;  
     loader.load('/data/cube_02.obj', function (object) { 
      object.traverse(function (child) { 
      if (child instanceof THREE.Mesh) { 
       console.log (" === CHILD === "); 
       console.log (child.geometry); 
       var randomPointPositions = THREE.GeometryUtils.randomPointsInBufferGeometry(child.geometry, lg ); 


       console.log (randomPointPositions[0].x, randomPointPositions[0].y, randomPointPositions[0].z); 


       for(var i = 0; i < randomPointPositions.length; i++){ 

        var p = allParticle[i]; 
        p.diffX = randomPointPositions[i].x * scale -p.x ; 
        p.diffY = randomPointPositions[i].y * scale -p.y; 
        p.diffZ = randomPointPositions[i].z * scale -p.z; 
       } 

      } 

     }); 


     //object.position.y = - 95; 
     //this.renderer.sceneGL.add(object); 

     }, onProgress, onError); 



    }