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/ammo.js"></script>
<button id="startStop">Start</button><br />
<canvas id="viewport" width="600" height="600"></canvas>

JavaScript

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 Ammo.js objects
    localInertia = new Ammo.btVector3(0, 0, 0),
    shape, // Will be each shape's definition
    transform = new Ammo.btTransform, // will be used to position the objects
    balls = [], // This will hold all of the balls we create
    motionState, rbInfo, body; // Used for creating each physics body


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...