Question

我使用three.js将多个多维数据集合并到THREE.GeometryUtils.merge的不同块形状中。我想让这些块形状透明，但是当它透明时你可以看到它是多个立方体粘在一起像这样：

merged 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 }));

Answer 1

经过一些实验，我终于得到了我想要的东西。希望这会有助于其他人。

我遍历块的每个面，并使用面部的质心和正常倒置（使正常点向内）对块本身进行光线投射。如果它与另一个是块的一部分相交，我们知道那张脸是一张内脸，我们可以继续将它移除。

// 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
}

Answer 2

你可以分别初始化立方体的每个面材料，并分别将内面的不透明度设置为0.代码将是这样的。

    var materialArray = [];

        materialArray.push(new THREE.MeshLambertMaterial({
            opacity:0,
            color:0x0000FF,
            transparent: true
        }));// assuming you want this face to be transparent 
        materialArray.push(new THREE.MeshLambertMaterial({
            opacity:0,
            color:0x0000FF,
            transparent: true
        }));// assuming you want this face to be transparent
        materialArray.push(new THREE.MeshLambertMaterial({
            opacity:0.5,
            color:0x0000FF,
            transparent: true
        }));
        materialArray.push(new THREE.MeshLambertMaterial({
            opacity:0.5,
            color:0x0000FF,
            transparent: true
        }));
        materialArray.push(new THREE.MeshLambertMaterial({
            opacity:0.5,
            color:0x0000FF,
        transparent: true
        }));
        materialArray.push(new THREE.MeshLambertMaterial({
            opacity:0.5,
            color:0x0000FF,
            transparent: true
        }));
        var CubeMat = new THREE.MeshFaceMaterial(materialArray);

并将其传递给您的立方体网格。

block = new THREE.Mesh(geometry,CubeMat )

检查此JsFiddle以获取演示

Three.js删除内部面孔

2 个答案: