加载带有THREE.JS中纹理的OBJ/MTL文件时出现跨域问题

我有一个由单独域上的服务器动态生成的OBJ文件。它有一些材质和纹理JPG文件

我使用一个简单的php代理文件proxy.php加载这个OBJ文件：

<?php
 header('Access-Control-Allow-Origin: *');
 header("Access-Control-Allow-Credentials: true"); 
 header('Access-Control-Allow-Headers: X-Requested-With');
 header('Access-Control-Allow-Headers: Content-Type');
 header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT'); // http://stackoverflow.com/a/7605119/578667
 header('Access-Control-Max-Age: 86400');

//Check if this is an image. if So print coorect header.
if (strpos($_REQUEST['fileToProxy'],'jpg') !== false) {

     header('Content-Type: image/jpeg');

}


$proxyFile = (isset($_REQUEST['fileToProxy'])? $_REQUEST['fileToProxy'] : null);

if ( isset($proxyFile)){
  // the files sent to us aren't properly url encoded
  $proxyFile = str_replace(' ', '+', $proxyFile);

  $content = file_get_contents($proxyFile);

  print($content);
}
else {
  echo "ERROR: no file to proxy";
}



?>

这就是我真正做的。加载器正确地表达了材质和纹理。

---

我不需要设置任何材质。

您需要为图像明确设置crossorigin属性。从我自己的一个例子中复制：

图像[id]。图像=新图像

图像[id]。image.crossOrigin=匿名

images[id].image.onload=函数{/*此处文件的WebGL纹理加载*/}

图像[id]。图像.src=

---

我加载了您上面提到的图像，它在浏览器中作为纹理正确地为我工作。

我只想为其他人放在这里。 当我试图从静态谷歌地图图像加载图像时，我遇到了一个非常类似的问题。 这就是我所做的

THREE.ImageUtils.crossOrigin = "anonymous";

就在加载实际纹理之前。

---

现在它开始工作了，我可以毫无问题地加载图像。

我经常开玩笑说我的项目失败了，因为我忘了一个分号。嗯，这次可不是开玩笑。有人在最新版本的ThreeJS中忘记了分号。我深入研究了objmtloader.js引用的MTLLoader.js，发现MTLLoader原型构造函数底部附近的这一行缺少分号：

materialCreator.crossOrigin = this.crossOrigin

这将扼杀所有材料的跨站点共享。我把分号加回到

materialCreator.crossOrigin = this.crossOrigin;

---

…世界又恢复了正常。

我知道这是一个老问题，但我只是花了几个小时来解决同一问题，所以我想我会在这里为遇到这个问题的未来用户发布一个答案。这个解决方案非常简单，但不幸的是，在我能看到的任何地方都没有文档记录。我发现它纯属运气不佳

var loader = new THREE.OBJMTLLoader( manager);
loader.crossOrigin = ''; //  <-- this is all you need to add!

///////////////////LOAD MDOEL////////////////////
loader.load( 'http://obj_url.com', 'http://mtl_url.com', function ( object ) {                                              
    //if loaded, do some stuff here.                                                   
}
loadedmodel.add(object);

如果上面的代码中不清楚，那么您只需要添加行加载器；在声明OBJMTLLoader之后

---

我希望这对将来的人有帮助

请原谅我的无知。但是我该怎么做呢？地址始终会更改，因为这些纹理是动态生成的。此外，如果我只应用一个标准的lambert材质和代理中的纹理，它也可以正常工作。当纹理通过OBJ/MTL加载器应用时，问题就出现了。我指定的代码在客户端浏览器的客户端Javascript上运行。无论在何处使用Javascript加载图像，都需要为图像指定此属性。纹理本身在MTL文件中指定。在这种情况下，如何定义纹理的交叉组织属性？非常感谢您的帮助。您如何使用Three.js在客户端加载OBJ？您是否尝试添加Three.ImageUtils.crossOrigin=；在three.js调用加载之前？太好了，谢谢。我在Apache上也有跨源设置。这很有效。

var loader = new THREE.OBJMTLLoader( manager);
loader.crossOrigin = ''; //  <-- this is all you need to add!

///////////////////LOAD MDOEL////////////////////
loader.load( 'http://obj_url.com', 'http://mtl_url.com', function ( object ) {                                              
    //if loaded, do some stuff here.                                                   
}
loadedmodel.add(object);