Threejs 纹理映射到球体错误（three.min.js:120 THREE.WebGLRenderer: 图像不是二的幂 (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 大小。但是 canvas 上什么也没有显示。出了什么问题，我该如何解决？

Answer 1

我无法使用 THREE.ImageUtils.loadTexture 正确加载纹理（在 three.js r93 中）。它在 Chrome 中引发了 "tainted canvas" 错误。我切换到使用 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>

Threejs 纹理映射到球体错误（three.min.js:120 THREE.WebGLRenderer: 图像不是二的幂 (1000x500)）

Threejs texture map to sphere error (three.min.js:120 THREE.WebGLRenderer: image is not power of two (1000x500))

three.js

texture-mapping