3D Shapeoko

HTML

<script src="http://www.chilipeppr.com/3d/r67/three.min.js"></script>
<script src="http://www.chilipeppr.com/3d/ColladaLoader.js"></script>
<script src="http://www.chilipeppr.com/js/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<div class="panel panel-default">
    <div class="panel-heading">Viewer
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a>

                </li>
                <li><a href="#">Another action</a>

                </li>
                <li><a href="#">Something else here</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a>

                </li>
            </ul>
        </div>
    </div>
    <div id="com-chilipeppr-viewer" class="panel-body"></div>
</div>

CSS

#com-chilipeppr-viewer {
    /* height: 350px; */
    padding:0;
    margin:0;
}

JavaScript

if (!Detector.webgl) Detector.addGetWebGLMessage();

var container, stats;

var camera, scene, renderer, objects;
var particleLight, pointLight;
var dae, skin;

var controls;
var cross;

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('http://www.chilipeppr.com/3d/shapeoko.dae', function (collada) {

    dae = collada.scene;
    skin = collada.skins[0];

    dae.scale.x = dae.scale.y = dae.scale.z = 0.35;
    dae.updateMatrix();

    init();
    render();
    stats.update();
    animate();

});

function init() {

    container = document.getElementById("com-chilipeppr-viewer")
    //container = document.createElement('div');
    //document.body.appendChild(container);
    

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.set(2, 2, 3);
    
    scene = new THREE.Scene();

    // Grid

    var size = 14,
        step = 1;

    var geometry = new THREE.Geometry();
    var material = new THREE.LineBasicMaterial({
        color: 0x303030
    });

    for (var i = -size; i <= size; i += step) {

        geometry.vertices.push(new THREE.Vector3(-size, -0.04, i));
        geometry.vertices.push(new THREE.Vector3(size, -0.04, i));

        geometry.vertices.push(new THREE.Vector3(i, -0.04, -size));
        geometry.vertices.push(new THREE.Vector3(i, -0.04, size));

    }

    var line = new THREE.Line(geometry, material, THREE.LinePieces);
    scene.add(line);

    // Add the COLLADA

    scene.add(dae);

    particleLight = new THREE.Mesh(new THREE.SphereGeometry(4, 8, 8), new THREE.MeshBasicMaterial({
        color: 0xffffff
    }));
    scene.add(particleLight);

    // Lights

    scene.add(new THREE.AmbientLight(0xcccccc));

    var directionalLight = new THREE.DirectionalLight( /*Math.random() * 0xffffff*/ 0xeeeeee);
    directionalLight.position.x = Math.random() - 0.5;
    directionalLight.position.y = Math.random() - 0.5;
    directionalLight.position.z =...