Threejs纹理贴图到球体误差（three.min.js：120 THREE.WebGLRenderer：图像不是2的幂（1000x500））

Question

我现在正在学习三个js。我现在要做的是绘制一个球体然后纹理贴图球体上的图像。基本上，我正在学习本教程http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/。

这是我的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  window.addEventListener('resize', function() {

    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  })

  controls = new THREE.OrbitControls(camera, renderer.domElement);


  var geometry = new THREE.SphereGeometry(0.5, 32, 32)
  var material = new THREE.MeshPhongMaterial();

  var earthMesh = new THREE.Mesh(geometry, material)
  scene.add(earthMesh)

  // TheJim01: Replacing local file with accessible web resource
  // License and source: https://commons.wikimedia.org/wiki/File:Earthmap1000x500compac.jpg
  //material.map = THREE.ImageUtils.loadTexture("world.jpg");
  material.map = THREE.ImageUtils.loadTexture("https://upload.wikimedia.org/wikipedia/commons/c/c4/Earthmap1000x500compac.jpg");
  camera.position.z = 10; //3


  //game logic
  var update = function() {

  };

  //draw scene
  var render = function() {
    renderer.render(scene, camera);
  }

  // run game loop (update, render, repeat)
  var GameLoop = function() {
    requestAnimationFrame(GameLoop);

    update();
    render();
  }

  GameLoop();
</script>

当我运行代码时，我在控制台中收到此错误。

three.min.js:120 THREE.WebGLRenderer: image is not power of two (1000x500)

我的图片文件实际上也有1000X500大小。但是画布上没有显示任何内容。有什么问题，我该如何解决？

Answer 1

我无法使用THREE.ImageUtils.loadTexture加载没有错误的纹理（在three.js r93中）。它在Chrome中引发了“污点画布”错误。我转而使用THREE.TextureLoader，您可以在下面的代码中看到。

所有这一切，可能不是真正的问题。你的场景缺乏光线，没有光线，一切都会变成黑色。在下面的代码中，我为相机添加了一个简单的指示灯。

有了这两个修复程序，您的代码就会按预期运行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  window.addEventListener('resize', function() {

    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  })

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  scene.add(camera);
  camera.add(new THREE.PointLight(0xfffff, 1, Infinity));


  var geometry = new THREE.SphereGeometry(0.5, 32, 32)
  var material = new THREE.MeshPhongMaterial();

  var earthMesh = new THREE.Mesh(geometry, material)
  scene.add(earthMesh)

  // TheJim01: Replacing local file with accessible web resource
  // License and source: https://commons.wikimedia.org/wiki/File:Earthmap1000x500compac.jpg
  //material.map = THREE.ImageUtils.loadTexture("world.jpg");
  var loader = new THREE.TextureLoader();
  material.map = loader.load("https://upload.wikimedia.org/wikipedia/commons/c/c4/Earthmap1000x500compac.jpg");
  camera.position.z = 10; //3


  //game logic
  var update = function() {

  };

  //draw scene
  var render = function() {
    renderer.render(scene, camera);
  }

  // run game loop (update, render, repeat)
  var GameLoop = function() {
    requestAnimationFrame(GameLoop);

    update();
    render();
  }

  GameLoop();
</script>