ThreeCSG.js最小示例

Question

我正在尝试学习Three.js的javascript构造性实体几何前端ThreeCSG.js。我想我应该从网络上复制一个最小的例子开始。我尝试使用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 7 64。我在IE上遇到了类似的问题。我认为这可能是three.js的一个错误/特性，所以我尝试了最新版本的three.min.js，但遇到了语法错误。(该示例使用的是较旧版本的threecsg.js，并且接口已更改。)

我做错了什么？

Answer 1

它不会下载值得注意的图像目录，因此无法加载，并在代码中抛出错误

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

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

Answer 2

您面临的问题称为CORS。你需要根据这篇github维基文章配置你的浏览器：

How to run things locally

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

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

Answer 3

如果你正在使用Chrome并且它只是为了测试，有一个Chrome扩展可以Allow-Control-Allow-Origin