從直接幾何體到緩衝幾何體的幾何相交轉換

Question

我正在使用Three.js。發現了一個非常好的Decal庫，由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; 
} 

感謝有沒有人能說出如何去追求這個？謝謝。

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

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

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