JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

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

var readFile = function( filePath, callback ) {
var client = new XMLHttpRequest();
client.open( 'GET', filePath );
client.onreadystatechange = function() {
if( client.readyState !== XMLHttpRequest.DONE ) {
    return;
}

if( client.status !== 200 ) {
    return;
}

if( callback ) {
    callback( client.responseText );
}
}
client.send();
};

var objPars = function( input, opts ) {

opts = opts ? opts : {};
var scale = opts.scale ? opts.scale : 1.0;
var invert = opts.flipYZ ? -1.0 : 1.0;
var flipYZ = opts.flipYZ ? true : false;

var positions = [];
var normals = [];
var texcoords = [];

var cells = [];
var ncells = [];
var tcells = [];

var vRegex = /^v\s*(-?\d*\.?\d*e*[-\+]*\d*)[,|\s]?\s?(-?\d*\.?\d*e*[-\+]*\d*)[,|\s]?\s?(-?\d*\.?\d*e*[-\+]*\d*)\s*$/;
var vt2Regex = /^vt\s*(-?\d*\.?\d*e*[-\+]*\d*)[,|\s]?\s?(-?\d*\.?\d*e*[-\+]*\d*)\s*$/;                      //texcoord 2D
var vt3Regex = /^vt\s*(-?\d*\.?\d*e*[-\+]*\d*)[,|\s]?\s?(-?\d*\.?\d*e*[-\+]*\d*)[,|\s]?\s?(-?\d*\.?\d*e*[-\+]*\d*)\s*$/;   //texcoord 3D
var vnRegex = /^vn\s*(-?\d*\.?\d*e*[-\+]*\d*)[,|\s]?\s?(-?\d*\.?\d*e*[-\+]*\d*)[,|\s]?\s?(-?\d*\.?\d*e*[-\+]*\d*)\s*$/;       //normal
var fRegex = /^f\s*(.*)/;                                                    //Find Face

var fv = /^(\d+)$/;                                                         //Found vertex
var fvt = /^(\d+)\/(\d+)$/;                                                 //Found vertex texcoord
var fvnt = /^(\d+)\/(\d+)\/(\d+)$/;                                         //Found vertex normal texcoord
var fvn = /^(\d+)\/\/(\d+)$/;                                               //Found vertex normal

var lines = input.split( '\n' );
var len = lines.length;
var line, results;
for( var i = 0; i < len; i++ ) {
line = lines[ i ];

results = line.match( vRegex ); // got a vertex
if( results ) {
    var p =...

CSS

body {
    margin: 0;
    overflow: hidden;
}

JavaScript

var scene, camera, renderer;
var controls;
var obj;

var points = [
new THREE.Vector3(-1, 0, 1),
new THREE.Vector3(1, 0, 1),
new THREE.Vector3(-1, 0, -1),
new THREE.Vector3(1, 0, -1),
new THREE.Vector3(-0.205053, 0, 1),
new THREE.Vector3(-1, 0, 0.281299),
new THREE.Vector3(0.288645, 0, 0.508209),
new THREE.Vector3(0.272708, 0, -0.131129)
   /* new THREE.Vector3(1.0, 2.0, 2.0),
    new THREE.Vector3(3.0, 1.0, 2.0),
    new THREE.Vector3(3.0, -1.0, 2.0),
    new THREE.Vector3(1.0, -2.0, 2.0),
    new THREE.Vector3(-1.0, -1.0, 2.0),
    new THREE.Vector3(-1.0, 1.0, 2.0),
    new THREE.Vector3(-3.0, 2.0, 0.0),
    new THREE.Vector3(-2.0, 0.0, 1.0),
    new THREE.Vector3(-3.0, -2.0, 0.0),
    new THREE.Vector3(-2.0, -1.0, -3.0),
    new THREE.Vector3(-2.0, 1.0, -3.0)*/
];
var faces = [
[0, 4, 5],
[5, 4, 6, 7],
[7, 6, 4, 1, 3, 2, 5]

   /* [0, 1, 2, 3, 4, 5],
    [4, 5, 6, 7, 8],
    [7, 9, 10]*/
];

var triangulateKFacesWithShapes = (function () {
    var _ctr = new THREE.Vector3();
    
    var _plane = new THREE.Plane();
    var _q = new THREE.Quaternion();
    var _y = new THREE.Vector3();
    var _x = new THREE.Vector3();
    
    var X = new THREE.Vector3(1.0, 0.0, 0.0);
    var Y = new THREE.Vector3(0.0, 1.0, 0.0);
    var Z = new THREE.Vector3(0.0, 0.0, 1.0);
    
    var _tmp = new THREE.Vector3();
    
    var _basis = new THREE.Matrix4();
    
    return function (points, faces) {

        var object = new THREE.Object3D();
        var material = new THREE.MeshLambertMaterial({
            color: new THREE.Color(0xffffff),
            side: THREE.DoubleSide,
         //   wireframe: true
        });

        for (var f = 0, len = faces.length; f < len; f++) {
            var face = faces[f];

            // compute centroid
            _ctr.setScalar(0.0);
            for (var i = 0, l = face.length; i < l; i++) {
                _ctr.add(points[face[i]]);
            }
            _ctr.multiplyScalar(1.0 / l);

            // compute face normal
           ...