- 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> - 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 » About Comments Feed" href="https://www.x3dom.org/about/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="alternate" type="application/json" href="https://www.x3dom.org/wp-json/wp/v2/pages/2" /><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" /> <link rel="canonical" href="https://www.x3dom.org/" /> <link rel='shortlink' href='https://www.x3dom.org/' /> <link rel="alternate" type="application/json+oembed" href="https://www.x3dom.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.x3dom.org%2F" />  <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 ><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> <link rel="stylesheet" href="https://www.x3dom.org/wp-content/themes/x3domnew/css/carousel.css" type="text/css" media="screen" /> <div class="container"> <p class="lead"> Integrate 3D content seamlessly into your webpage - the scene is directly written into the HTML markup. No Plugins needed. Simply include a javascript file. Free for non-commercial and commercial purposes. </p>  </div> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="container"> <x3d height='350px' style="width:100%;border: none;"> <scene> <Viewpoint position="-6.01862 3.33237 7.30177" orientation="-0.54233 -0.83298 -0.10961 0.76856" description="defaultX3DViewpointNode"></Viewpoint> <shape> <appearance> <material diffuseColor='1 0 0'></material> </appearance> <box></box> </shape> <transform translation='-3 0 0'> <shape> <appearance> <material diffuseColor='1 0.8 0'></material> </appearance> <cone></cone> </shape> </transform> <transform translation='3 0 0'> <shape> <appearance> <material diffuseColor='0 0 1'></material> </appearance> <sphere></sphere> </shape> </transform> </scene> </x3d> <div class="carousel-caption"> <h1>Place 3D data anywhere you like</h1> <p>The 3d context can be created without background or borders. Don't believe it? Just try to move the geometric objects next to this text...</p> <p><a class="btn btn-lg btn-default" href="http://doc.x3dom.org/tutorials/basics/hello/index.html" role="button">Learn more</a></p> </div> </div> </div> <div class="item">  <div class="container"> <x3d height='350px' style="width:100%;border: none;"> <scene> <inline url="https://examples.x3dom.org/x3dom_org_frontpage/bunny/bunny.x3d"> </inline> </scene> </x3d> <div class="carousel-caption"> <h1>Get started in 5 Minutes</h1> <p>Learn how to use X3DOM by checking out the "Hello X3DOM" tutorial</p> <p><a class="btn btn-lg btn-default" href="http://doc.x3dom.org/tutorials/basics/hello/index.html" role="button">Learn more</a></p> </div> </div> </div> <div class="item">  <div class="container"> <x3d height='350px' style="width:100%;border: none;"> <scene> <inline url="https://examples.x3dom.org/x3dom_org_frontpage/airplane/airplane.x3d"> </inline> </scene> </x3d> <div class="carousel-caption"> <h1>Browse the online examples</h1> <p>Browse through our large catalogue of online examples.</p> <p><a class="btn btn-lg btn-default" href="https://examples.x3dom.org" role="button">Browse example portal</a></p> </div> </div> </div> <div class="item">  <div class="container"> <x3d height='350px' style="width:100%;border: none;"> <scene> <inline url="https://examples.x3dom.org/x3dom_org_frontpage/x3dom_box/x3dom_box.x3d"> </inline> </scene> </x3d> <div class="carousel-caption"> <h1>Browse the documentation</h1> <p> Learn about all nodes available in X3DOM by visiting the official documentation pages</p> <p><a class="btn btn-lg btn-default" href="http://doc.x3dom.org" role="button">Go to documentation</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> <div class="container"> <div class="row marketing"> <h2>x3dom at a glance</h2> <p>It only takes a few lines of HTML Code to integrate a 3D scene into your page:</p> <pre class="col-md-6" style="height:240px;"> <x3d width='500px' height='400px'> <scene> <shape> <appearance> <material diffuseColor='1 0 0'></material> </appearance> <box></box> </shape> </scene> </x3d> </pre> <div class="col-md-6"> <x3d style="border:1px solid #999999;width:100%;height:240px;"> <scene> <Viewpoint position="-2.38102 1.93003 3.32581" orientation="-0.60610 -0.78384 -0.13504 0.81430" description="defaultX3DViewpointNode"></Viewpoint> <shape> <appearance> <material diffuseColor='1 0 0'></material> </appearance> <box></box> </shape> </scene> </x3d> </div> </div> <hr> <div class="row"> <div class="col-md-6 col-xs-12"> <p style="text-align: justify;">X3DOM (pronounced X-Freedom) is an open-source framework and runtime for 3D graphics on the Web. It can be freely used for non-commercial and commercial purposes, and is dual-licensed under MIT and GPL license.</p> <p style="text-align: justify;">X3DOM tries to support the <a title="X3D and HTML5 wiki" href="http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5" target="_blank">ongoing discussion</a> in the Web3D and W3C communities how an integration of HTML5 and declarative 3D content could look like, and it聽aims to fulfill the current HTML5 specification for <a title="declarative 3D content in HTML5" href="http://www.w3.org/community/declarative3d/" target="_blank">declarative 3D content</a> and allows including聽<a title="X3D Standard" href="http://www.web3d.org/" target="_blank">X3D</a> elements as part of any HTML5 DOM tree.</p> <div id="attachment_1696" style="width: 410px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-1696" class="size-medium wp-image-1696 " title="SVG, canvas, WebGL and X3DOM relation" src="https://www.x3dom.org/wp-content/uploads/2009/10/SVG-canvas-WebGL-and-X3DOM-relation-400x253.png" alt="SVG, canvas, WebGL and X3DOM relation" width="400" height="253" /></p> <p id="caption-attachment-1696" class="wp-caption-text">SVG, canvas, WebGL and X3DOM relation</p> </div> <p>The goal here is to have a live X3D scene in your HTML DOM, which allows you to manipulate the 3D content by only adding, removing, or changing DOM elements. No specific plugin or plugin interface (like the X3D-specific <a title="Scene access interface" href="http://web.archive.org/web/20100621142425/http://web3d.org/x3d/specifications/ISO-IEC-19775-2-X3D-SceneAccessInterface/Part02/SAI.html">SAI</a>) is needed. It also supports most of the HTML events (like "onclick") on 3D objects. The whole integration model is still evolving and open for discussion.</p> <p style="text-align: justify;">We hope to trigger a process similar to how the SVG in HTML5 integration evolved:</p> <ul> <li>Provide a vision and runtime today to experiment with and develop an integration model for declarative 3D in HTML5</li> <li>Get the discussion in the HTML5 and X3D communites going and evolve the system and integration model</li> <li>Finally it would be part of the HTML5 standard and supported by every major browser natively</li> </ul> <p> </div> <div class="col-md-6 col-xs-12"> </p> <h2>Publications</h2> <p style="text-align: justify;">More architectural and background information can be found in the following X3DOM-related papers (among others), published at the annual ACM Web3D conferences:</p> <ul> <li><a href="http://dl.acm.org/citation.cfm?id=2775299&CFID=673497952&CFTOKEN=15909221" target="_blank">webVis/instant3DHub: visual computing as a service infrastructure to deliver adaptive, secure and scalable user centric data visualisation</a>聽(2015)</li> <li><a href="http://dl.acm.org/citation.cfm?id=2628589" target="_blank">SRC - a streamable format for generalized web-based 3D data transmission</a>聽(2014)</li> <li><a href="http://dl.acm.org/citation.cfm?id=2628600" target="_blank"> Spatial data structures for accelerated 3D visibility computation to enable large model visualization on the web</a>聽(2014)</li> <li><a href="http://dl.acm.org/citation.cfm?id=2628592" target="_blank"> Enhancing the plant layout design process using X3DOM and a scalable web3D service architecture</a>聽(2014)</li> <li><a href="http://dl.acm.org/citation.cfm?id=2466547" target="_blank">Declarative integration of interactive 3D graphics into the world-wide web: principles, current approaches, and research agenda</a>聽(2013)</li> <li><a href="http://dl.acm.org/citation.cfm?id=2338714.2338717&coll=DL&dl=ACM&CFID=137607534&CFTOKEN=82170669" target="_blank">Using Images and Explicit Binary Container for Ef铿乧ient and Incremental Delivery of Declarative 3D Scenes on the Web</a>聽(2012)</li> <li><a href="http://dl.acm.org/citation.cfm?id=2010440" target="_blank">Dynamic and Interactive Aspects of X3DOM</a>聽(2011)</li> <li><a href="http://portal.acm.org/citation.cfm?id=1836049.1836077&coll=DL&dl=GUIDE&CFID=112886399&CFTOKEN=73403994&preflayout=flat" target="_blank">A scalable architecture for the HTML5/X3D integration model X3DOM</a>聽(2010)</li> <li><a href="http://portal.acm.org/citation.cfm?id=1559764.1559784&coll=DL&dl=GUIDE&CFID=112886399&CFTOKEN=73403994&preflayout=flat" target="_blank">X3DOM: a DOM-based HTML5/X3D integration model</a>聽(2009)</li> </ul> </div> </div> <hr> </div>   <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

- x3dom.org