Question

这里有一个简单而顽固的问题THREE.js，我需要帮助。

我注意到当我链接传递URL的three.js 3D对象时，一切似乎都运行正常。但是当我通过相对路径时，只出现黑色窗口。下面的工作代码：

        var jsLoader = new THREE.JSONLoader();
        jsLoader.load('http://codepen.io/nickpettit/pen/nqyaK.js', function(geometry) {
            var material = new THREE.MeshPhongMaterial();
            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            mesh.scale.set(10,10,10);
        });

当我尝试使用＆＃39; models / model.js＆＃39;相反（它只是位于上述URL中的对象的副本），它不起作用。

我确定此路径是正确的，因为我已经以类似的方式链接了three.js构建文件（位于＆＃39; js / three.js＆＃39;）。我做错了什么？

PS我正在使用Arch Linux。

Answer 1

猜猜......

路径相对于javascript文件的位置。

我们假设js文件位于/lib/app.js，模型的路径为../models/model.js。

最简单的方法是始终使用本地绝对路径，例如/models/model.js。

当您链接three.js构建文件时，它正在工作，因为您的html文件可能位于根目录，因此lib/three.js与/lib/three.js

相同

如果您使用过网络调试器，您应该会发现它不是一个three.js问题，但实际上是路径问题：）

Answer 2

阅读this page。您正面临 same origin policy 限制，无法从文件系统加载。除了页面中提到的解决方案之外，您还可以设置 AMP 本地服务器，并通过 localhost 在浏览器中寻址您的页面。

Andreas Anyuru 在他的书 Professional WebGL Programming （第214页）中解释了纹理同源政策的原因;这同样适用于模型：

在规范开发过程中，安全专家Steve Baker指出，通过编写一个特殊的片段着色器可以找出纹理的内容，然后在用户访问恶意网站时将其上传到GPU。片段着色器可以测量测试纹理元素颜色所需的时间，从这时起它可以计算纹理中纹理元素的亮度。还有一个概念证明实施证明这种攻击实际上是可行的。

JSONLoader对象链接 - URL工作正常，相对路径不行

2 个答案: