» Examples - x3dom.org

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> » Examples - x3dom.org</title> <link rel="stylesheet" href="https://www.x3dom.org/wp-content/themes/x3domnew/style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="https://www.x3dom.org/wp-content/themes/x3domnew/css/bootstrapCosmo.css" type="text/css" media="screen" /> <link rel="pingback" href="https://www.x3dom.org/xmlrpc.php" /> <style type="text/css"> #fancybox-close{right:-15px;top:-15px} div#fancybox-content{border-color:#FFFFFF} div#fancybox-title{background-color:#FFFFFF} div#fancybox-outer{background-color:#FFFFFF} div#fancybox-title-inside{color:#333333} </style> <meta name='robots' content='max-image-preview:large' /> <link rel="alternate" type="application/rss+xml" title="x3dom.org » Examples Feed" href="https://www.x3dom.org/examples/feed/" /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.x3dom.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.2.6"}}; /*! This file is auto-generated */ !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){p.clearRect(0,0,i.width,i.height),p.fillText(e,0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(t,0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(p&&p.fillText)switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s("\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!s("\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!s("\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!s("\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(e=t.source||{}).concatemoji?c(e.concatemoji):e.wpemoji&&e.twemoji&&(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href='https://www.x3dom.org/wp-includes/css/dist/block-library/style.min.css?ver=6.2.6' type='text/css' media='all' /> <link rel='stylesheet' id='classic-theme-styles-css' href='https://www.x3dom.org/wp-includes/css/classic-themes.min.css?ver=6.2.6' type='text/css' media='all' /> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-columns.is-layout-flex){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='fancybox-css' href='https://www.x3dom.org/wp-content/plugins/fancybox-for-wordpress/fancybox/fancybox.css?ver=6.2.6' type='text/css' media='all' /> <link rel='stylesheet' id='wp-syntax-css-css' href='https://www.x3dom.org/wp-content/plugins/wp-syntax/css/wp-syntax.css?ver=1.1' type='text/css' media='all' /> <script type='text/javascript' src='https://www.x3dom.org/wp-includes/js/jquery/jquery.min.js?ver=3.6.4' id='jquery-core-js'></script> <script type='text/javascript' src='https://www.x3dom.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.0' id='jquery-migrate-js'></script> <script type='text/javascript' src='https://www.x3dom.org/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.8' id='fancybox-js'></script> <link rel="https://api.w.org/" href="https://www.x3dom.org/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.x3dom.org/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.x3dom.org/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 6.2.6" />  <script type="text/javascript"> jQuery(function(){ jQuery.fn.getTitle = function() { // Copy the title of every IMG tag and add it to its parent A so that fancybox can show titles var arr = jQuery("a.fancybox"); jQuery.each(arr, function() { var title = jQuery(this).children("img").attr("title"); jQuery(this).attr('title',title); }) } // Supported file extensions var thumbnails = jQuery("a:has(img)").not(".nolightbox").filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) }); thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle(); jQuery("a.fancybox").fancybox({ 'cyclic': false, 'autoScale': true, 'padding': 10, 'opacity': true, 'speedIn': 500, 'speedOut': 500, 'changeSpeed': 300, 'overlayShow': true, 'overlayOpacity': "0.3", 'overlayColor': "#666666", 'titleShow': true, 'titlePosition': 'inside', 'enableEscapeButton': true, 'showCloseButton': true, 'showNavArrows': true, 'hideOnOverlayClick': true, 'hideOnContentClick': false, 'width': 560, 'height': 340, 'transitionIn': "fade", 'transitionOut': "fade", 'centerOnScroll': true }); }) </script>  <script type='text/javascript' src='https://x3dom.org/release/x3dom-full.js'></script> <link rel='stylesheet' type='text/css' href='https://x3dom.org/release/x3dom.css' /> </head>  <body> <a href="https://github.com/x3dom/x3dom"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://www.x3dom.org/wp-content/themes/x3domnew/fork_on_github.png" alt="Fork me on GitHub"></a> <div class="container page-header"> <div class="row"> <a href="https://www.x3dom.org/"><div class="col-md-3 col-xs-6 col-sm-4 col-xs-offset-1 col-sm-offset-0"> <img src="https://www.x3dom.org/wp-content/themes/x3domnew/x3dom_logo.png" style="width: 80%;"> </div></a> <div class="col-md-9 col-sm-10 col-xs-12"> <ul class="nav nav-pills" style="font-size: 1.2em;margin-top:15px;"> <li ><a href="https://www.x3dom.org/news/">News & User's Apps</a></li> <li ><a href="https://www.x3dom.org/nodes/">Get it</a></li> <li class="active"><a href="https://www.x3dom.org/examples/">See it</a></li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="http://doc.x3dom.org/index.html"> Documentation <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://doc.x3dom.org/gettingStarted/index.html">Getting Started</a></li> <li><a href="http://doc.x3dom.org/tutorials/index.html">Tutorials</a></li> <li><a href="http://doc.x3dom.org/author/index.html">Scene Author API</a></li> <li><a href="http://doc.x3dom.org/developer/index.html">Developer API</a></li> </ul> </li> <li ><a href="https://www.x3dom.org/story/3">Get involved</a></li> <li ><a href="?page_id=9">Browser Support</a></li> <li ><a href="?page_id=158">Profile</a></li> </ul> </div> </div> </div><div ng-app="x3domExamples"> <div ng-controller="ExamplesListCtrl"> <div id="#appPreloader" ng-show="!loaded"> <div class="container"> <noscript> <div class="alert alert-danger"> <strong>x3dom and this page as well need javascript!</strong> Please activate javascript in your browser to watch the examples. </div> </noscript> <h3>Loading</h3> <div class="progress"> <div class="progress-bar" style="width: 10%;"></div> </div> </div> </div> <div id="#appMain" ng-show="loaded" class="ng-cloak">  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="width:70%;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">{{current.name}}</h4> </div> <div class="modal-body" style="min-height: 430px;"> <p> <a href="{{current.url}}" ng-show="hasURL()" class="btn btn-primary btn-sm" target="_blank">Open Example <span class="glyphicon glyphicon-play-circle"></span> </a> <a href="{{current.tutorialUrl}}" ng-show="hasTutorial()" class="btn btn-default btn-sm" target="_blank">Read Tutorial <span class="glyphicon glyphicon-book"></span> </a> <a href="{{current.downloadUrl}}" ng-show="hasDownload()" class="btn btn-default btn-sm">Download <span class="glyphicon glyphicon-save"></span> </a>  </p> <p style="margin-top:25px;margin-bottom:25px;" class="text-justify"><b ng-bind-html="getTrusted(current.desc)"></b></p> <p><a href="{{current.url}}" target="_blank" ng-show="hasScreenshot() && !isInline()"><img ng-src="{{current.screenshot}}" class="img-responsive center-block"></a></p> <a href="{{current.url}}" target="_blank" ng-show="hasURL() && !hasScreenshot() && !isInline()"> <div style="width: 100%;height: 300px;cursor:pointer;text-align:center;border:1px solid #666666;background-color: #EEEEEE;color:#666666;"><span class="glyphicon glyphicon-play" style="margin-top: 100px;font-size: 100px;"></span> </div> </a> <iframe style="width: 100%;height:450px;" ng-show="isInline()" ng-src="{{getInlineURL()}}"></iframe> </div> <div class="modal-footer"> <div id="exampleTags" style="float:left;"> <span class="label label-warning">{{current.category}}</span>  <span ng-repeat="tag in current.tags" class="label label-primary" style="margin-right: 2px">{{tag}}</span> </div> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="container"> <h4>Featured</h4> <div class="row"> <div ng-repeat="category in examples"> <div class="col-xs-4 col-sm-2" ng-repeat="example in category.examples | featuredFilter" ng-click="chooseExample(example)" data-toggle="modal" data-target="#myModal"> <img ng-src="{{example.thumbnail}}" style="width: 100%;cursor: pointer;"> </div> </div> </div> </div> <div class="container" style="margin-top: 35px;"> <div class="jumbotron" style="padding: 15px;"> <form class="form-horizontal"> <fieldset> <div class="form-group"> <label for="search" class="col-lg-2 control-label">Search</label> <div class="col-lg-10"> <input type="text" class="form-control" id="search" placeholder="Example name, description, ..." ng-model="query.$"> </div> </div> </fieldset> </form> </div> </div> <div class="container" style="min-height:200px;"> <div class="row"> <div class="col-md-5"> <h4>Examples</h4> <table class="table table-hover" ng-repeat="category in examples" ng-show="(category.examples | filter:query | categoryFilter:demoCategories).length > 0"> <thead> <tr><th style="font-size: 1.2em;">{{category.name}}</th></tr> </thead> <tbody>  <tr ng-repeat="example in category.examples | filter:query | categoryFilter:demoCategories" class="exampleLink" ng-click="chooseExample(example)" data-toggle="modal" data-target="#myModal" style="cursor: pointer;"> <td> <img ng-src="{{example.thumbnail}}" style="float: left;width: 50px;min-width:50px;min-height:35px;margin-right:10px;background-color:#EEEEEE;"> <b>{{example.name}}</b><br> {{example.desc | limitTo:55}}... </td> </tr> </tbody> </table> </div> <div class="col-md-1"></div> <div class="col-md-6"> <h4>Tech Demos</h4> <div class="row"> <div class="col-md-6 col-sm-6" style="padding-left: 0px;" ng-repeat="category in examples" ng-show="(category.examples | filter:query | categoryFilter:techDemoCategories).length > 0"> <table class="table table-hover"> <thead> <tr><th style="font-size: 1.2em;">{{category.name}}</th></tr> </thead> <tbody>  <tr ng-repeat="example in category.examples | filter:query | categoryFilter:techDemoCategories" class="exampleLink" ng-click="chooseExample(example)" data-toggle="modal" data-target="#myModal" style="cursor: pointer;"> <td> <b>{{example.name}}</b><br> <span ng-bind-html="getTrusted(example.desc)" style="text-overflow: ellipsis;"></span> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js"></script> <script type="text/javascript" src="https://www.x3dom.org/wp-content/themes/x3domnew/js/controllers.js"></script>   <div class="container"> <footer> <p class="pull-right"><a href="#">Back to top</a></p> <p> <a href="http://www.x3dom.org/wp-content/themes/x3dom/images/logo_IGD.png"><img class="" src="https://www.x3dom.org/wp-content/themes/x3domnew/logo_IGD.png" alt="Fraunhofer IGD"></a>    <a href="http://www.w3.org/community/declarative3d/"><img class="" src="https://www.x3dom.org/wp-content/themes/x3domnew/w3c_banner.jpg" alt="Founding member of the W3C Community Group Declarative 3D"></a> </p> <p>© by Fraunhofer-Gesellschaft · <a href="?page_id=3524">Legals</a></p> </footer> </div>     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

CINXE.COM

» Examples - x3dom.org