2

我正在编写一个使用纹理的 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 的调用会去哪里？

谢谢你的帮助。

4

3 回答 3

1

--allow-file-access-from-files使用本地网络服务器的一个很好的替代方法是使用Dropbox中的 Public 文件夹。

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

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

于 2013-03-25T20:41:26.457 回答
1

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

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

于 2015-03-31T00:34:00.187 回答
0

--allow-file-access-from-files（和其他标志）只有在启动时没有打开任何其他选项卡/窗口时才会起作用。但是，这会使您的其余浏览体验不那么安全，因此在本地运行的真正解决方案是使用小型本地 Web 服务器来提供文件。在three.js wiki甚至是three.js 源代码中都有很多示例。

查看THREE.CubeGeometry 消息来源，似乎已经为每个面设置了不同的材质索引。对于替代方法，这是我的基于立方体贴图的 skybox 代码。

于 2013-03-25T09:48:20.040 回答