merged from default

osrf · Jul 16, 2018 · e6db163 · e6db163
2 parents bae6d8b + 3e6ff93
commit e6db163
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 5 deletions.
diff --git a/examples/embedded_scene.html b/examples/embedded_scene.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" style="height: 100%">
   <head>
-    <title>Embedded GzWeb</title>
+    <title>[GzWeb] Embedded</title>
     <meta charset="utf-8">
     <script src="../gz3d/build/gz3d.js"></script>
     <style>
       body {
         padding: 2em;
-        font-family: helvetica;
+        font-family: sans;
       }
       #container {
         padding: 2em;

diff --git a/examples/screenshots.html b/examples/screenshots.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <title>[GzWeb] Screenshots</title>
+    <meta charset="utf-8">
+    <script src="../gz3d/build/gz3d.js"></script>
+    <style>
+      body {
+        padding: 2em;
+        font-family: sans;
+      }
+      #container {
+        padding: 2em;
+        height: 30em;
+        width: 80%;
+        margin: auto;
+        margin-bottom: 2em;
+      }
+      .listItem {
+        width: 10em;
+        margin: 2em;
+        text-align: center;
+        position: relative;
+        float: left;
+      }
+      img {
+        width: 100%;
+      }
+      .downloadText {
+        visibility:hidden;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #424242;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      a:hover .downloadText {
+        visibility:visible;
+      }
+      a:hover img {
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+
+  <body>
+
+    <h2>
+      Screenshots
+    </h2>
+
+    <p>
+      This example shows how to take screenshots of the current camera view,
+      display them as images and download them as files.
+    </p>
+    <button onclick="onScreenshot()" id="add-button">Take screenshot</button>
+
+    <center id="container">
+    </center>
+
+    <div id="images">
+    </div>
+
+    <script>
+      if (!Detector.webgl)
+        Detector.addGetWebGLMessage();
+
+      var mimeImg = "image/png";
+      var mimeDownload = "image/octet-stream";
+
+      var scene;
+      var sdfparser;
+      var ogre2json;
+      var container;
+      var imagesDom;
+
+      init();
+      animate();
+
+      // Initialization
+      function init()
+      {
+        // Initialize objects
+        var shaders = new GZ3D.Shaders();
+        scene = new GZ3D.Scene(shaders);
+        sdfparser = new GZ3D.SdfParser(scene);
+        sdfparser.usingFilesUrls = true;
+
+        ogre2json = new GZ3D.Ogre2Json();
+
+        // Append to dom
+        container = document.getElementById('container');
+        container.appendChild(scene.getDomElement());
+
+        imagesDom = document.getElementById('images');
+
+        // Handle window resize
+        window.addEventListener('resize', onWindowResize, false);
+        onWindowResize();
+
+        // Load model - hardcoded to double pendulum for simplicity
+        var obj = sdfparser.loadSDF(
+          "https://api.ignitionfuel.org/1.0/openrobotics/models/Double%20pendulum%20with%20base/1/files/model.sdf");
+        if (!obj)
+        {
+          alert('Failed to load model');
+          return;
+        }
+        scene.add(obj);
+
+        animate();
+      }
+
+      // Callback when window is resized
+      function onWindowResize()
+      {
+        scene.setSize(container.clientWidth, container.clientHeight);
+      }
+
+      // Recursively called animation loop
+      function animate()
+      {
+        requestAnimationFrame(animate);
+        scene.render();
+      }
+
+      // Take a screenshot and display it in a list below the scene
+      function onScreenshot()
+      {
+        scene.render();
+        var imgDisplay = scene.getDomElement().toDataURL(mimeImg);
+        var imgDownload = imgDisplay.replace(mimeImg, mimeDownload)
+
+        imagesDom.innerHTML = imagesDom.innerHTML +
+            '<div class="listItem">' +
+              '<a href="' + imgDownload + '" download="screenshot.png">' +
+                '<img src="' + imgDisplay + '"/>' +
+                '<p class="downloadText">download</p>' +
+              '</a>' +
+            '</div>';
+      }
+    </script>
+
+  </body>
+</html>
diff --git a/examples/view_sdf_from_url.html b/examples/view_sdf_from_url.html
@@ -2,13 +2,13 @@
 <html lang="en">
 
   <head>
-    <title>View SDF from URL</title>
+    <title>'[GzWeb] View SDF from URL</title>
     <meta charset="utf-8">
     <script src="../gz3d/build/gz3d.js"></script>
     <style>
       body {
         padding: 2em;
-        font-family: helvetica;
+        font-family: sans;
       }
       #container {
         padding: 2em;

diff --git a/gz3d/src/gzscene.js b/gz3d/src/gzscene.js
@@ -39,7 +39,7 @@ GZ3D.Scene.prototype.init = function()
   this.colladaLoader = new THREE.ColladaLoader();
   this.stlLoader = new THREE.STLLoader();
 
-  this.renderer = new THREE.WebGLRenderer({antialias: true });
+  this.renderer = new THREE.WebGLRenderer({antialias: true});
   this.renderer.setPixelRatio(window.devicePixelRatio);
   this.renderer.setClearColor(0xb2b2b2, 1);
   this.renderer.autoClear = false;