How to use instance geometry?

Questions
1

How to make this code work? It renders a cube with a normal mesh but doesn’t work if I change it to instanced. Thank you!

const renderer = new THREE.WebGLRenderer({
  antialias: false,
  alpha: true,
  canvas: document.querySelector('#main_canvas'),
});
renderer.setPixelRatio(window.devicePixelRatio);

const [cw, ch] = [400, 400];
const camera = new THREE.OrthographicCamera(-cw / 2, cw / 2, ch / 2, -ch / 2, 0, 100);

const mesh = new THREE.InstancedMesh(
	new THREE.BoxBufferGeometry(10, 10, 10, 1, 1, 1), 
  new THREE.MeshPhongMaterial({ color: 0xffaa00 }), 
  10);
mesh.position.set(0, 0, -50);

const scene = new THREE.Scene().add(mesh);

const lightD = new THREE.DirectionalLight(0xffffff, 1);
lightD.position.set(20, 30, 100);
scene.add(lightD);

renderer.render(scene, camera);

https://jsfiddle.net/tfoller/94cd0e1r/4/

2

You have to define the transformations of the instances via InstancedMesh.setMatrixAt(): https://jsfiddle.net/3rjna4ce/2/

2 Likes