JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;

var createRibbon = function(mesh, pathArray, close, offset, scene) {
  var positions = [];
  var indices = [];
  var normals = [];
  var lg = [];        // array of path lengths : nb of vertex per path
  var idx = [];       // array of path indexes : index of each path (first vertex) in positions array

  // traiter ici le cas un seul path avec le offset

  // positions
  var idc = 0;
  for(var p = 0; p < pathArray.length; p++) {
    var path = pathArray[p];
    var l = path.length;
    lg[p] = l;
    idx[p] = idc;
    var j = 0;
    while (j < l) {
      positions.push(path[j].x, path[j].y, path[j].z);
      j++;
    }
    idc += l;
  }

  // indices
  var p = 0;                    // path index
  var i = 0;                    // positions array index
  var l1 = lg[p] - 1;           // path1 length
  var l2 = lg[p+1] - 1;         // path2 length
  var min = ( l1 < l2 ) ? l1 : l2 ;   // index d'arrêt de i dans le path en cours
  while ( i <= min && p < lg.length -1 ) { // on reste sur le min des deux paths et on ne va pas au delà de l'avant-dernier
    var shft = idx[p+1] - idx[p];          // shift 
      // draw two triangles between path1 (p1) and path2 (p2) : (p1.i, p2.i, p1.i+1) and (p2.i+1, p1.i+1, p2.i) clockwise
      indices.push(i, i+shft, i+1);
      indices.push(i+shft+1, i+1, i+shft);  
    i += 1;
    if ( i == min  ) {                      // dès qu'on atteint la fin d'un des deux paths consécutifs, on passe au suivant s'il existe
      if (close) {                          // if close, add last triangles between start and end of the paths
        indices.push(i, i+shft, idx[p]);
        indices.push(idx[p]+shft, idx[p], i+shft);
      }
      p++;
      l1 = lg[p] - 1;
      l2 = lg[p+1] - 1;
      i = idx[p];
      min = ( l1 < l2 ) ? l1 + i : l2 + i;
    }
  }  
  const positionNumComponents = 3;
  const normalNumComponents = 3;
  const uvNumComponents = 2;
 ...