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

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

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

Answer 1

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

运行本地服务器。

有关更多信息，请参阅three.js wiki 文章如何在本地运行事物。

三.js r.112

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）

Answer 3

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

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

npm install http-server -g

跑步：

http服务器

然后转到默认的本地页面

http://localhost:8080/

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

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 */ } );

干杯!