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
Have more questions? Submit a request

1 Comments

  • 1
    Avatar
    Roland Krebs

    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>

Please sign in to leave a comment.