Question

我正在编写一个WebGL - 使用纹理的Three.js应用程序，并且一直在http://stemkoski.github.com/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 );

我认为这个问题：Problems with MeshFaceMaterial since revision 54 (Update 2)也可能与我面临的问题有关，但是，我不确定如何实现答案。调用THREE.GeometryUtils.setMaterialIndex会去哪里？

感谢您的帮助。

Answer 1

使用--allow-file-access-from-files或本地网络服务器的一个不错的选择是使用Dropbox中的公共文件夹。

它可以消除使用标记的安全问题以及每当您想要查看页面时启动本地网络服务器的麻烦。

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

Answer 2

XAMPP将解决您的问题。我已经使用了5年以上，非常容易。

https://www.apachefriends.org/index.html

Answer 3

只有在启动时没有打开任何其他选项卡/窗口时，

--allow-file-access-from-files（以及其他标志）才会起作用。但是，这会使您的其余浏览体验不那么安全，因此本地运行的真正解决方案是使用一个小的本地Web服务器来提供文件。 three.js wiki甚至three.js sources都有很多例子。

查看THREE.CubeGeometry sources，似乎已经为每张脸设置了不同的素材索引。对于替代方法，here's my cubemap based code for skybox。

Three.js：地图和属性未定义＆amp;在本地使用图像

3 个答案: