Three.js texture chargement échouer

Question

Je travaille à une animation avec trois.js Je suis triyng pour faire tourner 2 sphères au centre de l'écran, le premier contient le second (ils ont les mêmes coordonnées mais un peu plus grand). J'essaie de simuler un globe terrestre réaliste avec atmosphère.

J'ai commencé avec l'exemple du globe terrestre Three.js ajouter l'atmosphère http://www.gioblu.com/GiO/web/solarsystem/index_old

Après que je l'ai écrit tout à partir de zéro pour avoir un cadre pour rendre bien des planètes et de leurs atmosphères ..

http://www.gioblu.com/GiO/web/solarsystem/index_backup Mais , comme vous pouvez le voir, il y a un bug dans mon code qui évite le chargement correct de la texture. Regardant à l'intérieur de l'objet matériel, semble être là à l'intérieur. Je pense que j'ajoute les éléments dans la scène avant que la texture soit chargée. Mais je ne peux pas trouver un moyen de modifier le code pour le laisser travailler ..

J'espère que dans une bonne réponse;)

Answer 1

Vous créez le MeshPhongMaterial lorsque la texture a terminé le chargement. Cependant, avant que la texture ne soit chargée, le maillage a déjà été créé. Puisque ce matériau de l'atmosphère n'est pas encore défini, un matériau de base est utilisé.

Dans votre fonction de chargeur que vous avez une erreur de cadrage qui pourrait provoquer ce problème:

 this.loader.load('app/textures/atmospheres/earth_1.jpg', function (texture) { 
     this.atmosphere_material = new THREE.MeshPhongMaterial({ 
      map: texture, 
      color: 10790052, 
      ambient: 16777215, 
      emissive: 1381653, 
      specular: 16777215, 
      shininess: 5000, 
      opacity: 0.46, 
      transparent: true, 
      wireframe: false 
     }); 
     }); 

La propriété this.atmosphere_material n'est pas réglé sur l'objet de la Terre. Dans ce rappel, la portée est différente. Ce qui suit est un moyen plus facile de charger des textures:

var Earth = function() { 

     this.planet = new THREE.Object3D(); 
     this.planet_geometry = new THREE.SphereGeometry(200, 32, 32); 

     this.atmosphere = new THREE.Object3D(); 
     this.atmosphere_geometry = new THREE.SphereGeometry(205, 32, 32); 

     this.material = new THREE.MeshPhongMaterial({ 
      map: THREE.ImageUtils.loadTexture("app/textures/surfaces/earth.jpg"), 
      color: 13750737, 
      ambient: 13092807, 
      emissive: 595494, 
      specular: 3223857, 
      shininess: 25, 
      opacity: 1, 
      transparent: false, 
      wireframe: false, 
     }); 

     this.surface = new THREE.Mesh(this.planet_geometry, this.material); 
     this.planet.add(this.surface); 
     scene.add(this.planet); 


     this.atmosphere_material = new THREE.MeshPhongMaterial({ 
      map: THREE.ImageUtils.loadTexture("app/textures/atmospheres/earth_1.jpg"), 
      color: 10790052, 
      ambient: 16777215, 
      emissive: 1381653, 
      specular: 16777215, 
      shininess: 5000, 
      opacity: 0.46, 
      transparent: true, 
      wireframe: false 
     }); 

     this.surface = new THREE.Mesh(this.atmosphere_geometry, this.atmosphere_material); 
     this.atmosphere.add(this.surface); 
     scene.add(this.atmosphere); 
    } 

Je ne l'ai pas testé le code, mais devrait être correct.