删除three.js中的相邻面 [英] Remove adjoining faces in three.js

问题描述

我正在尝试优化基于图像像素数据渲染立方体的场景:

I'm trying to optimize a scene where I'm rendering cubes based off of an image's pixel data:

http://jsfiddle.net/majman/4sukB/

代码只是检查图像中的每个像素并创建 &相应地定位立方体网格.

The code simply checks each pixel in an image and creates & positions a cube mesh accordingly.

但是，正如您在打开线框时所看到的那样，有大量不必要的内部面.

However, as you can see if you toggle wireframes on, there is an abundance of unnecessary internal faces.

我正在使用 mergeVertices 以及 THREE.GeometryUtils.merge - 所以部分优化了.

I am using mergeVertices as well as THREE.GeometryUtils.merge - so things are partially optimized.

我遇到了这种方法比较合并几何体的所有面，但因为每个立方体面现在都是一对三角形 - 它们很难比较，因为相邻面的两个三角形将被翻转.

I ran across this approach of comparing all the faces of merged geometry, but because each cube face is now a pair of tri's - they are difficult to compare as the two triangles of adjoining faces will be flipped.

我也看过《我的世界》示例，但我一直无法理解这种方法.

I've also looked at the minecraft example, but I havne't been able to wrap my head around that approach.

推荐答案

好的，在 WestLangley 的帮助下 - 我能够到达那里.

Ok, with WestLangley's help - I was able to get there.

http://jsfiddle.net/majman/4sukB/2/

费了一番功夫才弄清楚要在 buildPlane 中调整哪些面.之后，比较质心就相对简单了:

Took some fiddling to figure out which faces to adjust within buildPlane. After that, comparing centroids was relatively straight forward:

        function removeDuplicateFaces(geometry){
            for(var i=0; i<geometry.faces.length; i++){
                var centroid = geometry.faces[i].centroid;
                for(var j=0; j < i; j++){
                    var f2 = geometry.faces[j];
                    if( f2 !== undefined ){
                        var centroid2 = f2.centroid;
                        if(centroid.equals(centroid2)){
                            delete geometry.faces[i];
                            delete geometry.faces[j];
                        }
                    }
                }
            }
            geometry.faces = geometry.faces.filter( function(a){ return a!== undefined });
            return geometry;
        }

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