Problems with instanced mesh not displaying anything

Questions
1

The instancedmesh is created

with const instancedMesh = new THREE.InstancedMesh(geometry, material, maxInstances);

where maxInstances is > 0

Immediately after it, if I set instancedMesh.count to 0, even after changing instancedMesh.count, nothing is is displayed. What I am I doing wrong?

import * as THREE from "three";
import * as dat from "dat.gui";

// Set up scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(-1.2, -1.2, -1.2);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Set up instanced mesh
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);

const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true,
});

const maxInstances = 10;
const instancedMesh = new THREE.InstancedMesh(geometry, material, maxInstances);
scene.add(instancedMesh);

// Set up GUI
const gui = new dat.GUI();
const params = {
  count: 0, // When this it set to 0, the problem occurs
};

gui.add(params, "count", 0, maxInstances, 1).onChange(updateInstances);

updateInstances();

// Update instances based on GUI slider
function updateInstances() {
  instancedMesh.count = params.count;
  const dummy = new THREE.Object3D();
  for (let i = 0; i < params.count; i++) {
    dummy.position.set(Math.random() - 2, Math.random() - 2, Math.random() - 7);
    dummy.rotation.set(
      Math.random() * Math.PI,
      Math.random() * Math.PI,
      Math.random() * Math.PI
    );
    dummy.updateMatrix();
    instancedMesh.setMatrixAt(i, dummy.matrix);
  }
  instancedMesh.instanceMatrix.needsUpdate = true;
}

// Set up animation
const animate = function () {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
};

animate();

Link to codesandbox

2

Hi.

The problem is due to frustum culling.
Try to update bounding sphere after you reset instances. If the count is 0 the bounding sphere is empty (radius = -1 and center 0,0,0).

instancedMesh.computeBoundingSphere();

or disable frustum culling

instancedMesh.frustumCulled = false;
3

Thank you for solving my problem, it wasn’t immediately obvious why.

1 Like