JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Debug</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <style>
        body {
            width: 100%;
            height: 100%;
            background-color: #000;
            color: #fff;
            margin: 0px;
            padding: 0;
            overflow: hidden;
        }

        progress {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <script src="https://files.panomoments.com/js/es6-promise.js"></script>
    <script src="https://files.panomoments.com/js/three.min.89.js"></script>
    <script src="https://files.panomoments.com/js/VRControls.js"></script>
    <script src="https://files.panomoments.com/js/webvr-polyfill.js"></script>
</body>
</html>

JavaScript

var camera, wireframe, geometry, scene, renderer, container, mesh, material, texture;
        camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1100);
        camera.target = new THREE.Vector3(0, 0, 0);
        scene = new THREE.Scene();
        geometry = new THREE.SphereBufferGeometry( 500, 60, 60 );
        geometry.scale(-1, 1, 1);
        material = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load( 'https://dl.dropboxusercontent.com/s/zs3hdu1m43nnwq2/grid.png?dl=0' )});
        mesh = new THREE.Mesh( geometry, material );
        scene.add(mesh);
        renderer = new THREE.WebGLRenderer({ antialias: false });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', onResize, true);
        var polyfill = new WebVRPolyfill({
          CARDBOARD_UI_DISABLED: false, // Default: false
          FORCE_ENABLE_VR: true, // Default: false.
          K_FILTER: 1, // Default: 0.98.
          ROTATE_INSTRUCTIONS_DISABLED: false, // Default: false.
          PREDICTION_TIME_S: .04, // Default: 0.040.
          TOUCH_PANNER_DISABLED: false, // Default: true.
          YAW_ONLY: false, // Default: false.
          MOUSE_KEYBOARD_CONTROLS_DISABLED: true, // Default: false.
          DEFER_INITIALIZATION: true, // Default: false.
          ENABLE_DEPRECATED_API: true, // Default: false.
          BUFFER_SCALE: 0.5, // Default: 0.5.
          DIRTY_SUBMIT_FRAME_BINDINGS: true // Default: false.
        });
        var controls = new THREE.VRControls(camera);
        animate();

        function onResize(e) {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
        }

        function animate(timestamp) {
            requestAnimationFrame(animate);
            controls.update();
           ...