Текстуры Skybox не отображаются

Я пытаюсь изучить THREE.js, и у меня возникли проблемы с получением простого skybox для показа. Я пробовал 100 разных вещей, но ничего не работает - комбинация слишком маленькой документации с множеством разных выпусков полностью меня связала. Я нахожусь в конце моей веревки!Текстуры Skybox не отображаются

Я думал, что это может иметь отношение к времени, которое требуется для загрузки изображений, но я попытался вставить код «загрузчика» безрезультатно (выведен, поскольку он, похоже, не сделал много) , Я готов поверить, что я просто не делал этого «правильный путь», хотя - мне трудно найти примеры, которые работают с текущим выпуском.

<html> 
    <head> <title>Skybox Demo</title> <style>canvas { width: 100%; height: 100% }</style> 
    <body> 
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> 
    <script> 
     var container; 
     var renderer; 
     var cameraCube, sceneCube; 
     var skyboxMesh; 
     var cubeTarget; 

     var mouseX = 0; 
     var mouseY = 0; 
     var windowHalfX = window.innerWidth/2; 
     var windowHalfY = window.innerHeight/2; 


     init(); 
     animate(); 

     function init() { 

      container = document.createElement('div'); 
      document.body.appendChild(container); 

      cameraCube = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000); 
      sceneCube = new THREE.Scene(); 

      // Load cube textures 
      var path = "textures/cube/"; 
      var format = '.jpg'; 
      var urls = [ path + 'px' + format, path + 'nx' + format, 
         path + 'py' + format, path + 'ny' + format, 
         path + 'pz' + format, path + 'nz' + format ]; 
      var skyCubeTexture = THREE.ImageUtils.loadTextureCube(urls); 
      skyCubeTexture.format = THREE.RGBFormat; 


      // Cube shader 
      var shader = THREE.ShaderUtils.lib["cube"]; 
      shader.uniforms["tCube"].texture = skyCubeTexture; 
      var material = new THREE.ShaderMaterial({ 
       fragmentShader : shader.fragmentShader, 
       vertexShader : shader.vertexShader, 
       uniforms  : shader.uniforms, 
       depthWrite  : false, 
       side   : THREE.BackSide 
      }); 

      var skyboxMesh = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), material); 
      sceneCube.add(skyboxMesh); 

      // Renderer 
      renderer = new THREE.WebGLRenderer({antialias:true}); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      renderer.autoClear = false; 
      container.appendChild(renderer.domElement); 
     } 


     function animate() { 
      render(); 
      requestAnimationFrame(animate); 
     } 

     function render() { 
      var timer = - new Date().getTime() * 0.0002; 
      cameraCube.position.x = 10 * Math.cos(timer); 
      cameraCube.position.z = 10 * Math.sin(timer); 
      cameraCube.lookAt({x:0, y:0, z:0}); 
      renderer.clear(); 
      renderer.render(sceneCube, cameraCube); 
     } 
    </script> 
    </body> 
</html>

источник

2012-12-06 sarcastodon

Будьте очень осторожны с копированием примеров из сети.

three.js находится в alpha, и многие из примеров, плавающих вокруг сети, устарели.

Всегда лучше начинать с «официальных» примеров three.js, поскольку они работают с текущей библиотекой.

Вам необходимо правильно назначить текстуру:

shader.uniforms["tCube"].value = skyCubeTexture;

Это было недавнее изменение.

three.js r.53

источник

2012-12-06 19:11:28 WestLangley

Perfect. Да, примеры не укладываются в текущую библиотеку, я должен был бы, вероятно, обеспечить соответствие библиотеки. Благодаря! – sarcastodon

Текстуры Skybox не отображаются

ответ

Смежные вопросы