ThreeCSG.js最小的例子

Question

我正在尝试学习ThreeCSG.js，这是对Three.js的javascript Constructive Solid Geometry前端。我想我会从网上复制一个最小的例子开始。我试图使用网站上的ThreeCSG.js保存Chandler Prall的本地副本，这是一个令人惊叹的小javascript Constructive Solid Geometry示例

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 7 64.我遇到了与IE类似的问题。认为它可能是three.js的bug /功能，我尝试了最新版本的three.min.js，但是语法错误。 （该示例使用旧版本的threecsg.js，并且API已更改。）

我做错了什么？

Answer 1

它没有下载图像目录，因此值得注意加载并在代码

中抛出错误

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

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

Answer 2

您遇到的问题称为CORS。 您需要根据此github wiki文章配置浏览器：

How to run things locally

粘贴没有进一步信息的链接是不好的做法，但设置取决于您使用的浏览器。

另一个解决方案是在本地服务器上运行它，如何在第二个链接中解释。

Answer 3

如果您使用Chrome并且仅用于测试，那么Chrome扩展程序将Allow-Control-Allow-Origin

Answer 4

主要问题是您是在本地获取文件。需要从服务器获取该文件。因此，最好的选择是使用一些像net bean这样的IDE并将其作为Web应用程序执行