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);
scene.add(mesh);
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);
transform.updateMatrix();
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() {
camera.updateProjectionMatrix();
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.