docs(bufferGeometry): adding indexed version code example (#25824)

* docs(bufferGeometry): adding indexed version code example

* updating doc + adding 2 live examples

* Update BufferGeometry.html

* removing browser examples

* fixing sentences

* Update BufferGeometry.html

---------

Co-authored-by: Michael Herzog <[email protected]>

docs/api/en/core/BufferGeometry.html

@@ -20,18 +20,20 @@
 		</p>
 
 		<h2>Code Example</h2>
+
 		<code>
 		const geometry = new THREE.BufferGeometry();
+
 		// create a simple square shape. We duplicate the top left and bottom right
 		// vertices because each vertex needs to appear once per triangle.
 		const vertices = new Float32Array( [
-			-1.0, -1.0,  1.0,
-			 1.0, -1.0,  1.0,
-			 1.0,  1.0,  1.0,
+			-1.0, -1.0,  1.0, // v0
+			 1.0, -1.0,  1.0, // v1
+			 1.0,  1.0,  1.0, // v2
 
-			 1.0,  1.0,  1.0,
-			-1.0,  1.0,  1.0,
-			-1.0, -1.0,  1.0
+			 1.0,  1.0,  1.0, // v3
+			-1.0,  1.0,  1.0, // v4
+			-1.0, -1.0,  1.0  // v5
 		] );
 
 		// itemSize = 3 because there are 3 values (components) per vertex
@@ -40,6 +42,29 @@
 		const mesh = new THREE.Mesh( geometry, material );
 		</code>
 
+		<h3>Indexed version</h3>
+
+		<code>
+		const geometry = new THREE.BufferGeometry();
+
+		const vertices = new Float32Array( [
+			-1.0, -1.0,  1.0, // v0
+			 1.0, -1.0,  1.0, // v1
+			 1.0,  1.0,  1.0, // v2
+			-1.0,  1.0,  1.0, // v3
+		] );
+		geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
+
+		const indices = [
+			0, 1, 2,
+			2, 3, 0,
+		];
+		geometry.setIndex( indices );
+
+		const material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
+		const mesh = new THREE.Mesh( geometry, material );
+		</code>
+
 		<h2>Examples</h2>
 		<p>
 			[example:webgl_buffergeometry Mesh with non-indexed faces]<br />