Three.js - Skyboxが黒く表示されます

Question

Three.jsのシンプルなシーンにskyboxを追加する際に問題があります！

私はスカイボックスに使用するコードは次のとおりです。以下のように

var skyBox = new THREE.Mesh(new THREE.BoxGeometry(1500, 1500, 1500), shaderMaterial); 
     sceneCube.add(skyBox); 

shaderMaterialが定義されています

shader = THREE.ShaderLib[ "cube" ]; 
shader.uniforms[ "tCube" ].value = textureCube; 

var shaderMaterial = new THREE.ShaderMaterial({ 

    fragmentShader: shader.fragmentShader, 
    vertexShader: shader.vertexShader, 
    uniforms: shader.uniforms, 
    depthWrite: false, 
    side: THREE.BackSide 

}); 

スカイボックスは、私はロードするためにこれを使用すると、私はちょうどいくつかの簡単な画像を表示させたい

画像：

 var path = "Desert-"; 
      var format = '.png'; 
      var urls = [ 
       path + 'LEFT' + format, path + 'RIGHT' + format, 
       path + 'TOP' + format, path + 'BOT' + format, 
       path + 'FRONT' + format, path + 'BACK' + format 
      ]; 
      textureCube = new THREE.CubeTextureLoader().load(urls); 

私のコードを実行しても、Webコンソールにエラーは発生しません。基本的な場面として私はhttp://threejs.org/examples/#webgl_geometry_cubeを使います。

私は本当にインターネットで答えを見つけようとしましたが、ここで間違っていることは何も見つかりません。

ありがとうございました！

ここでは完全なコードを使用しています（私はこれを投稿しました。なぜなら、ここに投稿されたすべてのソリューションを実際に適用しようとしたからです）。

<script> 

     var camera, scene, renderer, cameraCube, sceneCube; 
     var mesh, shader; 

     init(); 
     animate(); 

     function init() { 

      camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.z = 400; 
      cameraCube = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 


      scene = new THREE.Scene(); 
      sceneCube = new THREE.Scene(); 


      var path = "textures/Desert-"; 
      var format = '.png'; 
      var urls = [ 
       path + 'LEFT' + format, path + 'RIGHT' + format, 
       path + 'TOP' + format, path + 'BOTTOM' + format, 
       path + 'FRONT' + format, path + 'BACK' + format 
      ]; 
      console.log(urls); 
      textureCube = new THREE.CubeTextureLoader().load(urls); 

      // Skybox 

      shader = THREE.ShaderLib[ "cube" ]; 
      shader.uniforms[ "tCube" ].value = textureCube; 

      var shaderMaterial = new THREE.ShaderMaterial({ 

       fragmentShader: shader.fragmentShader, 
       vertexShader: shader.vertexShader, 
       uniforms: shader.uniforms, 
       depthWrite: false, 
       side: THREE.BackSide 

      }); 


      var skyBox = new THREE.Mesh(new THREE.BoxGeometry(1500, 1500, 1500), shaderMaterial); 
      sceneCube.add(skyBox); 

      var texture = new THREE.TextureLoader().load(urls[3]); 

      var geometry = new THREE.BoxBufferGeometry(100, 100, 100); 
      var material = new THREE.MeshBasicMaterial({ map: texture }); 

      mesh = new THREE.Mesh(geometry, material); 
      scene.add(mesh); 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      // 

      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 


      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 

      mesh.rotation.x += 0.005; 
      mesh.rotation.y += 0.01; 

      renderer.render(sceneCube, cameraCube); 
      renderer.render(scene, camera); 

     } 

Answer 1

複数がそうのようなレンダーパスを使用している場合：

renderer.render(sceneCube, cameraCube); 
renderer.render(scene, camera); 

あなたは

renderer.autoClear = false; 

は最初のものをクリアから2番目レンダーパスを防止するために設定する必要があります。

three.js r.76