JSFiddle - React, Tailwind, and code Playground

by chandlerprall

HTML

<script src="http://buildnewgames.com/assets/article/physics-libraries/three.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/jiglib.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/cof/jconfig.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/glmatrix.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/vector3dutil.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/matrix3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/jnumber3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/jmatrix3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/maths/jmaths3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/data/contactdata.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/data/edgedata.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/data/planedata.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/data/spandata.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/plugins/iskin3d.js"></script>
<script type="text/javascript" src="http://buildnewgames.com/assets/article/physics-libraries/jiglib/geometry/jaabox.js"></script>
<script type="text/javascript"...

JavaScript

// Create some local variables for convenience
var state = false, // `true` when the simulation is running
    
    viewport = document.getElementById( 'viewport' ), // The canvas element we're going to use
    
    // If your computer supports it, switch to the WebGLRenderer for a much smoother experience
    // most of the lag and jittering you see in the simulation is from the CanvasRenderer, not the physics
    renderer = new THREE.CanvasRenderer({ canvas: viewport }), // Create the renderer
    //renderer = new THREE.WebGLRenderer({ canvas: viewport }), // Create the renderer
    
    scene = new THREE.Scene, // Create the scene
    camera = new THREE.PerspectiveCamera( 35, 1, 1, 1000 ),
    
    ball_geometry = new THREE.SphereGeometry( 3 ), // Create the ball geometry with a radius of `3`
    ball_material = new THREE.MeshLambertMaterial({ color: 0x0000ff, overdraw: true }), // Balls will be blue
    
    large_ball_geometry = new THREE.SphereGeometry( 4 ), // Create the ball geometry with a radius of `4`
    large_ball_material = new THREE.MeshLambertMaterial({ color: 0x00ff00, overdraw: true }), // Large balls are be green
    
    time_last_run, // used to calculate simulation delta
    
    world, // This will hold the jiglibjs objects
    shape; // Will hold each physics shape as they're defined

renderer.setSize( viewport.clientWidth, viewport.clientHeight );

camera.position.set( -10, 30, -200 );
camera.lookAt( scene.position ); // Look at the center of the scene
scene.add( camera );

function addLights() {
    var ambientLight = new THREE.AmbientLight( 0x555555 );
    scene.add( ambientLight );

    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( -.5, .5, -1.5 ).normalize();
    scene.add( directionalLight );
}

function buildScene() {
    
     // Create the physics world
     world = jigLib.PhysicsSystem.getInstance();
     //world.setGravity([ 0, 10, 0 ]);
    
    
    var ramp_geometry= new...