How to show and hide an instance in instance mesh

Hello All,

I am following this article three.js examples and this is amazing.
Here i am wondering how to show and hide an instance.

Please provide some inputs.


In my work in progress, the digits 0 and 1 are hidden as needed.

See CPU-Simulation-8Bit

Press the green Run button.

2021-07-21 10.19.50

This topic was lately discussed at GitHub. You will find some pointers at the following issue:

1 Like

Its not very clear to me. I also want to ask that i asked before also.
For instance buffer geometry as i used shader material so shading is not working. You said to introduce the logic in shader and here i am using instance mesh with simple material like basic or standard so does it have a capability to have shadow for each instances.

I am also trying the setColorAt but it is saying setColorAt is not a function.

You probably using an outdated version of three.js. This method was added after the introduction of InstancedMesh.

I got one solution for this please correct me if i am wrong

instanceMesh.instanceMatrix, so i need to find the may matrix position in the array and remove and update this matrix so it will delete an instance and readding is simple by using setMatrix.

But this the solution of one problem, still have to see how i can do show/hide that is need still

Version is 0.116.1

Per instance color support was added with r120.

If you want to show/hide instances, it’s explained here: [Feature request] Add per-instance visibility support to InstanceMesh · Issue #22102 · mrdoob/three.js · GitHub

To be more precise, you define the visible instances with setMatrixAt() first, the invisible ones last. You then use the count property to define the draw range.

1 Like

Just out of curiousity, is setting scale of an instance to 0 not an option?


1 Like

Any example that you can share like fiddle or pen

that is what i am using and it works perfectly fine.

1 Like

Of course! The only thing is that you don’t save performance (unlike with defining a draw range).

1 Like

I have achieved the very dynamic visibility of the digits 0 and 1 respectively by setting the position to 0 and behind frustum far.

Is there a difference in performance compared to the method @prisoner849 ?

const M4 = new THREE.Matrix4( ); // helper matrix to position instanced meshes
const visible = 0;
const hidden = -8000;
const aspectRight  = containerRight.clientWidth / containerRight.clientHeight;
const cameraRight = new THREE.PerspectiveCamera( 55, aspectRight, 0.01, -hidden / 2  );
cameraRight.position.set( 0, 0, 26.5 );

function rf_binRAM( row ) {
	for ( let j = 0; j < 8 ; j ++ ) {
		if ( RAM[ row ][ 2 ][ j ] === '0' ) {
			visibilityRAM( iMeshDig0RAM, row, j, visible );
			visibilityRAM( iMeshDig1RAM, row, j, hidden );
		} else { // === '1'
			visibilityRAM( iMeshDig0RAM, row, j, hidden );
			visibilityRAM( iMeshDig1RAM, row, j, visible );
	iMeshDig0RAM.instanceMatrix.needsUpdate = true;
	iMeshDig1RAM.instanceMatrix.needsUpdate = true;

function visibilityRAM( iMesh, i, j, visibility ) {
	iMesh.setMatrixAt( i * 8 + j, M4.setPosition( RAMx( j ), RAMy( i ), visibility ) );

1 Like

My need here is to do the dynamic selection of the instances and than i want to hide the selected instances, setting draw range seems like its only during the initial creation

It is actually intended that the draw range is changed during runtime.