Three.JS Skybox не появится. Я сделал что-то не так с размерами

Question

Я использую небольшую сцену three.js в своем проекте, я создал скайбокс, но он не появится.

Но я сделал маленькую коробочку, и она отлично работает. Возможно, я дал камере неправильные настройки, чтобы она не видела скайбокс.

Вот мой полный код:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);
camera.position.set(0, 0, 0);
camera.lookAt(scene.position);
var div = document.getElementById("background");
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
div.appendChild( renderer.domElement );
camera.position.z = 5;

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

var skyboxMaterials =
[
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/ft.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/bk.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/up.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/dn.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/rt.png"),side: THREE.DoubleSide}
        ),
    new THREE.MeshBasicMaterial( 
        {map: new THREE.TextureLoader().load("skybox/lf.png"),side: THREE.DoubleSide}
        )
];

var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterials );
scene.add( skybox );

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

var animate = function () {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

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

Answer 1

Камера может не видеть ваш скайбокс, если он направлен наружу. Попробуйте установить side:THREE.BackSide к вашему массиву материалов скайбокса.

В идеале также, чтобы заставить его вести себя как настоящий скайбокс, вы можете сделать что-то вроде этого:

//provided this is the scene graph (same parent, otherwise you have to transform camera position)
scene.add(camera)
scene.add(skybox)

function animate(){

   skyBox.position.copy(camera.position)
   renderer.render()
}

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

skyBox.renderOrder = -1 || 1 //before or after