同一段THREE.js资源加载脚本在不同页面调用时请求URL不一致问题

问题原因 #

你代码中使用的..//scenes//IR.json属于相对路径，浏览器解析相对路径时会以当前打开的视图页面的URL路径为基准：

• 第一个正常加载的视图页面的URL路径在站点根目录下（比如路径为https://localhost:44351/xxx），解析../之后就定位到了站点根目录，最终拼接出正确的根路径下的资源地址
• 第二个加载失败的视图页面的URL路径带有/Funtiongroup前缀（比如路径为https://localhost:44351/Funtiongroup/xxx），解析../之后只会退到/Funtiongroup层级，所以最终拼接的资源地址会多出Funtiongroup前缀

解决方案 #

• 方案1：直接使用站点根绝对路径
  将代码中的路径改为/scenes/IR.json即可，路径开头的/代表直接从站点根目录开始解析，和当前页面的路径无关，不管哪个视图调用都会指向根目录下的对应资源，多余的双斜杠可以去掉不影响解析，修改后代码如下：

function loadScene(scene) {
            var loader = new THREE.ObjectLoader();
            loader.load("/scenes/IR.json",
                function (obj) {
                    scene.add(obj);
                },
                function (x) {
                    console.log(x.loaded / x.total * 100 + '%')
                },
                function (err) {
                    console.log('Error: died.')
                }
            );
            return scene;
        }

• 方案2：配置全局根路径变量适配子目录部署
  如果你的项目后续可能部署在站点的子目录下，无法直接用根绝对路径，可以在项目的公共页面模板中定义全局根路径变量：

window.SITE_ROOT = '你的站点实际根路径';

加载资源时拼接路径即可：${window.SITE_ROOT}/scenes/IR.json

• 方案3：基于脚本本身路径定位资源
  如果这段代码写在独立的JS文件中，且资源和JS文件的相对路径固定，可以用document.currentScript.src获取当前脚本的路径，再拼接资源的相对路径，保证不管脚本被哪个页面引入，都能正确定位到资源。

内容的提问来源于stack exchange，提问作者grischdy