Hello THREE.js users,
I am trying to delete the inner faces of a merged geometry. Looking through stackoverflow, discourse and other internet sites i have tried to piece together something that should be a simple example. For the most part the geometry is visible. But I can not seem to remove the inner faces of the whole geometry. It is a two by two cube that shows four total. The problem is in the function called removeDuplicateFaces() I had created. Any help with this is greatly appreciated. Thanks.
var scene , camera , renderer , controls;
var mesh;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 1000;
function init ( ) {
scene = new THREE.Scene ( );
camera = new THREE.PerspectiveCamera ( VIEW_ANGLE , ASPECT , NEAR , FAR );
camera.position.set ( 5 , 5 , 5 );
camera.lookAt ( scene.position );
renderer = new THREE.WebGLRenderer ( {
antialias: true
} );
renderer.setPixelRatio ( window.devicePixelRatio );
renderer.setSize ( SCREEN_WIDTH , SCREEN_HEIGHT );
document.body.appendChild ( renderer.domElement );
controls = new THREE.OrbitControls ( camera , renderer.domElement );
var mergedGeometry = new THREE.Geometry ( );
var geometry = new THREE.BoxGeometry ( 1 , 1 , 1 );
var i;
var k;
var x;
var y;
var z;
for ( i = 0; i < 2; i += 1 ) {
for ( k = 0; k < 2; k += 1 ) {
x = i;
y = 0;
z = k;
geometry.translate ( x , y , z );
mergedGeometry.merge ( geometry );
geometry.translate ( -x , -y , -z );
}
}
// the function to remove inner faces
function removeDuplicateFaces ( geometry ) {
var m;
var n;
var face;
var face2;
for ( m = 0; m < geometry.faces.length; m += 1 ) {
face = geometry.faces[m];
face.centroid = new THREE.Vector3 ( 0 , 0 , 0 );
face.centroid.add ( geometry.vertices[ face.a ] );
face.centroid.add ( geometry.vertices[ face.b ] );
face.centroid.add ( geometry.vertices[ face.c ] );
face.centroid.divideScalar ( 3 );
console.log ( "[face] " + m + ", [vertices] " + face.a + ", " + face.b + ", " + face.c );
for ( n = 0; n < m; n += 1 ) {
face2 = geometry.faces[n];
if ( face2 !== undefined ) {
face2.centroid = new THREE.Vector3 ( 0 , 0 , 0 );
face2.centroid.add ( geometry.vertices[ face2.a ] );
face2.centroid.add ( geometry.vertices[ face2.b ] );
face2.centroid.add ( geometry.vertices[ face2.c ] );
face2.centroid.divideScalar ( 3 );
console.log ( "[face2] " + n + ", [vertices] " + face2.a + ", " + face2.b + ", " + face2.c );
if ( face.centroid.equals ( face2.centroid ) ) {
delete geometry.faces[m];
delete geometry.faces[n];
}
}
}
}
return geometry;
}
removeDuplicateFaces ( mergedGeometry );
var material1 = new THREE.MeshBasicMaterial ( { color: 0xff0000 , wireframe: true , side: THREE.DoubleSide } );
var material2 = new THREE.MeshBasicMaterial ( { color: 0x00ff00 , wireframe: true , side: THREE.DoubleSide } );
var material3 = new THREE.MeshBasicMaterial ( { color: 0x0000ff , wireframe: true , side: THREE.DoubleSide } );
var material4 = new THREE.MeshBasicMaterial ( { color: 0xff00ff , wireframe: true , side: THREE.DoubleSide } );
//var materialTransparent = new THREE.MeshBasicMaterial ( { transparent: true , opacity: 0 , wireframe: true , side: THREE.DoubleSide } );
var materials = [ material1 , material2 , material2 , material3 , material3 , material4 ];
mesh = new THREE.Mesh ( mergedGeometry , materials );
scene.add ( mesh );
}
function render ( ) {
renderer.render ( scene , camera );
}
function update ( ) {
controls.update ( );
}
function animate ( ) {
requestAnimationFrame ( animate );
render ( );
update ( );
}
init ( );
animate ( );
are on me. I appreciate your help on this.
