polymerpolymer-1.0x3dom

How to use x3dom with polymer?


I have a polymer site where I'd like to use the x3dom library to view an external x3d file, and simply be able to rotate the loaded 3D scene 360 degrees.

Has anyone successfully used x3dom with polymer? I don't see any reason why this wouldn't work. Please assume I have all the polymer stuff correct (which I have) and have loaded the prerequisite x3dom.js script and x3dom.css in the head of the page too. This is just a stripped down code snippet to show key bits:

 <x3d width='350px' height='400px'>
      <scene>
           <inline nameSpaceName="myNS" mapDEFToID="true" url="{{_x3dPath}}"></inline>
      </scene>
 </x3d>

 <script>
      Polymer({
           properties: {
                _x3dPath: {type: String},
           }, 

           ready: function() { 
                this._x3dPath = "/someDynamicPath/threeDfile.x3d";
           }
      });
 </script>

Any suggestions?


Solution

  • You need to create a custom element that serves as a wrapper for the 3rd party library. (e.g x3dom-wrapper.html ).

    Inside that file, you must add the script reference to x3dom .js

    <script type="text/javascript" src='../bower_components/x3dom/x3dom.js'></script>
    

    Then, you need to import the wrapper custom element like any other polymer component. That way you ensure the x3dom dependency will be available when you need it.

    Edit: Wrapping the library is still a good practice but not the cause of your problem. I did a quick test and found that you must call x3dom.reload() on your "ready" polymer event handler. That way x3dom system reloads properly