three.js：本地纹理加载有效，但远程无效

Question

我已经为 Loader 对象修改了一个 official example 来演示我的问题。我想创建一个网格，其中最好在创建几何体之前加载纹理贴图。目前我遇到的问题是本地文件加载正常，但远程文件加载不正常。查看实际行为：

工作演示（本地）：http://nylkiway.net/loadertest_local.html
不工作演示（远程）：nylkiway。net/loadertest_remote。html

使用加载器加载本地保存的 .jpg 纹理在最终网格上显示良好，如工作演示所示：

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>three.js webgl - loaders - OBJ loader</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
  <div id="info">
    <a href="http://threejs.org" target="_blank">three.js</a> - image loader test
  </div>

  <script src="libs/three.min.js"></script>

  <script>

  var container;

  var camera, scene, renderer;

  var mouseX = 0, mouseY = 0;

  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;


  init();
  animate();


  function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 100;

    // scene

    scene = new THREE.Scene();

    var ambient = new THREE.AmbientLight( 0x101030 );
    scene.add( ambient );

    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 );
    scene.add( directionalLight );

    // texture
    var manager = new THREE.LoadingManager();
    var texture = new THREE.Texture();

    var loader = new THREE.ImageLoader( manager );
    loader.load( 'avatar.jpg', function ( image ) {

    // uncomment next line, and comment above, to see the problem!

    //loader.load( 'http://nylkiway.net/avatar.jpg', function ( image ) {

      texture.image = image;
      console.log("debug. image size: " + image.width + " X " + image.height );
      texture.needsUpdate = true;

    } );

    // model
      var object = new THREE.Mesh( new THREE.BoxGeometry(100 , 100, 100), new THREE.MeshBasicMaterial( {map: texture}));
      object.position.y = - 80;
      scene.add( object );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );

  }

  function onDocumentMouseMove( event ) {
    mouseX = ( event.clientX - windowHalfX ) / 2;
    mouseY = ( event.clientY - windowHalfY ) / 2;
  }


  function animate() {
    requestAnimationFrame( animate );
    render();
  }

  function render() {
    camera.position.x += ( mouseX - camera.position.x ) * .05;
    camera.position.y += ( - mouseY - camera.position.y ) * .05;
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
  }

</script>
</body>
</html>

然而，当从远程服务器加载相同的图像时，纹理被加载，或者至少我认为是这样，因为图像宽度等可以在 onLoad() 回调。但是我收到错误并且网格不呈现。取消对以下行的注释：

loader.load( 'http://nylkiway.net/avatar.jpg', function ( image ) {

我遇到很多错误：

"THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )"

虽然图片一模一样，但我的小调试输出returns图片尺寸：

console.log("debug. image size: " + image.width + " X " + image.height );

"debug. image size: 460 X 460"

我认为这不是 CORS 问题，因为已调用完成图像加载的回调。图像属性也是可读的。我觉得，这一定是一个常见的问题，我进行了搜索，但没有真正得到合适的答案。我认为这与图像尺寸不是 2 的幂没有任何关系，因为本地加载的图像显示得很好，就像纹理一样。

如有任何帮助，我们将不胜感激！

Answer 1

这是一个 CORS 问题，您的演示有警告：

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://i.imgur.com/Gps8L9R.jpg may not be loaded.

您需要托管自己的映像镜像并直接指向那里，即所谓的 'reverse proxy':

three.js：本地纹理加载有效，但远程无效

three.js: local texture loading works, but not remotely

javascript

textures

asynchronous

image

three.js