Javascript Three.js：映射和属性未定义&；在本地使用图像

我正在编写一个WebGL-Three.js应用程序，它使用纹理，并一直在使用上的教程。当我尝试在本地运行该页面时，会出现以下错误

Uncaught TypeError: Cannot read property 'map' of undefined Three.js:2728
Cross-origin image load denied by Cross-Origin Resource Sharing policy. index.html:1
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600
Cross-origin image load denied by Cross-Origin Resource Sharing policy. index.html:1
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600
Uncaught TypeError: Cannot read property 'attributes' of undefined Three.js:3600

我知道跨源资源共享策略与在本地使用图像有关。但是，即使在使用目标打开的Chrome窗口中也会出现这种情况：

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

我可能是因为我用的是过时的开关吗？我要做的是通过快捷方式打开Chrome浏览器，然后在地址历史记录中查找index.html文件的位置

下面是我写的一些代码，我认为这些代码与手头的问题最相关

var materialArray = [];
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-xpos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-xneg.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-ypos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-yneg.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-zpos.png" ) } ) );
materialArray.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/skybox-zneg.png" ) } ) );
for ( var i = 0; i < 6; i++ )
{
    materialArray[ i ].side = THREE.BackSide;
}
var skyboxMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
ShapeShifter.skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
ShapeShifter.scene.add( ShapeShifter.skybox );

var materialArray=[]；
materialArray.push（新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（“img/skybox xpos.png”）}）；
materialArray.push（新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（“img/skybox xneg.png”）}）；
materialArray.push（新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（“img/skybox ypos.png”））））；
materialArray.push（新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（“img/skybox yneg.png”））））；
materialArray.push（新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（“img/skybox zpos.png”）}）；
materialArray.push（新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（“img/skybox zneg.png”）}）；
对于（变量i=0；i<6；i++）
{
材料排列[i]。侧面=三。背面；
}
var skyboxMaterial=新的三个网格面材质（materialArray）；
var skyboxGeom=新的三立方测量法（5000,5000,5000,1,1,1）；
ShapeShifter.skybox=新的三点网格（skyboxGeom、skyboxMaterial）；
ShapeShifter.scene.add（ShapeShifter.skybox）；

我想这个问题：可能也与我所面临的有关，但是，我不确定如何实现这个答案。对THREE.GeometryUtils.setMaterialIndex的调用将转到哪里

感谢您的帮助。

--允许从文件访问文件（和其他标志）只有在启动时没有打开任何其他选项卡/窗口时才有效。但是，这会降低您其余的浏览体验的安全性，因此在本地运行东西的真正解决方案是使用一个小型本地web服务器来为文件提供服务。现在甚至将来都有很多例子

查看
THREE.CubeGeometry
，似乎已经为每个面设置了不同的材质索引。对于替代方法，.
使用<代码>--允许从文件访问文件

或本地Web服务器的一个好替代方法是使用中的公用文件夹

它消除了使用该标志的安全问题，以及每当您想查看页面时启动本地Web服务器的麻烦

---

您可以在本地处理页面，同步后，您可以通过访问dropbox自动为文件生成的公共链接来查看页面。

XAMPP将解决您的问题。我已经用了5年多了，非常简单

---

哦，dropbox是个很棒的主意！实际上我已经在用它在我的笔记本电脑和个人电脑之间共享文件了，我从来没有想过用Dropbox来托管它。谢谢谢谢你的链接。我去看看。在Firebug中，我得到了一个关于Three.js中属性的错误，但我将使用一个老教程中的代码来解决这个问题。谢谢