0

I am trying to make an X3DOM box shape containing an "ImageTexture" that accesses a local file. However, it seems to only be able to find my pictures when I give the "url" attribute an https:// link. Here is my code and the folder setup of the local picture file and html doc; "index.html" is the html file my code is from and "one.png" is the png picture I am trying to load onto the shape:

            <transform translation = "1.75 0 0">
                <shape>
                    <appearance>
                        <!--<material diffuseColor = "0 1 1"></material>-->
                        <ImageTexture  url="one.png"></ImageTexture>
                    </appearance>
                    <box size = "0 4 4"/>
                </shape>
            </transform>



            .
            ├── index.html
            ├── one.png
            ├── pics
            │   ├── 1.png
            │   ├── 2.jpeg
            │   ├── 3.jpeg
            │   ├── 4.png
            │   ├── 5.png
            │   └── 6.jpeg
            ├── style.css
            ├── test.html
            ├── x3dom.css
            └── x3dom-full.js

            1 directory, 12 files

The box shows up when I use the "material" tag, just not with images from local files. I am using the latest version of x3d - 1.8.1, what could be the issue for the images not showing up?

olibear
  • 13
  • 3

2 Answers2

0

First I would try with another picture (maybe a JPEG) to be sure it's not related to the picture itself. You can also test the picture by opening it with a photo editor. I know it sounds stupid but it happened to me.

Then, or maybe this should be the first test, look in the console (I suppose it's in the web so look for the console settings -> more tools -> developer tools) to see what error message you receive. That'll probably solve your issue.

Third, again might sound stupid but it can happen, put the absolute path to the image (e.g. url="C:/myPics/whatever/one.png"). Also you can try just adding "./" before the image name, e.g. url="./one.png"

Hope this helps!

Traian
  • 2,915
  • 1
  • 24
  • 32
0

The reason is pretty simple: X3DOM uses XMLHttpRequest which was not made to use the file:// protocol (although MDN states otherwise https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest).

However you could try to pass by it by specifying the full path: For Linux/Mac:

<transform translation = "1.75 0 0">
  <shape>
    <appearance>
      <!--<material diffuseColor = "0 1 1"></material>-->
      <ImageTexture  url="file:///home/bob/x3dom/one.png"></ImageTexture>
    </appearance>
    <box size = "0 4 4"/>
  </shape>
</transform>

For Windows:

<transform translation = "1.75 0 0">
  <shape>
    <appearance>
      <!--<material diffuseColor = "0 1 1"></material>-->
      <ImageTexture  url="file://C:/path/to/one.png"></ImageTexture>
    </appearance>
    <box size = "0 4 4"/>
  </shape>
</transform>

Furthermore in the past you had to pass some flags to the browsers in order to make it even possible see https://stackoverflow.com/a/30701845/698496 and How to launch html using Chrome at "--allow-file-access-from-files" mode?

If you are not familiar with running Apache or IIS you could use a Simple Python Server: https://doc.x3dom.org/gettingStarted/pythonSimpleHTTP/index.html

mistapink
  • 1,926
  • 1
  • 26
  • 37
  • Unfrotunately, none of these worked, including adding the flags from your link. However, something that I do notice is that the x3dom loading circle in the upper left of the scene does not stop circling when I try to load a local file. – olibear Dec 20 '19 at 00:44
  • I just validated the following: Close Chrome, Start Chrome from command line with `--allow-file-access-from-files` and open the URL `file:///path/to/my/page.html` which then had an image texture URL with `file:///path/to/my/texture.png` and it worked. I used X3DOM 1.8.2-dev, Build: 7051, Revison: 768ed81ad8d7151be8acc068514894e02e46fac3. I suggest you open the developer console and take a look at the errors or post them here, which may helps to give you the proper tips. – mistapink Dec 20 '19 at 11:03