【问题标题】:Geometry intersection converting from direct geometry to buffergeometry几何相交从直接几何转换为缓冲几何
【发布时间】:2017-03-27 17:10:43
【问题描述】:

我正在使用 Three.js。找到了一个由Benpurdy 编写的非常好的贴花库。它很容易修改,也使用了here 描述的技术

但是,该技术使用几何。我正在进行的项目使用 BufferGeometry。我跟踪了几何相交的代码,无法弄清楚从面和顶点到属性的转换。

this.createGeometry = function(matrix, mesh) {

  var geom = mesh.geometry;

  var decalGeometry = new THREE.Geometry(); 

  var projectorInverse = matrix.clone().getInverse(matrix);
  var meshInverse = mesh.matrixWorld.clone().getInverse(mesh.matrixWorld);
  var faces = [];

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

    var verts = [geom.faces[i].a, geom.faces[i].b, geom.faces[i].c];

    var pts = [];
    var valid = false;

    for(var v = 0; v < 3; v++) {

      var vec = geom.vertices[verts[v]].clone();

      vec.applyMatrix4(mesh.matrixWorld);
      vec.applyMatrix4(matrix);

      if((vec.z > 1) || (vec.z < -1) || (vec.x > 1) || (vec.x < -1) || (vec.y > 1) || (vec.y < -1)) {
      } else {
        valid = true;
      }

      pts.push(vec);
    }

    if(valid) {

      var uv = [];
      for(var n = 0; n < 3; n++){
        uv.push(new THREE.Vector2( (pts[n].x + 1) / 2, (pts[n].y + 1) / 2));

        pts[n].applyMatrix4(projectorInverse);
        pts[n].applyMatrix4(meshInverse);

        decalGeometry.vertices.push( pts[n] );
      }

      // update UV's
      decalGeometry.faceVertexUvs[0].push(uv);

      var newFace = geom.faces[i].clone();

      newFace.a = decalGeometry.vertices.length - 3;
      newFace.b = decalGeometry.vertices.length - 2;
      newFace.c = decalGeometry.vertices.length - 1;

      decalGeometry.faces.push(newFace);
    }

  }

  return decalGeometry;
}

如果有人可以阐明如何继续追求这一点,不胜感激?谢谢。

【问题讨论】:

    标签: three.js geometry buffer decal


    【解决方案1】:

    我最终通过编写另一个函数来计算与缓冲几何的交集来解决这个问题。我花了一些时间试图理解原始缓冲区几何代码。

    this.createGeometryFromBufferGeometry = function(matrix, mesh) {
    
      var geom = mesh.geometry;
    
      var decalGeometry = new THREE.Geometry(); 
    
      var projectorInverse = matrix.clone().getInverse(matrix);
      var meshInverse = mesh.matrixWorld.clone().getInverse(mesh.matrixWorld);
      var faces = [];
    
      for(var i = 0; i < geom.attributes.position.array.length; i+=9){
    
        var pts = [];
        var valid = false;
    
        for(var v = 0; v < 9; v+=3) {
    
    
          var vec = new THREE.Vector3(geom.attributes.position.array[i+v],geom.attributes.position.array[i+v+1],geom.attributes.position.array[i+v+2]);
          console.log((i+v) + " " + (i+v+1) + " " + (i+v+2) );
          console.log(vec);
    
          vec.applyMatrix4(mesh.matrixWorld);
          vec.applyMatrix4(matrix);
    
          if((vec.z > 1) || (vec.z < -1) || (vec.x > 1) || (vec.x < -1) || (vec.y > 1) || (vec.y < -1)) {
          } else {
            valid = true;
          }
    
          pts.push(vec);
        }
    
    
        if(valid) {
    
          var uv = [];
          for(var n = 0; n < 3; n++){
            uv.push(new THREE.Vector2( (pts[n].x + 1) / 2, (pts[n].y + 1) / 2));
    
            pts[n].applyMatrix4(projectorInverse);
            pts[n].applyMatrix4(meshInverse);
    
            decalGeometry.vertices.push( pts[n] );
          }
    
          decalGeometry.faceVertexUvs[0].push(uv);
    
          var newFace = new THREE.Face3()
    
          newFace.a = decalGeometry.vertices.length - 3;
          newFace.b = decalGeometry.vertices.length - 2;
          newFace.c = decalGeometry.vertices.length - 1;
    
          decalGeometry.faces.push(newFace);
        }
    
      }
      return decalGeometry;
    }
    

    【讨论】:

      【解决方案2】:

      BufferGeometry() 有一个方法.fromGeometry()Populates this BufferGeometry with data from a Geometry object.

      var geom = new THREE.BoxGeometry(1,1,1);
      var bufGeom = new THREE.BufferGeometry().fromGeometry(geom);
      

      UPD。你可以反过来使用。

      var bufGeom = new THREE.BoxBufferGeometry(1,1,1);
      var geom = new THREE.Geometry().fromBufferGeometry(bufGeom);
      

      【讨论】:

      • 谢谢,我试过了。虽然它有效,但我正在使用的“贴花”功能在中等大小的模型上很快变得昂贵且缓慢。但谢谢你。
      • 感谢您的更新。是的,这些将在几何和缓冲几何之间转换。我已经尝试过它们,如前所述,会导致内存从 200mb 增加到 900mb。我编写了一个解决方案,从根本上解决了这个问题,处理网格相交并创建一个能够处理缓冲几何的网格。
      【解决方案3】:

      快速而肮脏的解决方案是从 bufferGeometry 创建几何图形并在计算后处理创建的几何图形

      this.compute = function()
      {
         this.geometry = mesh.geometry
         if(this.geometry.attributes)
         {
              this.geometry = new THREE.Geometry().fromBufferGeometry(this.geometry);
              this.computeDecal();
              this.geometry.dispose();
          }
          else
          {
              this.computeDecal();
          }
      }
      

      【讨论】:

        猜你喜欢
        • 2021-12-21
        • 1970-01-01
        • 2021-06-17
        • 1970-01-01
        • 2019-07-07
        • 1970-01-01
        • 2021-11-16
        • 2023-03-31
        • 2021-06-15
        相关资源
        最近更新 更多