Testing X3D

A number of tests failed either due to cross-origin issues or servers not serving the correct MIME type. For example, turns out that the church's web server I using does not serve X3D files with the correct MIME type, serves them as text files. Google Docs has a similar issue serving .html files.

Test 1

x-ite model on StM web site

    <script src="https://create3000.github.io/code/x_ite/latest/x_ite.min.js"></script>
    <x3d-canvas src='https://www.stmichaels-abingdon.org.uk/cave_model.x3d'></x3d-canvas>
    

FAIL: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.stmichaels-abingdon.org.uk/cave_model.x3d. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200

Test 2

Load x-ite model from StM into new tab in browser

    https://stmichaels-abingdon.org.uk/x_ite_test.html
    

WORKS

Test 3

Using X3D DOM, loading html file incorporating the X3D model and links to X3DOM from church web site into iframe

In this document

      <iframe width="1280" height="800" src="https://stmichaels-abingdon.org.uk/x3d_test-6_stm.html" title="x3d_test-6_stm.html">
      </iframe>
    

In x3d_test_6_stm.html; JavaScript and CSS stored on StM server

                <script type='text/javascript' src='x3dom.js'> </script> 
            <link rel='stylesheet' type='text/css' href='./x3dom.css'></link> 
    

WORKS - displays on web page

Test 4

In a test google site, didn't publish the site so this is just the editor view

Selected embed then inserted code:

      <iframe width="1280" height="800" src="https://stmichaels-abingdon.org.uk/x3d_test-6_stm.html" title="x3d_test-6_stm.html">
      </iframe>
    

Fiddled with resizing the containing box in the editor, finally got this page image

screen shot of google site editor

Still an issue with sizes, may need to scale the X3D

WORKS

Test 5

From local host.

Using iframe, smaller model, scaled by 1.0 and <x3d width='960px' height='480px'>:

      <iframe width="980" height="500" src="https://stmichaels-abingdon.org.uk/x3d_test-6_stm_smaller.html" title="x3d_test-6_stm_smaller.html">
      </iframe>
    

Summary

Suggests that if we can host a html file containing the model on SOTS or similar and possibly storing JavaScript and CSS on same server, we can display the model in a google site page.