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。没有使用其他库。

- Daew

---

通过双击在桌面上加载的文件和在服务器上加载的文件之间的功能存在很大差异。通常，这是由于安全限制，特别是在Internet Explorer中，但是服务器通常具有桌面双击不可用的进程。这就是为什么我们需要服务器而不仅仅是连接桌面的原因。 - KellyCode

哦，我很确定loadTexture使用URL来访问纹理，而这只能从服务器上获得。WampServer非常适合Windows并且易于安装。您可以将文件放入其www目录中，并使用localhost在浏览器中访问它们。 - KellyCode

看看这篇 three.js 维基文章是否有帮助——并检查您的控制台是否有错误。 - WestLangley

@WestLangley：谢谢，--allow-file-access-from-files解决了问题。显然浏览器有防止加载本地文件的保护措施。 - Daew

Answer 1

您的问题是由于安全性限制引起的。

运行本地服务器。

有关更多信息，请参见three.js wiki文章《如何在本地运行事物》（How to Run Things Locally）。

three.js r.112

- WestLangley

---

@Bakuriu 假设原始 OP 的使用情况，那么图像位于与 html 文件相同的文件夹中。打开终端进入此文件夹，运行 python3 -m http.server，然后将浏览器指向 localhost:8000。这对我解决了问题。 - Tim MB

Answer 2

如果您需要在项目中使用纹理，可以将图像转换为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，但它适用于任何浏览器（甚至Ms Edge）

- proggamer12

Answer 3

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

之后，要安装服务器，请在命令行中转到您的项目目录并运行：

npm install http-server -g

运行：

http-server 然后转到默认本地页面

http://localhost:8080/

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

- mario

Answer 4

可能又是来得太晚了。

实际上，您可以在不设置节点服务器的情况下完成此操作，除非当然您需要任何后端。

您可以通过使用FileReader对象将本地图像转换为Base64字符串，并将其加载到浏览器中来实现此目的。

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

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

在下面的示例中，我使用我上传到sessionStorage的图像加载了three.texture。

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

干杯！

- Ali Hammoud