Question

我尝试了很多东西，但没有在网上找到任何东西。当我运行程序时，出现以下错误：XMLHttpRequest无法加载文件：/// C：/Users/winst/Documents/Programming%20Projects/Miner/textures/Dirt.jpg。跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https。

文件是我制作的一张简单图片，看起来有点像泥土。

这是我执行此操作的代码的一部分：

// load texture
var textureLoader = new THREE.TextureLoader();

var texture0 = textureLoader.load( 'textures/Dirt.jpg' );
var texture1 = textureLoader.load( 'textures/Dirt.jpg' );
var texture2 = textureLoader.load( 'textures/Dirt.jpg' );
var texture3 = textureLoader.load( 'textures/Dirt.jpg' );
var texture4 = textureLoader.load( 'textures/Dirt.jpg' );
var texture5 = textureLoader.load( 'textures/Dirt.jpg' );

var materials = [
    new THREE.MeshBasicMaterial( { map: texture0 } ),
    new THREE.MeshBasicMaterial( { map: texture1 } ),
    new THREE.MeshBasicMaterial( { map: texture2 } ),
    new THREE.MeshBasicMaterial( { map: texture3 } ),
    new THREE.MeshBasicMaterial( { map: texture4 } ),
    new THREE.MeshBasicMaterial( { map: texture5 } )
    ];
var material = new THREE.MeshFaceMaterial( materials );

// Combine everything together
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { material } ));

其余代码只需执行彩色立方体而不是侧面的图像，即可完美运行。我从另一个堆栈溢出问题中找到了上面的大多数代码，但是我的仍然无法正常工作。

请帮助我。：）

Answer 1

请求本地纹理时，您面临CORS问题。这是两个词-您的代码正试图请求由于安全问题而无法提供给程序的文件。

正如@ prisoner849所提到的-您应该首先阅读this article。它将为您提供有关如何使用本地THREE.js脚本中的文件的基本概念。

回答您的主要问题，这里有一个示例，说明如何为每个立方体面应用不同的纹理：

var cubeMaterials = [
    new THREE.MeshBasicMaterial({map: image1}),
    new THREE.MeshBasicMaterial({map: image2}),
    new THREE.MeshBasicMaterial({map: image3}),
    new THREE.MeshBasicMaterial({map: image4}),
    new THREE.MeshBasicMaterial({map: image5}),
    new THREE.MeshBasicMaterial({map: image6}),
  ];
  cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterials );

  var cubeGeometry = new THREE.BoxGeometry(100,100,100);
  var cube = new THREE.Mesh(cubeGeometry,cubeMaterials);

You can find working example here

在Three.js中制作带有图像作为边的多维数据集

1 个答案: