3D Video Texture

Test algorithm

by chilipeppr

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>
            </div>
        <div class="btn-group" data-style="padding-right:6px;">
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
            <ul id="com-chilipeppr-widget-3dviewer-dropdown" class="dropdown-menu dropdown-menu-right" role="menu">
            </ul>
        </div>
        </div>
        <span class="panel-title" style="padding-right:10px;" data-toggle="popover" data-trigger="hover" data-placement="auto" data-content="">3D&nbsp;Viewer</span>
    </div>
    <div id="com-chilipeppr-widget-3dviewer-body" class="panel-body">
        <!-- WebGL rendering area -->
        <div id="com-chilipeppr-widget-3dviewer-renderArea">
            <div class="data-details">Drag and Drop Gcode Here...</div>
        </div>
        <div id="warningArea">
            <div class="alert alert-warning alert-dismissable hidden">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>G2/G3 arcs only rendered as straight lines. They are yellow to show where actual positioning in your CNC will differ from 3D rendering. If anyone wants to fork...

CSS

#com-chilipeppr-widget-3dviewer .panel-heading {
    z-index:1;
    position:relative;
}
#com-chilipeppr-ws-webrtcclient {
    position: relative;
}
#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',
        ThreeTrackballControls: '//threejs.org/examples/js/controls/TrackballControls',
        ThreeOrbitControls: '//threejs.org/examples/js/controls/OrbitControls',
        ThreeHelvetiker: 'http://chilipeppr.com/js/three/threehelvetiker',
    },
    shim: {
        ThreeTrackballControls: ['Three'],
    }
});

cprequire_test(['inline:com-chilipeppr-widget-3dviewertest'], function (threed) {
    console.log("Running 3dviewer test");
        
    // create webrtc client so we have a video feed we can use as texture
    chilipeppr.load("#com-chilipeppr-ws-webrtcclient", "http://fiddle.jshell.net/chilipeppr/k9aXL/show/light/", function() {
        console.log("loaded webrtc client");
        cprequire(['inline:com-chilipeppr-widget-webrtc-client'], function(webrtcclient) {
            webrtcclient.init();
            webrtcclient.hideBody();
            setTimeout(function() {
                threed.init();
                threed.doVideo(webrtcclient);
            }, 3000);
            console.log("3d viewer test initted");

        });
    });
} /*end_test*/ );

cpdefine('inline:com-chilipeppr-widget-3dviewertest', ['chilipeppr_ready', 'Three', 'ThreeTrackballControls'], function () {

    return {

        id: 'com-chilipeppr-widget-3dviewertest',
        url: "http://fiddle.jshell.net/chilipeppr/y3HRF/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/y3HRF/",
        name: "3D Viewer Test",
        desc: "Test",
        publish: {
        },
        subscribe: {
        },
        foreignSubscribe: {
        },
        //foreignPublish: {
        //},
        scene: null,
        object: null,
        camera: null,
        controls: null,
        wantAnimate: true, // we automatically timeout rendering to save on cpu
        init: function () {
            
            this.scene = this.createScene($('#com-chilipeppr-widget-3dviewer-renderArea'));

           ...