JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawcdn.githack.com/Fyrestar/THREE.BufferGeometry-toIndexed/master/BufferGeometryToIndexed.js"></script>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);


var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

 controls = new THREE.OrbitControls(camera, renderer.domElement);


var geom = new THREE.BoxBufferGeometry(8, 8).toNonIndexed();
var mat = new THREE.MeshBasicMaterial({
  color: "blue"
});
/* var mesh = new THREE.Mesh(geom, mat);
scene.add(mesh); */

  const geometry = new THREE.BufferGeometry();
  
const MAX_POINTS = 500;

var pos = [



		   1.0,  1.0,  1.0,
	      -.5, -1.0, 1.0,
	      .5, -1.0, 1.0,

    
    
     -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,
    
    
    
     
		/* 1.0,  1.0,  1.0,
		  -1.0,  1.0,  1.0,
		  -1.0, -1.0,  1.0,
		 */
	/* 1.0,  1.0,  1.0,
	      -.5, -1.0, 1.0,
	      .5, -1.0, 1.0,  */
    
  //  1.0, 1.0, 1.0
/*      1.0,  1.0,  1.0,
         -1.0,  1.0,  1.0,
         -1.0, -1.0,  1.0,
     */
   /*  -1.0, -1.0,  1.0,
    -.1,  1.0,  1.0,
      1.,  1.,    1., */
  
    
   /*  -1.0, -1.0,  1.0,
    .5,  1.0,  1.0,
    .8,  1.0,  1.0,
      // -1.0, -1.0,  1.0
      1.0, 1.0,  1.0,
    -.5,  1.0,  1.0,
    -.8,  -1.0,  1.0, */
      
  ]

const vertices = new Float32Array(MAX_POINTS * 3);



for(var i = 0; i<pos.length; i++){
vertices[i] = pos[i];

}
console.log(vertices.length, pos.length)
// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

//geometry.toIndexed()

const material = new THREE.MeshBasicMaterial( { color: "green", wireframe: true } );
const mesh = new THREE.Mesh( geometry.toIndexed(), material );

//mesh.scale.set(100, 100, 100)
scene.add(mesh)


console.log(mesh.geometry)

 const verts = mesh.geometry.attributes.position.array;

      /*  for ( let i = 0, j = 0, l =...