Поворот скайбокс в Three.js

Question

У меня есть скайбокс, созданный с помощью:

skybox_path = 'images/skybox_images/'; 
skybox_name = 'Stars_2'; 

var urls = [ 
      skybox_path + skybox_name + '_right1.png', 
      skybox_path + skybox_name + '_left2.png', 
      skybox_path + skybox_name + '_top3.png', 
      skybox_path + skybox_name + '_bottom4.png', 
      skybox_path + skybox_name + '_front5.png', 
      skybox_path + skybox_name + '_back6.png' 
      ]; 

var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures 
cubemap.format = THREE.RGBFormat; 

var shader = THREE.ShaderLib['cube']; // init cube shader from built-in lib 
shader.uniforms['tCube'].value = cubemap; // apply textures to shader 

// create shader material 
var skyBoxMaterial = new THREE.ShaderMaterial({ 
    fragmentShader: shader.fragmentShader, 
    vertexShader: shader.vertexShader, 
    uniforms: shader.uniforms, 
    depthWrite: false, 
    side: THREE.BackSide 
}); 


// create skybox mesh 
var skybox = new THREE.Mesh(
    new THREE.CubeGeometry(1000, 1000, 1000), 
    skyBoxMaterial 
); 

scene.add(skybox); 

Это прекрасно работает, однако теперь я хотел бы повернуть скайбокс внутри цикла анимации.

Если я использую:

skybox.rotation.x += 0.01; 

в визуализации цикла, скайбокс куб вращается, но текстуры не делают. Я получаю очень интересный и проницательный эффект при перемещении куба, но текстуры остаются фиксированными, но это не мой желаемый эффект, я бы хотел, чтобы текстуры перемещались с кубом.

Answer 1

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

Способ создания скайбокс, который позволяет ему вращаться следующим образом:

var urls = [ 
      skybox_path + skybox_name + '_right1.png', 
      skybox_path + skybox_name + '_left2.png', 
      skybox_path + skybox_name + '_top3.png', 
      skybox_path + skybox_name + '_bottom4.png', 
      skybox_path + skybox_name + '_front5.png', 
      skybox_path + skybox_name + '_back6.png' 
      ]; 

var materialArray = []; 
for (var i = 0; i < 6; i++) 
    materialArray.push(new THREE.MeshBasicMaterial({ 
    map: THREE.ImageUtils.loadTexture(urls[i]), 
    side: THREE.BackSide 
    })); 

var skyGeometry = new THREE.CubeGeometry(5000, 5000, 5000); 
var skyMaterial = new THREE.MeshFaceMaterial(materialArray); 
var skybox = new THREE.Mesh(skyGeometry, skyMaterial); 

Это решило мою проблему.