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

【问题标题】：THREE.js - Can't load texture locallyTHREE.js - 无法在本地加载纹理
【发布时间】：2020-01-06 23:41:21
【问题描述】：

我有一个本地文件，我尝试在其中加载这样的纹理：

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 );

图像未显示（立方体为黑色）。当我将整个文件夹移动到服务器并从那里加载时，会显示图像。

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

【问题讨论】：

通过双击加载到桌面的文件和加载到服务器的文件在功能上存在很大差异。通常这是安全限制的问题，尤其是 Internet Explorer，但服务器通常具有可用的进程，而这些进程在桌面双击时不可用。这就是我们拥有服务器而不仅仅是连接桌面的原因。
哦，我很确定 loadTexture 使用 url 来访问纹理，并且只能从服务器获得。 WampServer 非常适合 Windows 并且易于安装。您可以将文件放在它的 www 目录中，然后使用 localhost/ 在浏览器中访问它们
查看thisthree.js wiki 文章是否对您有帮助 - 并检查您的控制台是否有错误。
@WestLangley：谢谢，--allow-file-access-from-files 解决了它。显然浏览器可以防止加载本地文件。

标签： javascript image three.js textures local

【解决方案1】：

您的问题是由于安全限制造成的。

运行本地服务器。

有关详细信息，请参阅three.js wiki 文章How to Run Things Locally。

three.js r.112

【讨论】：

@Bakuriu 假设原始OP的用例，那么图像与html文件在同一个文件夹中。在此文件夹中打开终端，运行python3 -m http.server，然后将浏览器指向localhost:8000。帮我解决了。

【解决方案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）

【讨论】：

【解决方案3】：

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

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

npm install http-server -g

运行：

http-服务器

然后进入默认的本地页面

http://localhost:8080/

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

【讨论】：

【解决方案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 */ }
    );

干杯！

【讨论】：