子目录中 HTML 文件中的相关问题从其他文件夹访问库

Question

我对使用 WebGL 的 HTML 文件中使用的库和模型的路径定义有疑问。 HTML 文件可以在 here 中找到，这是一本 WebGL2 书籍的示例代码。

HTML 文件本身位于我计算机的本地目录中。

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

图书馆和其他资源位于

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

我遇到问题的部分代码如下

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'
      };
    }

...

我在定义 href 和 src 的路径时遇到问题。还有 javascript 函数中的那个：

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

如果我使用 here 中发布的代码，我的 Google Chrome 中将不会显示任何内容，只是一个空白页面。

因此，我更改了

的路径

/common

相对路径：

./../common

但是，我仍然无法正确加载 HTML。我看到带有不完整菜单的网格地板，但汽车尚未显示，如下面的快照所示。

Answer 1

出于安全原因，Chrome 出于安全原因，不允许您通过 file:///... 加载本地文件。

此安全性的目的是防止外部资源访问您的系统，这可能允许他们修改或窃取文件

解决方案

最好的解决方案是在本地运行一个小型 http 服务器，因为您可以按照 this SO answer or this one.
中的步骤操作
或者，也许其他人会提出来，所以我会提到它，您也可以从 Google Chrome带有标志的命令行：--allow-file-access-from-files、但不推荐这样做 因为Chrome 不允许这种行为来保护您。

子目录中 HTML 文件中的相关问题从其他文件夹访问库

Issue with relative in HTML file in a subdirectory accessing libraries from other folders

html

path

解决方案