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文章How to Run Things Locally。

three.js r.65

Answer 2

为了进一步解释（因为我也很困惑），您可以安装本地服务器（我使用节点 - http://nodejs.org/download/来下载节点）。

之后，将服务器cd安装到项目目录并在命令行中运行：

npm install http-server -g

运行：

HTTP服务器

然后转到默认本地页面

http://localhost:8080/

你应该在那里看到你的项目。

Answer 3

如果您需要在项目中使用纹理，可以将图像转换为base64字符串，然后将它们分配给变量

以下是示例：https://codepen.io/tamlyn/pen/RNrQVq

var texture = new THREE.Texture();
texture.image = image;
image.onload = function() {
texture.needsUpdate = true;
};

从base64字符串中读取图像

所以你可以创建res.js并在那里写下所有的纹理:)它不是很好，因为如果你改变一些图像，你必须将它们重新转换为base64，但它可以在任何浏览器中工作（甚至是边缘女士）

Answer 4

可能迟到了晚会。

你实际上可以在不设置节点服务器的情况下做到这一点，除非当然，你还需要一个后端。

您基本上可以通过使用FileReader对象将本地图像转换为Base64字符串来将其加载到浏览器中。

将图像转换为Base64字符串后，您可以将其保存为sessionStorage（平均限制为〜4 Mb），或者在“app”运行时将字符串保存在某个变量中。< / p>

然后，您可以将base64字符串转换为three.js纹理，并将其应用于场景中的对象。 请注意以下示例中的异步渲染调用; 您必须在纹理完全加载后渲染场景，否则，它将无法显示。

在下面的情况中，我使用我上传到sessionStorage的图片加载了three.texture。

TEXTURE = THREE.ImageUtils.loadTexture(
      sessionStorage.getItem('myBase64Img');
      {},
      function () { renderScene(); /* async call after texture is loaded */ }
    );

干杯！

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

4 个答案: