Ошибка отображения текстуры Threejs на сферу (three.min.js: 120 THREE.WebGLRenderer: изображение не является степенью двойки (1000x500)) - PullRequest
Новая
       54

Ошибка отображения текстуры Threejs на сферу (three.min.js: 120 THREE.WebGLRenderer: изображение не является степенью двойки (1000x500))

0 голосов
/ 30 мая 2018

Я учу три 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.Но на холсте ничего не отображается.Что не так и как я могу это исправить?

1 Ответ

0 голосов
/ 31 мая 2018

Мне не удалось загрузить текстуру без ошибок (в three.js r93) с THREE.ImageUtils.loadTexture.Это бросило ошибку "испорченного холста" в Chrome.Я перешел на использование THREE.TextureLoader, которое вы можете увидеть в приведенном ниже коде.

Все это говорит о том, что, вероятно, проблема не была real .В вашей сцене не хватает света, и без света все будет выглядеть черным.В приведенном ниже коде я добавил на камеру простой точечный источник света.

С этими двумя исправлениями ваш код работает должным образом. 

<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>
...