(deps): require Three + Physijs via Webpack + NPM

- use physijs-webpack, a fork I created a few years ago and finally
  took some time to debug and get working
  - use via github since someone took the NPM name a few years ago and
    referenced my repo in it even though it never worked until today...
    - maybe will update once I get that resolved
  - now we don't have to vendor in all those scripts anymore and don't
    need to manually configure Physijs either!
    - remove the vendored physijs and three scripts
  - had to debug and modify ammo to get that version working with
    webpack / bundlers in general
    - newer versions of Emscripten can target specific envs
    - c.f. kripken/ammo.js#109 (comment) ,
      webpack/webpack#7352 ,
      and emscripten-core/emscripten#6542
  - and then made the worker config more flexible
  - add worker-loader as a devDep per physijs-webpack instructions
    - fix publicPath location as this is now actually used
      - the worker is loaded based on the publicPath

- add three-window-resize and three-trackballcontrols as deps as well
  - since three's examples/js/ folder doesn't quite work with bundlers
  - c.f. mrdoob/three.js#9562
  - maybe if I made some modifications, updated to newer Three
    revision, and used imports-loader it might work 🤷 TBD

- upgrade physijs to latest and Three from r60 to r73
  - latest physijs uses r73, so remain consistent
  - also physijs-webpack has a peerDep for that specific version
  - three-trackballcontrols@0.0.3 also requires r73 as dep
- had to refactor a bit due to upgrade
  - WebGLRenderer() -> WebGLRenderer({alpha: true})
    - the canvas now defaults to black without this, which was extremely
      disorienting
  - shadowMapEnabled -> shadowMap.enabled
  - CubeGeometry -> BoxGeometry
  - quaternion._euler -> rotation
    - I probably could've just used this before, couldn't have I...?

.
.

- TODO: improve webpack perf (CPU + Memory) and build speed
- this change slows down initial build times quite a bit (~20s), since
  Three, Physijs, and Ammo are all parsed by Webpack now
  - will want to update webpack to get a dev-server (wepback-serve)
    running
    - webpack itself is faster in later versions as well
    - and perhaps add HardSource for caching otherwise or split out
      vendored stuff into a DLL
    - probably can't update until decaffeinate'd since I believe the
      loaders used here are no longer maintained :/
      - and then would need to figure out the literate programming
        and its sourcemaps
  - will want to output a separate vendor bundle per best practice
    - may also want to output HTML via webpack too while at it
      - the templates don't do any templating so would be nbd
      - and would allow for hashing and therefore cache-busting
        - no need to manually clean cache then
  - and prod build / uglification is even _slower_ (~80s)
    - may want to exclude some files from Uglify
      - i.e. Ammo and use three.min so it can be excluded too

app/templates/simulator.html

@@ -18,10 +18,6 @@ <h1>LTLMoPWeb3D Simulator</h1>
   <div id='viewport'></div>
 </body>
 
-<script type='text/javascript' src='static/plugins/threejs/three.min.js'></script>
-<script type='text/javascript' src='static/plugins/threejs/three.trackballcontrols.js'></script>
-<script type='text/javascript' src='static/plugins/threejs/threex.windowresize.js'></script>
-<script type='text/javascript' src='static/plugins/physijs/physi.js'></script>
-<script type='text/javascript' src='static/build/simulator.bundle.js'></script>  
+<script type='text/javascript' src='static/build/simulator.bundle.js'></script>
 
-</html>
+</html>

static/js/simulator/physijs/initializePhysics.js

@@ -2,24 +2,24 @@
 // plenty of refactoring done and some changes as well
 'use strict';
 
-// set worker and ammo
-Physijs.scripts.worker = 'static/plugins/physijs/physijs_worker.js';
-Physijs.scripts.ammo = 'ammo.js';
+// External Dependencies
+var Physijs = require('physijs-webpack');
+var THREE = require('three');
+var TrackballControls = require('three-trackballcontrols');
+var WindowResize = require('three-window-resize');
 
 // declare objects
