Get a black screen even with simple example codes

[nicholasqa]

Describe the bug
First off, congrats on the great tool! I'm sorry for the noob question, just started working with X_ITE + HTML today. I know a little about Python and little about HTML, so I I'm having a hard time. Hopefully this means my question is easy to solve :)

Is summary: I'm trying to open a .x3d geometry in any browser an manipulate it. This should be the absolute most simple code but unfortunately it is not working for me. When I open my HTML I only see a black screen, although if I right click the viewer area I can see the commands appear:

I am attaching the files I'm using, appreciate any help. My code was based in one of the examples available at https://andreasplesch.github.io/x_ite_dom/index.xhtml

As a side note, my final objective would be to open a VRML file in the browser, would that be possible?

To Reproduce
Steps to reproduce the behavior:

1. Save and extract attached files
2. Open html file in any browser
3. Blank black screen should appear (although view commands are accessible)

Expected behavior
A black screen will show up.

Screenshots

Desktop (please complete the following information):

• OS: Win 10 v.21H2
• Browser: Tested on MS Edge and Firefox
• Version: Latest from https://create3000.github.io/code/x_ite/latest/dist/x_ite.js

Smartphone (please complete the following information):
Not tested

Additional context
Again, I'm sorry for the noob question, didn't find anywhere else I could ask this question...
X_ITE_sample.zip

[andreasplesch]

Please try to load the Deer.x3d file without x_ite_dom.js first as shown here:

https://create3000.github.io/x_ite/#embedding-x_ite-within-a-web-page

[Also, the X3D.html file is actually an .xhtml file, not an .html file. You would need to rename it to .xhtml so the web browser can recognize it properly.]

[nicholasqa]

Hi Andreas! Thank you so much for the quick answer. I got the same behavior with the following file (created according to your comment).

I had to add "xmlns="http://www.w3.org/1999/xhtml" to the first line to make browser understand the XHTML extension.

Could you try it at your end?

Thanks :)
Debug xite.zip

[andreasplesch]

https://jsitor.com/brwY2dVy3 works fine.

[nicholasqa]

Still no luck:

What is your file structure? I'm just keeping all files in the same directory. Tried different browsers. Tried with html and xhtml extensions (for the latter I had to add "xmlns="http://www.w3.org/1999/xhtml" to the HTML tag so the browser could read it)

Thanks for the help!

[andreasplesch]

You need a server. A live web page will be necessary to further debug. You could try github pages.

[nicholasqa]

I just wanted to display local X3D and VRML files in a browser. I'm working on a project where these files come from a local application and I would create an HTML report with these results, and the web page would display these 3D geometries . Is that even possible?

Sorry for the confusion and appreciate any help :)

[andreasplesch]

Yes. that should be possible. Even for local files, you will need a simple http server. Python comes with one:

https://doc.x3dom.org/gettingStarted/pythonSimpleHTTP/index.html

Other options:

https://create3000.github.io/x_ite/#using-firefox-chrome-and-opera-with-local-files

[nicholasqa]

Hi Andreas,

I setup the server successfully using python, and I can see my files listed when I reach the server through the browser:

I'm calling the file through the HTML and this link works if used in the browser:

All of the css and js links at the top work as well:

But still no luck:

I'm trying to keep as simple as I can... any thoughts? I'd be open to have a quick call to debug, if that's better for you.

[create3000]

Please open the Developer Console of your browser and and look/post what output is there.

[create3000]

You can use relative paths, when the x3d is in the same folder as your html, you then only need src="Deer.x3d".

[nicholasqa]

You can use relative paths, when the x3d is in the same folder as your html, you then only need src="Deer.x3d".

I tried this in first place, it didn't work, that's why I tried with the server, after Andreas suggestion...

Please open the Developer Console of your browser and and look/post what output is there.

It looks like it can't load "Deer.x3d" but if I paste the same link on the browser it works fine.

[nicholasqa]

If I use a slightly different syntax (based on another example I got from "https://andreasplesch.github.io/x_ite_dom/index.xhtml"), the error changes a bit, and the behavior goes back to my first report, where the screen is black. See new syntax and error below:

These are the links I'm calling

[create3000]

In this image a CORS problem occurs. I also tried the python3 -m http.server 8023 server, and it worked for me, but note I use python3.

In this image the x_ite_dom.js is not loaded. Thus nothing can be displayed. You could try download it locally.

[andreasplesch]

Try without x_ite_dom.js first. But the cors error is unrelated. I think Holger suggested to try relative urls with the server running. I think it should work with the full url.

Perhaps the nonstandard port ? Unlikely, but you can quickly try:

https://unix.stackexchange.com/questions/24598/how-can-i-start-the-python-simplehttpserver-on-port-80

I think there chrome extensions for allowing cors.