Three.js去除内面 [英] Three.js removing inner faces

问题描述

我合并多个多维数据集成不同的块形状与 three.js 使用 THREE.GeometryUtils.merge 。我希望让这些块形状透明的，但是当它是透明的，你可以看到它是粘在一起的这样的多个多维数据集：

如何让我的合并透明立方体，不会使内部边缘？ （我怎么去除内面？）

我的code，合并多维数据集：

 几何=新THREE.CubeGeometry（STEP_SIZE，STEP_SIZE，STEP_SIZE）;
对于（i = 0; I＆LT; shape.length;我++）{
    tmpGeometry =新THREE.Mesh（新THREE.CubeGeometry（STEP_SIZE，STEP_SIZE，STEP_SIZE））;
    tmpGeometry.position.x = STEP_SIZE *形状[I] .X;
    tmpGeometry.position.y = STEP_SIZE *形状[I] .Y;
    THREE.GeometryUtils.merge（几何，tmpGeometry）;
}

块=新THREE.Mesh（几何，新THREE.MeshBasicMaterial（{颜色：0x0000ff，不透明度：0.5，透明：真}））;
 

解决方案

经过一番尝试，我终于得到了我想要的东西。希望这将帮助其他人。

余经过块的每个面与光线投射块本身使用面部的质心和反转正常（使正常点向内）。如果用另一张面孔是那样的块的一部分相交，我们知道，那张脸是一个内表面，我们可以继续前进，将其删除。

  //块是Three.Mesh对象
功能removeInternalFaces（块）{
    VAR几何= block.geometry;
    VAR的脸;
    变种toDelete = [];
    VAR blockRaycaster =新THREE.Raycaster（）;

    //从每个面（否定标准）的中心光线投射本身，无论脸上被相交
    //是一个内面
    对于（i = 0; I＆LT; geometry.faces.length;我++）{
        FACE = geometry.faces [I]
        如果（面）{
            正常= face.normal.clone（）;
            normal.negate（）;
            blockRaycaster.set（face.centroid，正常）;
            相交= blockRaycaster.intersectObject（块）;
            为（J = 0; J＆LT; intersects.length; J ++）{
                toDelete.push（相交[J] .faceIndex）;
            }
        }
    }

    //实际上删除
    对于（i = 0; I＆LT; toDelete.length;我++）{
        删除geometry.faces [toDelete [I]];
    }
    geometry.faces = geometry.faces.filter（函数（V）{返回伏;}）;
    geometry.elementsNeedUpdate = TRUE; //更新的面孔
}
 

I am merging multiple cubes into different block shapes with three.js using THREE.GeometryUtils.merge. I want to make these block shapes transparent, but when it's transparent you can see that it's multiple cubes stuck together like this:

How do I make my merged cubes transparent without rendering the inside edges? (how do I remove the inner faces?)

My code that merges the cubes:

geometry = new THREE.CubeGeometry(STEP_SIZE, STEP_SIZE, STEP_SIZE);
for (i = 0; i < shape.length; i++) {
    tmpGeometry =  new THREE.Mesh(new THREE.CubeGeometry(STEP_SIZE, STEP_SIZE, STEP_SIZE));
    tmpGeometry.position.x = STEP_SIZE * shape[i].x;
    tmpGeometry.position.y = STEP_SIZE * shape[i].y;
    THREE.GeometryUtils.merge(geometry, tmpGeometry);
}

block = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.5, transparent: true }));

解决方案

After some experimenting I finally got what I wanted. Hope this will help other people.

I go through each face of the block and raycast the block itself using the face's centroid and inverted normal (so that the normal points inward). If it intersects with another face that's part of the block, we know that that face is an inner face and we can go ahead and remove it.

// block is a Three.Mesh object
function removeInternalFaces(block) {
    var geometry = block.geometry;
    var face;
    var toDelete = [];
    var blockRaycaster = new THREE.Raycaster();

    // raycast itself from the center of each face (negated normal), and whichever face gets intersected
    // is an inner face
    for (i = 0; i < geometry.faces.length; i++) {
        face = geometry.faces[i];
        if (face) {
            normal = face.normal.clone();
            normal.negate();
            blockRaycaster.set(face.centroid, normal);
            intersects = blockRaycaster.intersectObject(block);
            for (j = 0; j < intersects.length; j++) {
                toDelete.push(intersects[j].faceIndex);
            }
        }
    }

    // actually delete them
    for (i = 0; i < toDelete.length; i++) {
        delete geometry.faces[toDelete[i]];
    }
    geometry.faces = geometry.faces.filter( function(v) { return v; });
    geometry.elementsNeedUpdate = true; // update faces
}

这篇关于Three.js去除内面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！