Скайбокс Three.JS не отображается. Я что-то не так сделал с размерами

Я использую небольшую сцену 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();

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


javascript html three.js 3d skybox
person Community    schedule 28.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Камера может не видеть вашу скайбокс, если она направлена ​​наружу. Попробуйте установить 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
person pailhead    schedule 30.11.2018