Threejs skybox out of range

Question

I am writing a 3d game in javascript with threejs. I made a skybox, and it works, but if I make my cameras near and far distances too small it doesn't show.

I understand why this happens, the camera attached to my player doesn't see as far as the skybox. If I make my cameras "near" and "far" attributes large enough (corresponding to the size of my game map) I can make it so that my skybox is always within range, but I don't want that, since I don't want the camera to see all the objects that far away.

Any ideas of how to force the camera to see the skybox but still have a small "far" attribute so as to no see all the objects in the world?

Any help would be greatly appreciated.

score 3 · Accepted Answer · answered Apr 29 '18 at 15:29

3

There’s scene.background, which can be set to a CubeTexture.

answered Apr 29 '18 at 15:29

Ben West

4,398
1
16
16

Thanks, I am trying now, do you happen to know if it is supposed to work with .tga files? – Oha Noch Apr 29 '18 at 15:39

score 1 · Answer 2 · answered Mar 15 '19 at 09:17

Just want to add an example, because someone might find it useful here:

var loader = new THREE.CubeTextureLoader();
    loader.load([
        './img/sky/galaxy-X.jpg', './img/sky/galaxy+X.jpg',
        './img/sky/galaxy-Y.jpg', './img/sky/galaxy+Y.jpg',
        './img/sky/galaxy-Z.jpg', './img/sky/galaxy+Z.jpg'
    ]  , function(texture)
    {
        scene.background = texture;  
    });

Threejs skybox out of range

2 Answers2