Instanced cube not showing when viewed from certain perspectives unless position is 0, 0, 0

I had this cube working fine, but when I set its position to something other than (0, 0, 0), it became invisible when looked at depending on where I am viewing it from. None of the objects are transparent.

This is some of the source code:

scene.autoUpdate = true;

let camera = new THREE.PerspectiveCamera(
	75, // field of view
	window.innerWidth / window.innerHeight, // aspect ratio
	0.1, // near clipping plane
	32, // far clipping plane

let renderer = new THREE.WebGLRenderer({
	canvas: document.getElementById('world-canvas') as HTMLCanvasElement,
	precision: 'mediump',
	stencil: false,

let voxelGeometry = new THREE.BoxBufferGeometry(1, 1, 1);

let material = new THREE.MeshNormalMaterial();

function newVoxelMesh(count: number): THREE.InstancedMesh {
	let mesh = new THREE.InstancedMesh(voxelGeometry, material, count);
	return mesh;

// Used to hold the matrix that will be applied to objects
let transform = new THREE.Object3D();

function addVoxel(index: number, mesh: THREE.InstancedMesh, x: number, y: number, z: number) {
	transform.position.set(x, y, z);
	mesh.setMatrixAt(index, transform.matrix);

let tmpMesh = newVoxelMesh(1);
addVoxel(0, tmpMesh, 0, 0, 4);

camera.position.set(0, 0, 8);
camera.lookAt(0, 0, 4);

function renderFrame() {
	renderer.render(scene, camera);

I tried doing many things to fix this, like using Camera.updateProjectionMatrix(), turning on auto matrix update, and even switching to orthographic camera. I found a possible solution which is to disable Object3D.frustumCulled, but this will cause performance issues when I add more voxel geometry in the future.

Can you try to increase your camera with a higher far plane value? Besides, can you try to remove the precision parameter from WebGLRenderer ctor? Do you see any effects?

1 Like

I tried both and it still does not work correctly.

Related to Culling does not know about all of the instances. You may need to disable it or set a manual bounding box for now.

1 Like

I tried changing the background color of the scene to see if the cube is just turning black, and it’s not. I also tried switching to MeshDepthMaterial and it still does not work.

I disabled frustumCulled for now

View frustum culling is deactivated by default for InstancedMesh:

So I don’t think you have to disable it in your application.