0

I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.

The HTML file itself is sitting locally in the following directory in my computer.

C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html

The libraries and other sources are located in

C:\Users\bob\Desktop\Book
├───ch01
|   └───ch01_04_showroom.html
├───ch02
└───common
    ├───images
    │   └───cubemap
    ├───js
    ├───lib
    └───models
        ├───audi-r8
        ├───bmw-i8
        ├───ford-mustang
        ├───geometries
        ├───lamborghini-gallardo
        └───nissan-gtr

The parts of the code that I have issues with are in the following

ch01_04_showroom.html

<html>
<head>
  <title>Real-Time 3D Graphics with WebGL2</title>
  <link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />

  <!-- libraries -->
  <link rel="stylesheet" href="/common/lib/normalize.css">
  <script type="text/javascript" src="/common/lib/dat.gui.js"></script>
  <script type="text/javascript" src="/common/lib/gl-matrix.js"></script>

  <!-- modules -->
  <script type="text/javascript" src="/common/js/utils.js"></script>
  <script type="text/javascript" src="/common/js/EventEmitter.js"></script>
  <script type="text/javascript" src="/common/js/Camera.js"></script>
  
  ...
  
  <script type="text/javascript">
    'use strict';

    // ...

    function configure() {

      carModelData = {
        // This is the number of parts to load for this particular model
        partsCount: 178,
        // The path to the model (which I have issue with on my computer)
        path: '/common/models/nissan-gtr/part'
      };
    }

...

I have issue defining the path for hrefs and srcs. Also the one in the javascript function:

path: '/common/models/nissan-gtr/part'

If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.

So, I have changed paths from

/common

to relative paths:

./../common

but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot. enter image description here

afp_2008
  • 1,940
  • 1
  • 19
  • 46

1 Answers1

1

It's a security, Chrome doesn't let you load local files through file:///... for security reasons.

The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files

enter image description here

Solutions

  • The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.

  • Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.

Ben Souchet
  • 1,450
  • 6
  • 20