Three.js 텍스처로드 실패

Question

three.js를 사용하여 애니메이션 작업을하고 있습니다. 화면 중심에서 2 개의 구를 회전시키기 위해 triyng입니다. 첫 번째 것은 두 번째 구를 포함합니다 (두 번째 구는 같은 좌표이지만 하나는 더 큽니다.). 분위기가있는 현실적인 지구의 지구를 시뮬레이션하려고합니다.

나는 내가 많은 행성을 렌더링 할 수있는 프레임 워크를 가지고 처음부터 모든 것을 쓴 후 대기 http://www.gioblu.com/GiO/web/solarsystem/index_old

을 부가 three.js를 지구 글로브 예를 시작, 그들의 분위기 ..

http://www.gioblu.com/GiO/web/solarsystem/index_backup 그러나 보시다시피 올바른 코드가로드되지 않도록하는 코드에 버그가 있습니다. 물질 내부를 들여다 보면 내부에있는 것처럼 보입니다. 텍스처를로드하기 전에 장면에 항목을 추가한다고 생각합니다.)

Answer 1

텍스처 로딩이 완료되면 당신은 MeshPhongMaterial를 작성,하지만 난 ..

내가 좋은 답변에 희망

를 작동하게하기 위해 코드를 편집 할 수있는 방법을 찾을 수 없습니다. 그러나 텍스처가로드되기 전에 메쉬가 이미 생성되었습니다. this.atmosphere_material은 아직 정의되지 않았으므로 기본 재질이 사용됩니다.

 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 
     }); 
     }); 

this.atmosphere_material 속성이 지구 개체에 설정되지 않은 : 로더 기능에

은이 문제가 발생할 수 있습니다 범위 지정 오류가있어. 이 콜백에서는 범위가 다릅니다. 텍스처를로드하는 더 쉬운 방법은 다음과 같습니다.

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); 
    } 

코드를 테스트하지 않았지만 정확해야합니다.