title: update indices of a bufferGeometry every frame in three.js
body: <p><strong>I have to update indices of a bufferGeometry in loop function, but only indices which are not assigned can be updated.</strong> If the element of index array be assigned value, it can't be assigned a new value in next time.I search some issues, such as <code>mesh.geometry.index.needsUpdate = true;</code>, but it is no effect.</p>
  
  <p>It is my code which create a new Mesh by bufferGeometry.</p>
  
  <pre><code>    var geometry = new THREE.BufferGeometry();
  
      var pBuff = new ArrayBuffer(MAX_POINTS*3*4);
      var positions = new Float32Array(pBuff);
  
      var indices = new ArrayBuffer(MAX_POINTS*2*3);
      var iIndices = new Uint16Array(indices);
  
      positions[0] = 1.0;
      positions[1] = 1.0;
      positions[2] = 1.0;
  
      positions[3] = 1.0;
      positions[4] = 1.0;
      positions[5] = -1.0;
  
      positions[6] = -1.0;
      positions[7] = 1.0;
      positions[8] = -1.0;
  
      positions[9] = -1.0;
      positions[10] = 1.0;
      positions[11] = 1.0;
  
      positions[12] = 1.0;
      positions[13] = -1.0;
      positions[14] = 1.0;
  
      positions[15] = 1.0;
      positions[16] = -1.0;
      positions[17] = -1.0;
  
      positions[18] = -1.0;
      positions[19] = -1.0;
      positions[20] = -1.0;
  
      positions[21] = -1.0;
      positions[22] = -1.0;
      positions[23] = 1.0;
  
      iIndices[0] = 0;
      iIndices[1] = 1;
      iIndices[2] = 2;
  
      iIndices[3] = 2;
      iIndices[4] = 3;
      iIndices[5] = 0;
  
      geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
      geometry.setIndex(new THREE.BufferAttribute(iIndices, 1));
      cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 'rgb(255, 255, 0)', side: THREE.DoubleSide}));
  
      scene.add(cube);
  </code></pre>
  
  <p>It is my code which update indices in loop function.</p>
  
  <pre><code>var iIndices = cube.geometry.getIndex();
  if(change_index){
      iIndices[0] = 0;
      iIndices[1] = 1;
      iIndices[2] = 2;
  
      iIndices[3] = 2;
      iIndices[4] = 3;
      iIndices[5] = 0;
  
      change_index = false;
  }else{
      iIndices[0] = 4;
      iIndices[1] = 5;
      iIndices[2] = 6;
  
      iIndices[3] = 6;
      iIndices[4] = 7;
      iIndices[5] = 4;
      change_index = true;
  }
  cube.geometry.index.needsUpdate = true;
  
  cube.geometry.setDrawRange( 0, 6 );
  </code></pre>
  
  <p>It is the render result.</p>
  
  <p><a href="https://i.stack.imgur.com/H7ijH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H7ijH.png" alt="enter image description here"></a></p>
  
  <p>only the first assigned index can be keep. such as, indices([0,1,2,2,3,0]) is valid. When I set new value next time, indices([4,5,6,6,7,4]) is invalid.</p>
  
  <p>I search some issues.such as, <code>cube.geometry.index.needsUpdate = true;</code> is invalid.Others, <code>geometry.addAttribute('indices', new THREE.BufferAttribute(new Float32Array(iIndices), 3));</code> and update <code>cube.geometry.attributes.indices.array;</code>. It is invalid.</p>
  
  <p><strong>How can I update these indices of the bufferGeometry in loop function?</strong></p>
  
  <p>When I try some method to solve it, I find a low method which have a new problem. How to optimize it.</p>
  
  <p>This is my method.</p>
  
  <pre><code>var iIndices = cube.geometry.index.array.subarray(0, 6);
  if(change_index){
      iIndices[0] = 0;
      iIndices[1] = 1;
      iIndices[2] = 2;
  
      iIndices[3] = 6;
      iIndices[4] = 7;
      iIndices[5] = 4;
  
      change_index = false;
  }else{
      iIndices[0] = 4;
      iIndices[1] = 5;
      iIndices[2] = 6;
  
      iIndices[3] = 2;
      iIndices[4] = 3;
      iIndices[5] = 0;
      change_index = true;
  }
  cube.geometry.index.needsUpdate = true;
  </code></pre>
  
  <p>This is the result(before).</p>
  
  <p><a href="https://i.stack.imgur.com/SAo85.png" rel="nofollow noreferrer">result01</a></p>
  
  <p>This is the result(after).</p>
  
  <p><a href="https://i.stack.imgur.com/06KXr.png" rel="nofollow noreferrer">result02</a></p>
  
  <p>The vertices of geometry is invariant, but the indices of geometry(<strong>result01</strong>) is [0,1,2,2,3,0] and the indices of geometry(<strong>result02</strong>) is [4,5,6,6,7,4].When the geometry is rendered, the indices is updated every frame between result01 and result02.</p>
  
  <p>But, The method only support <code>new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({wireframe: false}));</code>. When <code>wireframe=true</code>, the indices of geometry fail to updated.</p>
  
  <p><strong>How to optimize it When <code>wireframe=true</code>?</strong></p>