THREE.js - 无法在本地加载纹理

Question

我有一个本地文件,我尝试加载这样的纹理:

var texture = THREE.ImageUtils.loadTexture( 'image.jpg' );
var cubeGeo = new THREE.CubeGeometry( 50, 50, 50 );
var cubeMat = new THREE.MeshBasicMaterial( { map: texture } );
var cube = new THREE.Mesh( cubeGeo, cubeMat );
scene.add( cube );

图像未显示(立方体为黑色).当我将整个文件夹移动到服务器并从那里加载它时,将显示图像.

我的问题是,为什么文件在服务器上而不是在我的计算机上时它可以工作？已复制所有文件,因此丢失文件不是问题.我也试过绝对路径,但仍然没有结果.我是否必须更改计算机上的某些设置？我在Windows 7上尝试使用Chrome 32.0.1700.76 m(在编写本文时的最新版本),我正在使用THREE.js r64.没有使用其他库.

Answer 1

您的问题是由于安全限制.

对于Chrome,您可以使用命令行标志运行浏览器--allow-file-access-from-files.

或者,您可以运行本地服务器.

有关更多选项,请参阅three.js wiki文章如何在本地运行.

three.js r.65