# .removeFromParent() doesnt remove all BoxGeometry faces?

**URL:** <https://discourse.threejs.org/t/removefromparent-doesnt-remove-all-boxgeometry-faces/33122>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [December 29, 2021, 8:21pm UTC](https://discourse.threejs.org/t/removefromparent-doesnt-remove-all-boxgeometry-faces/33122 "2021-12-29T20:21:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ItzArty](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/itzarty/32/14952_2.png) [@ItzArty](https://discourse.threejs.org/u/ItzArty)\
**Post date:** [December 29, 2021, 8:21pm UTC](https://discourse.threejs.org/t/removefromparent-doesnt-remove-all-boxgeometry-faces/33122/1 "2021-12-29T20:21:18Z")

</div>

So I have this chunk of BoxGeometries and using raycaster I can remove some of the geometries, for optimisation purposes I do not render faces which are obstructed by other boxes. Everything works fine, until I start removing some of the boxes. Some of the removed blocks just remove only like 2 faces and the rest is still visible, although it should remove the object directly from the scene. Im using material array, here is the essential code:

```javascript
var block_faces = [
	[0, 0, 5, "front"],
	[0, 5, 0, "top"],
	[5, 0, 0, "right"],
	[0, 0, -5, "back"],
	[0, -5, 0, "bottom"],
	[-5, 0, 0, "left"]
];

var chunks = [];

function block(x, y, z, type) {
	var root = this;
	this.position = new THREE.Vector3(x * 5, y * 5, z * 5);
	this.x = x * 5;
	this.y = y * 5;
	this.z = z * 5;
	if(!type) {
		type = "block";
	}
	this.type = type;
	this.renderFaces = [];

	this.getVoxel = function(x, y, z) {
		var _ret = true;
		chunks.forEach(function(chunk) {
			chunk.blocks.forEach(function(block) {
				if(block.x == x && block.y == y && block.z == z) {
					_ret = false;
				}
			});
		});
		return _ret;
	}

	this.getVoxelObj = function(x, y, z) {
		var _ret = false;
		chunks.forEach(function(chunk) {
			chunk.blocks.forEach(function(block) {
				if(block.x == x && block.y == y && block.z == z) {
					_ret = block;
				}
			});
		});
		return _ret;
	}

	this.render = function() {
		block_faces.forEach(function(i) {
			if(root.getVoxel(root.x + i[0], root.y + i[1], root.z + i[2]) == true) {
				root.renderFaces.push(i[3]);
			}
		});
		root.object = new THREE.Mesh(geometries["block"], [
			(root.renderFaces.includes("right") ? material[0] : new THREE.MeshBasicMaterial({ visible: false })),
			(root.renderFaces.includes("left") ? material[1] : new THREE.MeshBasicMaterial({ visible: false })),
			(root.renderFaces.includes("top") ? material[2] : new THREE.MeshBasicMaterial({ visible: false })),
			(root.renderFaces.includes("bottom") ? material[3] : new THREE.MeshBasicMaterial({ visible: false })),
			(root.renderFaces.includes("front") ? material[4] : new THREE.MeshBasicMaterial({ visible: false })),
			(root.renderFaces.includes("back") ? material[5] : new THREE.MeshBasicMaterial({ visible: false }))
		]);
		root.object.position.x = root.x;
		root.object.position.y = root.y;
		root.object.position.z = root.z;
		root.object.holder = root;
		scene.add(root.object);
	}

	this.break = function() {
		chunks.forEach(function(chunk) {
			chunk.blocks.forEach(function(block, index, object) {
				if(block.x == root.x && block.y == root.y && block.z == root.z) {
					object.splice(index, 1);
				}
			});
		});
		root.object.removeFromParent();
		root.triggerUpdate();
	}

	this.triggerUpdate = function() {
		block_faces.forEach(function(dir) {
			if(root.getVoxelObj(root.x + dir[0], root.y + dir[1], root.z + dir[2]) != false) {
				root.getVoxelObj(root.x + dir[0], root.y + dir[1], root.z + dir[2]).update();
			}
		});
	}

	this.update = function() {
		console.log("update");
		root.render();
	}

}

function chunk(x, z) {
	var root = this;
	this.x = x * 16 * 5;
	this.z = z * 16 * 5;
	this.blocks = [];
	for(var x = root.x; x < 16; x++) {
		for(var z = root.z; z < 16; z++) {
			for(var y = -1; y > -16; y--) {
				root.blocks.push(new block(x, y, z));
			}
		}
	}
	chunks.push(this);
	root.blocks.forEach(function(block) {
		block.render();
	});
}

new chunk(0, 0);

```

Insight (Both screenshots are from the same scene, only different angles, the edge block disappears correctly, the other one does not):

 ![ARTMC - Google Chrome 29. 12. 2021 21_26_05](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/4/0498f04ce1cc27546e432c5d3727c61275366eb6.png)  
 ![ARTMC - Google Chrome 29. 12. 2021 21_26_13](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/1/71597a73f351591b9aeb3b91af611ef49045c764.png)

Edit: Tried BoxBufferGeometry, nothing changes, some faces are still kept in the scene after removing the object.