WebGL Html template customization

• 

  Roland Krebs

  May 29, 2017 09:28

  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:relative; height:50vh; border: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>

  1
• 

  Francis Rouleau

  November 03, 2017 17:13

  is there anyways to set a ShadedEdge on the viewer ?

  0
• 

  Alberto Bencivenni

  November 15, 2017 11:20 (Edited November 15, 2017 11:21)

  Hi Francis,

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

  0
• 

  Francis Rouleau

  November 15, 2017 13:14

  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

  0
• 

  Francis Rouleau

  November 15, 2017 13:16

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

  0

Please sign in to leave a comment.