使用require.js加载XML3D

Question

XML3D doesn't work with require.js even if one make sure its loaded first and use " shim " configuration option (for non-AMD modules).

I've following code:

index.html that contains xml3d tags

<xml3d>
...some stuff..
</xml3>
<script data-main="scripts/main.js" src="scripts/require.js"></script>

main.js

requirejs.config({
  paths: {
    xml3d: *url*
  },
  shim: {
    'xml3d': { exports: 'XML3D' }
  }
});

requirejs(['xml3d'], function (XML3D) { console.log(XML3D) // that works });

The console.log code shows proper info, however the XML3D canvas isn't properly opened (its shrinked to small area and no objects are rendered).

And, Yes putting

 <script src="xml3D url"></script>

instead using require.js works OK (everything is rendered.) So this code below works (composed of index.html without main.js ).

<xml3d>
...some stuff..
</xml3>
<script src="url of XML3D"></script>

Answer 1

You're right, this was a simple oversight in the way XML3D is initialized. We were registering a listener for DOMContentLoaded without checking the document.readyState first, so logically by the time require.js had loaded XML3D the DOMContentLoaded event had already been dispatched.

The fix will be part of the upcoming 4.9.4 release and is sitting on the hotfix-4.9.4 branch .

There's no easy workaround in the mean time (unless you want to fire the DOMContentLoaded event manually after XML3D has been loaded through require.js, which is pretty messy) but you could either build the hotfix branch or pull the fix into your copy of xml3d.js since it's only a couple of lines.