Question

我通过dat.gui上传了一个3D * .obj（例如一个立方体），它有8个顶点和6个面（顶点索引）。虽然我可以成功地将我的点移动到顶点，但我无法将它们均匀地分布在模型的面上。

到目前为止，这是我的流程：

（1）负荷对象文件

示例* .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 ITS VERTICES＆amp; FACES

我正在使用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）在视线上移动粒子

我有许多粒子，我将它们定位到顶点。这很好。

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

好吧 - 我花了一段时间，但我解决了。

我尝试了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 );



    }

在threejs中导入导入的* .obj面上的粒子

1 个答案: