jsfiddle.net 上未加载外部资源的三个.js 示例答案

【问题标题】：three.js example with external resources not loading on jsfiddle.netjsfiddle.net 上未加载外部资源的三个.js 示例
【发布时间】：2015-05-12 01:58:14
【问题描述】：

我正在尝试让这个示例项目工作： github.com/josdirksen/learning-threejs/blob/master/chapter-09/07-first-person-camera.html

我已经尝试在我的 pages.github.io 帐户上镜像代码，并为在 jsfiddle 上运行代码进行了一些小修改。

IE。 jsfiddle.net/bk4wm7sf/（来自：/5hcDs/）

我对示例所做的唯一更改是修改了文件位置（使用 rawgit.com 作为 CDN 的资源手动上传到 jsfiddle）并删除了 html 代码。

例如：

var texture = THREE.ImageUtils.loadTexture('../Metro01.JPG');
//texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
loader.load('../city.obj', '../city.mtl', load);

我也试过了：

var texture = THREE.ImageUtils.loadTexture('https://rawgit.com/josdirksen/learning-threejs/master/assets/textures/Metro01.JPG');
//texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
loader.load('https://rawgit.com/josdirksen/learning-threejs/master/assets/models/city.obj', 'https://rawgit.com/josdirksen/learning-threejs/master/assets/models/city.mtl', load);

其他尝试： /zy448tn2/ & /jw20wtq5/（这个有rawgit url）

我认为成品应该是这样的： http://www.smartjava.org/ltjs/chapter-09/07-first-person-camera.html

通过将 jsfiddle 设置“RequestAnimationFrame”从 onLoad 更改为“onDomready”，我看到了一些改进，但 city.obj 文件仍未呈现。

我是 javascript/three.js 的新手，所以我怀疑这是一个愚蠢的问题吗？任何帮助表示赞赏。

更新：好的，所以我能够解决 404 错误。

我使用来自浏览器的 javascript 控制台的反馈在 jsfiddle 上尝试了大约 14 种不同的转速。即：/bk4wm7sf/1/ 等。

当我的控制台错误消息开始根据我上传的文件 three.js 的特定版本而变化时，我最终感到沮丧。

我认为这已经将问题隔离到“index.html”文件，但我的想法已经不多了...... github.com/cantren/cantren.github.io/blob/master/index.html

现在我的 javascript 控制台正在读取：

THREE.WebGLRenderer 63
2OBJMTLLoader.js:447 THREE.OBJMTLLoader: Unhandled line usemtl

【问题讨论】：

如果您在浏览器中打开控制台，大多数外部资源都是 404，也许它们在登录屏幕后面？
另外，在加载纹理图像时会遇到 CORS 问题。阅读this
2pha，感谢您提供有关 CORS 问题的提示。那种“领域知识”要我花很长时间才能独立找到。我目前正在使用 cantren.github.io 进行调试，但是一旦我有这个示例工作，我会将代码移回 jsfiddle.net。

标签： javascript html dom three.js

【解决方案1】：

我只是对“已知良好”页面源逐字逐句按 Ctrl+C 和 Ctrl+V，然后只修改文件位置。这次它奏效了。不知道为什么。可以运行“diff”/“diffchecker.com”，但它现在可以运行，所以我很高兴。感谢您的帮助！

【讨论】：