Instanced cube geometry not showing

Questions
1

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

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 and uploading this file:
testworld4.zip (45.5 KB)

2

Hi!
Why do you set the third parameter of InstancedMesh as 0?
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)

2 Likes
3

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.

4

It now works

1 Like