# Instanced cube geometry not showing

**URL:** <https://discourse.threejs.org/t/instanced-cube-geometry-not-showing/15075>\
**Category:** Questions\
**Created:** [May 10, 2020, 10:04pm UTC](https://discourse.threejs.org/t/instanced-cube-geometry-not-showing/15075 "2020-05-10T22:04:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dullbananas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dullbananas/32/10850_2.png) [@dullbananas](https://discourse.threejs.org/u/dullbananas)\
**Post date:** [May 10, 2020, 10:04pm UTC](https://discourse.threejs.org/t/instanced-cube-geometry-not-showing/15075/1 "2020-05-10T22:04:27Z")

</div>

I have this code that is supposed to display a cube and allow me to move around with arrow keys:

```auto
let scene = new THREE.Scene();

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

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

renderer.setSize(window.innerWidth, window.innerHeight);

// Geometry

let geometry = new THREE.BoxBufferGeometry(1, 1, 1);
let material = new THREE.MeshNormalMaterial();
let cubeMesh = new THREE.InstancedMesh(geometry, material, 0);

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

transform.position.set(0, 0, 0);
transform.updateMatrix();
cubeMesh.setMatrixAt(0, transform.matrix);

scene.add(cubeMesh);

camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0);

// Rendering loop

const moveDist = 0.1;

function renderFrame() {
	if (currentKeys.w) {
		camera.translateZ(-moveDist);
	}
	if (currentKeys.s) {
		camera.translateZ(moveDist);
	}
	if (currentKeys.a) {
		camera.translateX(-moveDist);
	}
	if (currentKeys.d) {
		camera.translateX(moveDist);
	}
	if (currentKeys.i) {
		camera.translateY(moveDist);
	}
	if (currentKeys.k) {
		camera.translateY(-moveDist);
	}
	if (currentKeys.j) {
		camera.rotateY(0.03);
	}
	if (currentKeys.l) {
		camera.rotateY(-0.03);
	}
	// Render frame only if a key is being pressed
	if ( Object.values(currentKeys).some((a: boolean) => a) ) {
		forceRenderFrame();
		console.log("frame rendered");
	}
}

export function forceRenderFrame() {
	renderer.render(scene, camera);
}

export function renderLoop() {
	requestAnimationFrame(renderLoop);
	renderFrame();
}

// Controls

// Maps keys to booleans telling if the keys are down
let currentKeys: any = {};

export function startKeyEvents() {
	document.body.onkeydown = function(event) {
		currentKeys[event.key] = true;
	};

	document.body.onkeyup = function(event) {
		currentKeys[event.key] = false;
	};
};

```

It used to be able to show the cube and let me move around as expected. But then I decided to use instanced rendering because I will eventually need to add more cubes. Now I don’t see anything. How do I properly use instanced rendering?

You can try it by going to [https://dulldev.pythonanywhere.com/editsc/editor](https://dulldev.pythonanywhere.com/editsc/editor) and uploading this file:  
[testworld4.zip](https://discourse.threejs.org/uploads/short-url/yVGO8oq6plZyjVgXFdNiTYEKcDe.zip) (45.5 KB)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 10, 2020, 10:28pm UTC](https://discourse.threejs.org/t/instanced-cube-geometry-not-showing/15075/2 "2020-05-10T22:28:27Z")

</div>

Hi!  
Why do you set the third parameter of `InstancedMesh` as `0`?  
[https://threejs.org/docs/index.html#api/en/objects/InstancedMesh.count](https://threejs.org/docs/index.html#api/en/objects/InstancedMesh.count)  
Try it like this: `new THREE.InstancedMesh(geometry, material)` or `new THREE.InstancedMesh(geometry, material, 1)`

---

<div class="post-metadata">

**Author:** ![dullbananas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dullbananas/32/10850_2.png) [@dullbananas](https://discourse.threejs.org/u/dullbananas)\
**Post date:** [May 10, 2020, 10:43pm UTC](https://discourse.threejs.org/t/instanced-cube-geometry-not-showing/15075/3 "2020-05-10T22:43:00Z")

</div>

Wow I can’t believe I actually did that. I will try changing it from 0 to 1 when I get a chance to work on this project.

---

<div class="post-metadata">

**Author:** ![dullbananas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dullbananas/32/10850_2.png) [@dullbananas](https://discourse.threejs.org/u/dullbananas)\
**Post date:** [May 10, 2020, 11:10pm UTC](https://discourse.threejs.org/t/instanced-cube-geometry-not-showing/15075/4 "2020-05-10T23:10:36Z")

</div>

It now works