WebGL Html template customization

With the WriteWebGL class, we provide a basic html page with Pan/Zoom/Rotate functions, but you can customize it by passing your html template as parameter.

The html template must have some prerequisites:

  • Eyeshot geometry entry point           <!-- EyeshotGeometry -->
  • Eyeshot helper methods entry point   <!-- EyeshotScripts -->
  • Three.js script - revision 68 (you can find it in the attached zip file)

Here following a code snippet that can be used with the attached template.

Mesh box1 = Mesh.CreateBox(10, 10, 10);
viewportLayout1.Entities.Add(box1, 0, Color.Blue);
var box2 = Mesh.CreateBox(10, 10, 10);
box2.Translate(20, 0, 0);
viewportLayout1.Entities.Add(box2, 0, Color.Red);
string path = @"C:\Temp\CustomTemplate\";
var wgl = new devDept.Eyeshot.Translators.WriteWebGL(viewportLayout1, path + "myFile.html", 0.1, false, null, path + "WebGLCustomTemplate.html");
viewportLayout1.DoWork(wgl);
System.Diagnostics.Process.Start(path + "myFile.html"); // runs the html in browser
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

5 comments
  • Hello Marcello

    I had to modify the template to embed WebGL into an existing page. If anybody else should have the same objective, then here's how I did it for ASP Core.

    Best regards
    Roland Krebs

    cshtml:

    ...

    <div id="ptscontainer" style="position:relativeheight:50vhborder:solid;">

        <canvas id="webglCanvas" tabindex='1'></canvas>

    </div>

    ...

    @section Scripts {
        <script src="~/lib/three.js/three.min.js"></script>             @*http://threejs.org/build/three.min.js*@
        <script src="~/lib/three.js/OrbitControls.min.js"></script>     @*https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js*@

        @Html.Raw(Model.WebGLScene)

    </script>

    Template file:

    /**

    * @author Roland Krebs / www.seven-air.ch

    * Based on DevDept-template: https://devdept.zendesk.com/hc/en-us/articles/236048647-WebGL-Html-template-customization

    *

    * Template uses OrbitControl instead of TrackballControls to disable upside-down view.

    * To reduce CPU load, render is only called after user-input.

    */

    <div class="loader" style="position: fixed;    left: 0px;    top: 0px;    width: 100%;  height: 100%;       z-index: 9999;      text-align: center; vertical-align: middle;    line-height: 100px; "><h1>Loading Please wait...</h1></div>

     

    <script>

    $(window).load(function() {

           $(".loader").fadeOut("fast");

     

           // Loading textures takes long, we need to re-render

           render();

    });

    </script>

    <script>

           var showControls = false;

           var flagEnableDBClick = true;

    </script>

     

    <script>

    /**

    * @author alteredq / http://alteredqualia.com/

    * @author mr.doob / http://mrdoob.com/

    */

     

    var Detector = {

           canvas: !! window.CanvasRenderingContext2D,

           webgl: ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )(),

           workers: !! window.Worker,

           fileapi: window.File && window.FileReader && window.FileList && window.Blob,

     

           getWebGLErrorMessage: function () {

     

                 var element = document.createElement( 'div' );

                 element.id = 'webgl-error-message';

                 element.style.fontFamily = 'monospace';

                 element.style.fontSize = '13px';

                 element.style.fontWeight = 'normal';

                 element.style.textAlign = 'center';

                 element.style.background = '#fff';

                 element.style.color = '#000';

                 element.style.padding = '1.5em';

                 element.style.width = '400px';

                 element.style.margin = '5em auto 0';

     

                 if ( ! this.webgl ) {

     

                        element.innerHTML = window.WebGLRenderingContext ? [

                               'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',

                               'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'

                        ].join( '\n' ) : [

                               'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',

                               'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'

                        ].join( '\n' );

     

                 }

     

                 return element;

     

           },

     

           addGetWebGLMessage: function ( parameters ) {

     

                 var parent, id, element;

     

                 parameters = parameters || {};

     

                 parent = parameters.parent !== undefined ? parameters.parent : document.body;

                 id = parameters.id !== undefined ? parameters.id : 'oldie';

     

                 element = Detector.getWebGLErrorMessage();

                 element.id = id;

     

                 parent.appendChild( element );

     

           }

     

    };

    </script>

     

    <script>

    if ( ! Detector.webgl )

           Detector.addGetWebGLMessage();

    var container, stats;

    var camera, scene, renderer, controls;

    var webglCanvas;

     

    init();

    render();

     

    function init()

    {

           container = document.getElementById('ptscontainer');

           webglCanvas = document.getElementById("webglCanvas");

     

           scene = new THREE.Scene();

     

           dirLight = new THREE.DirectionalLight(0xffffff, 0.75);

           dirLight.position.set(0, 0, 1).normalize();

           scene.add(dirLight);

     

           camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);

           camera.position.set(-500, 300, 400);

           camera.lookAt(scene.position);

     

           controls = new THREE.OrbitControls( camera, container );

           controls.addEventListener( 'change', render ); // use if there is no animation loop

     

    <!-- EyeshotGeometry -->

     

           SetupGraphics();

    }

     

    <!-- EyeshotScripts -->

     

    function SetupGraphics()

    {

           renderer = new THREE.WebGLRenderer( { canvas: webglCanvas, antialias: true,alpha: true } );

           renderer.setSize(container.clientWidth, container.clientHeight);

     

           container.addEventListener('dblclick', onDblclick, false);

           window.addEventListener( 'resize', onWindowResize, false );

    }

     

    function onWindowResize()

    {

           camera.aspect = container.clientWidth / container.clientHeight;

           camera.updateProjectionMatrix();

           renderer.setSize( container.clientWidth, container.clientHeight  );

     

           render();

    }

     

    function onDblclick( event )

    {

           controls.reset();

    }

     

    function render()

    {

           dirLight.position.set(camera.position.x, camera.position.y, camera.position.z).normalize();

           renderer.render( scene, camera );

    }

    </script>

  • is there anyways to set a ShadedEdge on the viewer ?

  • Hi Francis,

    No, and there are no plans to add it in the short term. Sorry.

  • if you want a simple way to do it it's jsut a parameter to change. I am trying to make a massive find and replace in your output but it's not working well. I started to loo into doing it by hand see if it works but i had to go on other things.

     

    If you want ot know all you have to do is to add both solid and wireframe but with inner offset on solid.

    here the full code sample output you should have : http://jsfiddle.net/tfjvggfu/24/

    the important lines are :


    // material
    var material = new THREE.MeshPhongMaterial( {
    color: 0xff0000,
    shading: THREE.FlatShading,
    polygonOffset: true,
    polygonOffsetFactor: 1, // positive value pushes polygon further away
    polygonOffsetUnits: 1
    } );

    // mesh
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    // wireframe - new way
    var geo = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry
    var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
    var wireframe = new THR

  • the paste cutted the last part here it is :

    // wireframe
    var geo = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry
    var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
    var wireframe = new THREE.LineSegments( geo, mat );
    mesh.add( wireframe );

Please sign in to leave a comment.