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：纹理不是2的力量.Textus.minFilter设置为THREE.LinearFilter或THREE.NearestFilter。（undefined）”

虽然图像完全相同，但我的小调试输出返回图像尺寸：

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.

您需要托管自己的镜像并直接指向那里，所谓的反向代理＆＃39;：

https://stackoverflow.com/a/3076439/3117360

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

1 个答案: