ThreeCSG.js最小示例

Question

我正在尝试学习ThreeCSG.js，这是Three.js的JavaScript构造实体几何前端。 我以为我将从网络上复制一个最小的示例开始。 我尝试使用网站上的ThreeCSG.js保存Chandler Prall的惊人小javascript构造实体几何示例的本地副本

https://stemkoski.github.io/Three.js/CSG.html

当我制作页面的本地副本时（使用Chrome的“另存为网页”，完成命令），我发现缺少棋盘格纹理文件。 我收到以下JavaScript控制台错误：

Failed to load resource: net::ERR_FILE_NOT_FOUND

包含（丢失）jpg文件的完整路径名。 当我手动下载jpg文件并将其放在Chrome寻找jpg文件的位置时，出现了另一个错误：

The cross-origin image at file:///C:/tmp/images/checkerboard.jpg may not be loaded.

我的浏览器是Chrome 43.0.2357.134，Windows 764。我也遇到了IE的类似问题。 考虑到可能是three.js的错误/功能，我尝试了Three.min.js的最新版本，但语法错误。 （该示例使用了较旧的Threecsg.js版本，并且API发生了变化。）

我究竟做错了什么？

Answer 1

它不会下载图像目录，因此值得注意的是加载它并在代码中引发错误

var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );

您需要下载该图像并使用任何网络服务器来呈现html页面，因为它正在发出ajax请求来呈现该图像

Answer 2

您面临的问题称为CORS 。 您需要根据以下github Wiki文章配置浏览器：

如何在本地运行事物

粘贴链接而不提供更多信息是不明智的做法，但是设置取决于您使用的浏览器。

另一个解决方案是在本地服务器上运行它，第二个链接中也介绍了如何执行此操作。

Answer 3

如果您使用的是Chrome，并且仅用于测试，则有一个Chrome扩展程序，它将允许-控制-允许-起源

Answer 4

主要问题是您正在本地获取文件。 需要从服务器获取文件。 因此，最好的选择是使用诸如Net Bean之类的IDE并将其作为Web应用程序执行