JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
    <head>
        <title>three.js webgl - loaders - OBJ loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000;
                color: #fff;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
        </style>
    </head>

    <body>
        <div id="info">
        <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - OBJLoader test
        </div>

        <script src="http://mathieujouhet.com/tsf/webgl/js/Three.js"></script>
        <script src="http://mathieujouhet.com/tsf/webgl/js/loaders/OBJLoader.js"></script>

        <script src="http://mathieujouhet.com/tsf/webgl/js/Detector.js"></script>
        <script src="http://mathieujouhet.com/tsf/webgl/js/Stats.js"></script>

        <script src="http://mathieujouhet.com/tsf/webgl/js/m-object.js"></script>
            

    </body>
</html>

JavaScript

var container, stats;

            var camera, scene, renderer;

            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
        

            init();
            animate();


            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.set( -120, -120, 120 );
                
  controls = new THREE.TrackballControls(camera, container);
  controls.rotateSpeed = 2.0;
  controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;
  controls.noZoom = false;
  controls.noPan = false;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.1;
  controls.keys = [65, 83, 68];                
                scene.add( camera );

                var light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( 0, 0, 1 );
                scene.add( light );



    
                var  loader = new THREE.OBJLoader();
                var  object = loader.parse(obj_data);
                var  geometry = object.children[0].geometry;
                THREE.GeometryUtils.center(geometry);


                  mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [new THREE.MeshBasicMaterial({color: 0xFEC1EA}), new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 } )] ); 
                scene.add( mesh );


        
                // RENDERER

                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );


            }

            //

            function animate() {

                requestAnimationFrame(...