Three.JS tiling образ, используемый в skybox mesh в WebGL?

Question

Демо можно увидеть here

Я использую довольно маленькое изображение, чтобы сделать skybox, и по какой-то причине оно растягивается вместо черепичного. Я нашел this учебник о том, как создать текстуру. Я отметил эти строки

var crateTexture = new THREE.ImageUtils.loadTexture('images/crate.gif'); 
crateTexture.wrapS = crateTexture.wrapT = THREE.RepeatWrapping; 
crateTexture.repeat.set(5, 5); 
var crateMaterial = new THREE.MeshBasicMaterial({ map: crateTexture }); 
var crate = new THREE.Mesh(cubeGeometry.clone(), crateMaterial); 
crate.position.set(60, 50, -100); 
scene.add(crate); 

Так что я попытался с помощью этого метода для скайбоксе и не производить никаких изменений

var path = "/images/"; 

      var urls = [ 
       path + 'startile.png', path + 'startile.png', 
       path + 'startile.png', path + 'startile.png', 
       path + 'startile.png', path + 'startile.png' 
      ]; 

      var textureCube = THREE.ImageUtils.loadTextureCube(urls , new THREE.CubeRefractionMapping()); 
          textureCube.wrapS = textureCube.wrapT = THREE.RepeatWrapping; 
textureCube.repeat.set(10, 10); 
      var material = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 }); 



      // Skybox 

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

      var material = new THREE.ShaderMaterial({ 

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

      }), 

      mesh = new THREE.Mesh(new THREE.CubeGeometry(1200, 1200, 1200), material); 
          //mesh.overdraw = false; 
          // mesh.rotation.x = Math.PI * 0.1; 
      scene.add(mesh); 

Любые идеи?

Answer 1

Плитка не поддерживается для кубов текстуры. Тем не менее, в вашем случае, поскольку все грани куба одинаковы, вы можете сделать что-то вроде этого:

var geometry = new THREE.CubeGeometry(1000, 1000, 1000); 

var texture = THREE.ImageUtils.loadTexture( "startile.png"); 
texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
texture.repeat.set(10, 10); 

var material = new THREE.MeshBasicMaterial({ 
    color: 0xffffff, 
    map: texture, 
    side: THREE.BackSide 
}); 

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

Three.js R.59