3D Gcode Viewer

Visualize your GCode in 3D by simulating your GCode run or seeing where your run is at in 3D while your CNC operation is in action.

HTML

<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">
<div id="com-chilipeppr-widget-3dviewer" class="panel panel-default" style="float:left;">
    <div class="panel-heading well">
        <div class="btn-toolbar pull-right" role="toolbar" >
            <div class="btn-group" data-style="padding-right:6px;">
                <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-viewextents" data-container="body" data-toggle="popover" data-placement="auto" data-content="View extents of GCode object" data-trigger="hover" data-delay="800"> <span class="glyphicon glyphicon-eye-open"></span>
                </button>
                <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-lookattoolhead active btn-primary" data-container="body" data-toggle="popover" data-placement="auto" data-content="Look at the toolhead toggle button. If toggled on, during the sample or real run of Gcode the 3D view will always place the toolhead at the center. Toggling this off means the camera will not reposition onto the toolhead during moves." data-trigger="hover" data-delay="800"> <span class="glyphicon glyphicon-facetime-video"></span>
                </button>
                <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-jog" data-container="body" data-toggle="popover" data-placement="auto" data-content="Jog Mode. Click here or hold down Ctrl on the keyboard while your mouse is over the 3D viewer to turn on jog mode. This lets you move around the 3D object and click to jog based on where the jog head is at." data-trigger="hover" data-delay="800">Jog</button>
                <button type="button" class="btn btn-xs btn-default com-chilipeppr-widget-3d-menu-inspect" data-container="body" data-toggle="popover" data-placement="auto" data-content="Inspect Mode. Click here or hold down...

CSS

#com-chilipeppr-widget-3dviewer .panel-heading {
    z-index:1;
    position:relative;
}
.com-chilipeppr-widget-3dviewer-simulator-title {
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    float:left;
    position: relative;
    border: 1px solid #ccc;
    display: inline-block;
    border-right-width: 0;
}

#com-chilipeppr-widget-3dviewer-body {
    /* height: 350px; */
    padding:0;
    margin:0;
    position: relative;
    border:0px solid red;
    background-color: blue;
}
#com-chilipeppr-widget-3dviewer-renderArea {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #000000;
    /* z-index:0; */
}
button.com-chilipeppr-widget-3d-menu-samplerun, button.com-chilipeppr-widget-3d-menu-samplerunstop {
    /* color: blue; */
}
#com-chilipeppr-widget-3dviewer .disabled .glyphicon {
    color: #dddddd;
}
#com-chilipeppr-widget-3dviewer #warningArea {
    position: absolute;
    top:0;
    left:0;
    padding: 10px;
    font-size: 9px;
    color: white;
}
#com-chilipeppr-widget-3dviewer-infoArea {
    position: absolute;
    bottom:0;
    left:0;
    padding: 10px;
    font-size: 9px;
    color: #333333;
    /* background-color: black; */
}
#com-chilipeppr-widget-3dviewer-infoArea .info {
    position: absolute;
    bottom:0;
    left:0;
    color: blue;
    background-color:red;
}
#com-chilipeppr-widget-3dviewer-renderArea .data-details {
    position: absolute;
    bottom:0;
    left:10;
    /* background-color: transparent; */
    color: #333333;
    padding: 10px;
    font-size: 9px;
}
.com-chilipeppr-widget-3dviewer-inspect {
    padding-bottom:0;
    margin-bottom:0;
    font-size:10px;
    position:absolute;
    min-width:250px;
    max-width:100%;
    /* width:100%; */
    z-index: 9;
    box-shadow: 0 0 20px #888888;
}
.com-chilipeppr-widget-3dviewer-panzoom-indicator {
    font-size:10px;
    padding-top: 7px;
}

JavaScript

requirejs.config({
    paths: {
        //Three: 'http://necromanthus.com/Test/html5/JS/three.min_72',
        Three: 'http://threejs.org/build/three.min',
        ThreeTextGeometry: 'http://chilipeppr.com/js/three/TextGeometry',
        ThreeFontUtils: 'http://chilipeppr.com/js/three/FontUtils',
        ThreeDetector: 'http://threejs.org/examples/js/Detector',
        ThreeStats: 'http://threejs.org/examples/js/libs/stats.min',
        ThreeTrackballControls: '//threejs.org/examples/js/controls/TrackballControls',
        ThreeOrbitControls: '//threejs.org/examples/js/controls/OrbitControls',
        ThreeHelvetiker: 'http://chilipeppr.com/js/three/threehelvetiker',
        //ThreeHelvetiker: 'https://mrdoob.github.com/three.js/examples/fonts/helvetiker_regular.typeface',
        ThreeTypeface: 'https://superi.googlecode.com/svn-history/r1953/trunk/MBrand/MBrand/Scripts/typeface-0.15',
        //ThreeTween: 'https://raw.githubusercontent.com/sole/tween.js/master/build/tween.min',
        ThreeTween: 'http://www.chilipeppr.com/js/three/tween.min',
        //ThreeSparks: 'https://raw.githubusercontent.com/zz85/sparks.js/master/Sparks',
        //ThreeParticle: 'https://raw.githubusercontent.com/squarefeet/ShaderParticleEngine/master/build/ShaderParticles.min'
        ThreeBufferGeometryUtils: 'http://chilipeppr.com/js/three/BufferGeometryUtils'
    },
    shim: {
        ThreeTextGeometry: ['Three'],
        ThreeFontUtils: ['Three', 'ThreeTextGeometry'],
        ThreeHelvetiker: ['Three', 'ThreeTextGeometry', 'ThreeFontUtils'],
        ThreeTrackballControls: ['Three'],
        ThreeTween: ['Three'],
        ThreeSparks: ['Three'],
        ThreeParticle: ['Three'],
        ThreeBufferGeometryUtils: ['Three']
    }
});

cprequire_test(['inline:com-chilipeppr-widget-3dviewer'], function (threed) {
    console.log("Running 3dviewer");
    threed.init({doMyOwnDragDrop: true});
    
    // test resize signal
    setTimeout(function() {
           ...