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.

by Hansen

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>
                <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-th"></span> <span class="caret" style="font-size:10px;margin-left: -2px;xmargin-right: -4px"></span></button>
                <ul id="com-chilipeppr-widget-3dviewer-gridsizing" class="dropdown-menu xdropdown-menu-right" role="menu">
                    <li role="presentation" class="dropdown-header">Grid Size</li>
                    <li><a class="alert-info com-chilipeppr-widget-3dviewer-gridsizing-1x" href="javascript:">1x (Default)</a></li>
                    <li><a...

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;
}

JavaScript

requirejs.config({
    paths: {
        Three: 'http://threejs.org/build/three.min',
        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'
    },
    shim: {
        ThreeTrackballControls: ['Three'],
        ThreeTween: ['Three'],
        ThreeSparks: ['Three'],
        ThreeParticle: ['Three']
    }
});

cprequire_test(['inline:com-chilipeppr-widget-3dviewer'], function (threed) {
    console.log("Running 3dviewer");
    threed.init({doMyOwnDragDrop: true});
    
    // test resize signal
    setTimeout(function() {
            chilipeppr.publish('/' + threed.id + '/resize', "" );
    }, 3000);
    
    var testGotoline = function() {
        // send sample gcodeline commands as if the gcode sender widget were sending them
        setTimeout(function() {
            chilipeppr.publish('/com-chilipeppr-widget-3dviewer/gotoline', {line: 3, gcode: "G21 G90 G64 G40"} );
        }, 3000);
        setTimeout(function() {
            chilipeppr.publish('/com-chilipeppr-widget-3dviewer/gotoline', {line: 4, gcode: "G0 Z3.0"}  );
        }, 6000);
       ...