ThreeCSG.js最小示例

Question

我正在尝试学习ThreeCSG.js，这是JavaScript Constructive Solid Geometry前端到Three.js。我以为我会先从网上复制一个简单的例子开始。我试图从网站

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

节约使用ThreeCSG.js钱德勒普劳尔的惊人的小的JavaScript构造实体几何实例的本地副本。当我做了网页的本地副本（使用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. 

我的浏览器是由铬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