Just started experimenting with three.js.
I decided to test a polygon using the code below:
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array([
2.0, 1.0, 1.0, -1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 2.0, -1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
]);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
var material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
I was anticipating the polygon to be red on all sides, but it turned out only one side is red while the other appears black.
Any tips on how I can resolve this issue?
I tried creating a fiddle link, but it's not functioning as expected (full code of my test file can be accessed here):
JSfiddle
Rotate the polygon horizontally by moving the mouse left or right.