-var controls, projector, renderer, scene, camera, car = {};
+var controls, renderer, scene, camera, car = {};
 
 // initialize the scene
 var initScene = function() {
-  projector = new THREE.Projector;
-
   // create the renderer
-  renderer = new THREE.WebGLRenderer({antialias: true});
+  renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
   var viewportElem = document.getElementById('viewport')
   console.log(viewportElem.clientWidth)
   console.log(viewportElem.clientHeight)
   renderer.setSize(viewportElem.clientWidth, viewportElem.clientHeight)
-  renderer.shadowMapEnabled = true;
+  renderer.shadowMap.enabled = true;
   renderer.shadowMapSoft = true;
   viewportElem.appendChild(renderer.domElement)
 
@@ -47,7 +47,7 @@ var initScene = function() {
   scene.add( camera );
 
   // add trackball controls
-  controls = new THREE.TrackballControls( camera );
+  controls = new TrackballControls( camera );
   controls.rotateSpeed = 1.0;
   controls.zoomSpeed = 1.2;
   controls.panSpeed = 1.2;
@@ -77,7 +77,7 @@ var initScene = function() {
   // scene.add(light);
 
   // add window resizer
-  THREEx.WindowResize(renderer, camera, function () {
+  WindowResize(renderer, camera, function () {
     return {width: viewportElem.clientWidth, height: viewportElem.clientHeight}
   });
 
@@ -102,7 +102,7 @@ var create3DCar = function(startX, startY, startZ) {
     0 // no restitution
   );
   car.body = new Physijs.BoxMesh(
-    new THREE.CubeGeometry( 10, 5, 7 ),
+    new THREE.BoxGeometry( 10, 5, 7 ),
     car_material,
     1000
   );

static/js/simulator/physijs/poseHandler.litcoffee

@@ -1,3 +1,9 @@
+External Dependencies
+---------------------
+
+    THREE = require('three')
+    Physijs = require('physijs-webpack')
+
 Internal Dependencies
 ---------------------
 
@@ -81,9 +87,9 @@ Set the velocity and theta
       currentVelocity = velocity
       currentTheta = theta
       #console.log('velocity: ' + velocity)
-      #console.log('car x: ' + car.body.quaternion._euler.x)
-      #console.log('car y: ' + car.body.quaternion._euler.y)
-      #console.log('car z: ' + car.body.quaternion._euler.z)
+      #console.log('car x: ' + car.body.rotation.x)
+      #console.log('car y: ' + car.body.rotation.y)
+      #console.log('car z: ' + car.body.rotation.z)
       #console.log('wheel theta: ' + theta)
 
 
@@ -126,8 +132,8 @@ Starts moving the car toward the destination
       targetTheta = Math.atan2(targetPosition[1] - currentPosition[1], targetPosition[0] - currentPosition[0])
       #console.log('target theta: ' + targetTheta)
       # get proper car theta via transformations of euler angles
-      carTheta = car.body.quaternion._euler.y
-      if Math.abs(car.body.quaternion._euler.x) < Math.PI/2
+      carTheta = car.body.rotation.y
+      if Math.abs(car.body.rotation.x) < Math.PI/2
         carTheta = -(carTheta + Math.PI)
       #console.log('car theta: ' + carTheta)
       # theta = diff b/t car body's theta and target theta

static/package.json

@@ -11,20 +11,25 @@
     "history": "^1.13.0",
     "immutable": "^3.7.5",
     "isomorphic-fetch": "^2.2.0",
+    "physijs-webpack": "github:agilgur5/physijs-webpack#2ddf4f6",
     "promise-file-reader": "^1.0.2",
     "react": "^0.14.2",
     "react-dom": "^0.14.2",
     "react-router": "^1.0.0",
     "react-tabs": "^0.5.1",
-    "roslib": "^0.18.0"
+    "roslib": "^0.18.0",
+    "three": "^0.73.0",
+    "three-trackballcontrols": "0.0.3",
+    "three-window-resize": "^1.0.4"
   },
   "devDependencies": {
     "cjsx-loader": "^2.1.0",
     "coffee-loader": "~0.7.2",
     "coffee-script": "~1.9.2",
     "css-loader": "^0.22.0",
     "style-loader": "^0.13.0",
-    "webpack": "^1.8.11"
+    "webpack": "^1.8.11",
+    "worker-loader": "^0.7.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

static/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
   },
   output: {
     path: './build', // This is where images AND js will go
-    publicPath: 'http://0.0.0.0:5000', // This is used to generate URLs to e.g. images
+    publicPath: './static/build/', // This is used to generate URLs to e.g. images
     filename: '[name].bundle.js'
   },
   resolveLoader: {