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.

[create3000]

Here is a Chrome CORS extension https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

It could be that with this extension file:// protocol works, not tested yet.

[nicholasqa]

So, using local files directly won't work, it will complain it needs to be an http. If I call the local files using the http from the local server, I get a bunch of 404 errors:

I suppose I need other files besides x_ite.js, x_ite_dom.js and x_ite.css?

PS: tried different port, also enable this CORS extension but didn't made a difference...

[create3000]

You need to enable CORS see https://stackoverflow.com/questions/21956683/enable-access-control-on-simple-http-server use the checked answer, section "Python 3 solution", OR install a Chrome extension to enable CORS https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf.

[nicholasqa]

I did enable the CORS extension the other time, but it didn't work. Using the solution you sent gave similar 404 errors unfortunately.

Maybe my links/files are outdated? Any official ones I should use?

[andreasplesch]

I just checked here with x3dom.js:

Works fine with python3 http.server . Did not test with x_ite.js but should work the same.

Try 127.0.0.1 instead of localhost to make sure there is no name lookup issue.

[create3000]

It seems that it cannot be solved easily your localhost server problem. First of all, you need this localhost server, make sure your server is running properly, try simple html pages with local images. Search the Internet for how to setup a localhost server. Make sure everything is in the right folder.

Try using the IP address 127.0.0.1, this is the address for the name "localhost", it can be that the computer tries to resolve the name localhost in an Internet IP address. Google that problem.

[nicholasqa]

Hello Holger, Andreas,

First of all, I'd like to stress my appreciation for the help. Having this 3D images showing in the browser is a key aspect of my project. I'll try to summarize all I'm doing so hopefully you can see a mistake.

1. I start the server using the script I got from Stack Overflow (attached). I can reach any file on the directory using http://localhost:8000/filename which indicates the http server is working. This should have CORS enable by default. Using http://127.0.0.1:8000 didn't work.

2. I call the local css and js files from the server with the following lines in the HTML. All links work if simply copy and pasted to the browser.

3. I call the x3d file also using the http link. Link works if I copy and paste to browser.

4. I open the html file in browser. I added text, an image and a link, all appear fine. The x3d interface also seems to load correctly, but it is blank.

5. If I check the server console I can see it did not found many files:

6. If I check browser dev mode I can see the errors I sent previously.

I have created a screen recording and you can see it, and all files I'm using, in the attached file.

Could you please review the screen recording and files? I'm pretty sure the error should be something really dumb from my side, because the interface seems to be loading correctly.

Thanks again!
xite issue.zip

[create3000]

I can now reproduce the bug from the image, and as you say the answer is quite simple. X_ITE is not only the .js and the .css it is a folder with files (The files which are not found). The complete folder can be downloaded at https://create3000.github.io/x_ite/#download-x_ite (Download ZIP archive), you need to unpack the ZIP first. But wait, better use the remote urls (huuu, hopefully it works for you, but you can always try the ZIP folder):

<link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/latest/dist/x_ite.css"/>
<script type="text/javascript" src="https://create3000.github.io/code/x_ite/latest/dist/x_ite.min.js"></script>
<script type="text/javascript" src="https://raw.githack.com/andreasplesch/x_ite_dom/master/release/x_ite_dom.1.3.js"></script>

Another mistake is that the url in the line below must be quoted like this (single and double quote)

<Inline DEF="usedDeer" url='"http://localhost:8000/Deer.x3d"'></Inline>

Besides this you have put a DIV element with and IMAGE inside the HEAD element, this is not legal. Layout elements must be inside the BODY element. Only SCRIPT and LINK like stuff are content for the HEAD element.

I fixed your X3D.html, please try this.
X3D.html.zip

[nicholasqa]

THANK YOU!!! Worked perfectly with the urls. I could even open my wrl file which was my primary goal!

Looks like the http server is really needed since pointing to directly to a file wont work. But anyways, thank you so much for the help, now I can study more the examples and docs about X_ite to improve my project.

Have a great weekend!

[splace]

@nicholasqa

FWIW for playing with vrml, i use firefox and set;

security.fileuri.strict_origin_policy="false" (accessed in "about:config")

but....

this way local files are only loadable from a sub-directory.

[create3000]

Just for documentation: I just added a commit that fixes this problem when CORS is disabled in the web browser's setting, then even file:// protocol will work with X_ITE.

[create3000]

Firefox: about:config -> security.fileuri.strict_origin_policy -> false
Safari: Developer Menu -> Disable local file restrictions
Chrome: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=de + start chrome from command line with chrome --allow-file-access-from-files

[zzarkov]

Hi,
I also have a problem with black screen, ie. X-ITE is loaded but without a scene. It happens only when I open first page with a VRML on my site, after that when I open some other page with a world it works fine and when I get back to the first one it is ok, too. It is rather consistent, I have the same behavior with FF on Linux and using Chrome on Android. I didn't find answer to that particular problem here, any suggestion would be appreciated. Thanks

http://vrinternal.com/index.html

[create3000]

@zzarkov Do you still have the problem?

[zzarkov]

Hi Holger, No, it is ok now at least for myself, I have no one to test it. Shortly after my message the problem was gone by itself, I did nothing about it. I guess it was a new version of X_ITE. Thanks for the reply, Zlatomir PS. Is there some example code on how to use X_ITE and Electron?

…

On Fri, Aug 4, 2023 at 2:43 AM Holger Seelig ***@***.***> wrote: @zzarkov <https://github.com/zzarkov> Do you still have the problem? — Reply to this email directly, view it on GitHub <#109 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACM42KXGEE4JBWL33NEYACDXTRAULANCNFSM5SGI2SYA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

--

-- Zlatomir Zarkov http://www.vrinternal.com/

[create3000]

I have opened a new issue for that topic, how to use X_ITE and Electron?