JSFiddle - React, Tailwind, and code Playground

by chandlerprall

HTML

<script src="http://buildnewgames.com/assets/article/physics-libraries/three.js"></script>
<script src="http://buildnewgames.com/assets/article/physics-libraries/box2dweb.js"></script>
<button id="startStop">Start</button><br />
<canvas id="viewport" width="600" height="600"></canvas>

JavaScript

// Create some local variables for convenience
var state = false, // `true` when the simulation is running
    
    b2Vec2 = Box2D.Common.Math.b2Vec2,
        b2BodyDef = Box2D.Dynamics.b2BodyDef,
        b2Body = Box2D.Dynamics.b2Body,
        b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
        b2Fixture = Box2D.Dynamics.b2Fixture,
        b2World = Box2D.Dynamics.b2World,
        b2MassData = Box2D.Collision.Shapes.b2MassData,
        b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
        b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
        b2DebugDraw = Box2D.Dynamics.b2DebugDraw,
        
    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 box2dweb objects
    bodyDef = new b2BodyDef, // `bodyDef` will describe the type of bodies we're creating
    
    // Create a fixture definition
    //  `density` represents kilograms per meter squared.
    //        a denser object will...