My attempt to create a simple rectangle using THREE.BufferGeometry() has proven fruitless. Below is the code snippet I used:
var geometry = new THREE.BufferGeometry();
var material = new THREE.MeshBasicMaterial({color: 'rgb(255, 0, 0)'});
var verticesArray = [20, 0, 0, 0, 20, 0, -20, 0, 0, 0, -20, 0];
var vertices = new Float32Array(verticesArray, 0, 12);
var indicesArray = [0, 1, 2, 0, 2, 3];
var indices = new Uint16Array(indicesArray, 0, 6);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
//geometry.addAttribute('index', new THREE.BufferAttribute(indices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 3));
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Despite following what I believe to be the correct process with four vertices and two sets of indices in counter-clockwise order, the result is not as expected. There are no errors thrown either. Can anyone identify where the issue might lie?