CubeTextureLoader не загружает skybox в three.js

Question

Я не могу для жизни меня выяснить, что я делаю неправильно здесь. Я пытаюсь загрузить простой skybox, и я ничего не получаю. Я попытался найти ответ, но большинство из них использует THREE.ImageUtils.loadTextureCube, который с тех пор устарел. Кажется, я не могу найти примеров на новом THREE.CubeTextureLoader.

Примечание: Я использую это в сочетании с three.js YouTube например погрузчик ... http://threejs.org/examples/#css3d_youtube

var loader = new THREE.CubeTextureLoader(); 
textureArray = ['galaxy_starfield.png', 'galaxy_starfield1.png', 'galaxy_starfield2.png', 'galaxy_starfield3.png', 'galaxy_starfield4.png', 'galaxy_starfield5.png']; 
loader.setPath('./img/'); 
var textureCube = loader.load([ 
    'galaxy_starfield.png', 'galaxy_starfield1.png', 'galaxy_starfield2.png', 'galaxy_starfield3.png', 'galaxy_starfield4.png', 'galaxy_starfield5.png' 
]); 

var skyMaterial = new THREE.MeshBasicMaterial({ 
    color: 0x444444, 
    map: new THREE.TextureLoader(textureArray), 
    opacity: 0, 
    transparent: true 
}); 

var skyGeometry = new THREE.BoxGeometry(2000, 2000, 2000); 

var skyMesh = new THREE.Mesh(skyGeometry, skyMaterial); 
scene.add(skyMesh); 

Что я делаю неправильно? Я не получаю никаких ошибок (просто ошибка из блока объявлений). Возможно ли, что CubeTextureLoader имеет ошибку?

Все эти посты используют ImageUtils.loadTextureCube:

comparing methods of creating skybox material in three.js

Three.js skybox not loading completely or at all

Answer 1

Как documentation специфицирует (также с примером), материал должен быть создан с envMap имущества, которое должно быть установлено к вашему загруженному cubeTexture.

var skyMaterial= new THREE.MeshBasicMaterial({ 
    color: 0xffffff, 
    envMap: textureCube, 
    side: THREE.BackSide 
}); 

Свойство side используется так, что материал будет видно из внутри куба.

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

skyBox.position.copy(camera.position);