Getting started with JSC3D. Creat a simple file viewer in JSC3D. File not loading

Question

I have just started using JSC3D.

I have followed the getting started guide in the documentation: https://code.google.com/p/jsc3d/wiki/GettingStarted

The code seems fine but my file does not seem to load, the loading bar just freezes.

 <!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Loader</TITLE>
<script type="text/javascript" src="jsc3d/jsc3d.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script>
</HEAD>

<BODY>
<div style="width:800px; margin:auto; position:relative;">
    <canvas id="cv" style="border: 1px solid;" width="750" height="400">
        It seems you are using an outdated browser that does not support canvas :-(
    </canvas>
</div>

<script type="text/javascript">
        var viewer = new JSC3D.Viewer(document.getElementById('cv'));
        viewer.setParameter('SceneUrl',         'cube.obj');
        viewer.setParameter('ModelColor',       '#CAA618');
        viewer.setParameter('BackgroundColor1', '#E5D7BA');
        viewer.setParameter('BackgroundColor2', '#383840');
        viewer.setParameter('RenderMode',       'flat');
        viewer.init();
        viewer.update();
    </script>

</BODY>
</HTML>

Does anyone know where I am going wrong?

Regards,

Mr B

EDIT: Seem to work fine when not testing in chrome. Could be a problem with loading external files in chrome.

The problem is you did not host your site on any server. – Neo Mar 30 '17 at 06:08 — Neo, Mar 30 '17 at 06:08

score 0 · Answer 1 · answered Oct 18 '14 at 23:43

First if you display live URL will be easier to help :)

I think you have a problem with the path to the JS jsc3d flies:

<script type="text/javascript" src="jsc3d/jsc3d.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script>

That works well for me when the paths are correct (with your html code). You can check the paths in the source code of the page and see if it's true.

I hope I helped you!

score 0 · Answer 2 · edited May 23 '17 at 12:17

The JSC3D demos (e.g., Statue) work fine when viewed from a server, however when the identical code is run from the local filesystem it fails to load models in either IE or Chrome. (IE says nothing about loading, Chrome displays a progress bar and hangs). Other viewer information (background colors, background image, option controls for the BMW demo, etc.) is displayed properly. And the Avatar demo, which contains the model definition in the html file instead of an external file, runs properly when stored on the local filesystem.

Chrome discloses the problem -- the browser believes that an HTML file on the local filesystem trying to load an object from the local filesystem is a cross-site scripting attack and blocks the load:

XMLHttpRequest cannot load file:///X:/jsc3d/demos/bank/Western_Bank.obj. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.JSC3D.ObjLoader.loadObjFile @ jsc3d.js:5117
jsc3d.js:5111 The XMLHttpRequest progress event property 'position' is deprecated. Please use 'loaded' instead.
jsc3d.js:5111 The XMLHttpRequest progress event property 'totalSize' is deprecated. Please use 'total' instead.
jsc3d.js:5117 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///X:/jsc3d/demos/bank/Western_Bank.obj'.

The routine JSC3D.ObjLoader.loadObjFile (jsc3d.js lines 5071-5118) uses xhr to load objects regardless of the protocol scheme of the object file.

How to open a local disk file with Javascript? describes how to read a file from the local disk, and in order to work with local files loadObjFile() apparently needs to be modified to include a special case using FileReader instead of xhr when the object file URL refers to the local filesystem.

And even if jsc3d were modified to use FileReader, it still apparently would not work by default, according to Chrome FileReader. The browser needs to be started with the --allow-file-access-from-files switch.

Getting started with JSC3D. Creat a simple file viewer in JSC3D. File not loading

2 Answers2