Three js skybox


const urls = [
  '/assets/skybox/right.png',
  '/assets/skybox/left.png',
  '/assets/skybox/top.png',
  '/assets/skybox/bottom.png',
  '/assets/skybox/front.png',
  '/assets/skybox/back.png',
];

const materials = urls.map((url) => {
  const texture = new THREE.TextureLoader().load(url);

  return new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide,
    fog: false,
    depthWrite: false,
  });
});

const skybox = new THREE.Mesh( new THREE.BoxBufferGeometry(10000, 10000, 10000), materials );
scene.add(skybox);

skybox.rotation.y = Math.PI / 2;

CubeTexture orientation · Issue #16328 · mrdoob/three.js

In my app, I would like to rotate the CubeTexture that defines the scene background and the environment map reflections by 180° along the vertical y-axis. My rotation is defined by the VRML and X3D specifications about the background fie...

https://github.com/mrdoob/three.js/issues/16328

CubeTexture orientation · Issue #16328 · mrdoob/three.js

Skybox rotation : three.js

A demo of an animated skybox in threejs

https://woodenraft.games/demos/skybox-rotation-threejs.html

Three js skybox

Recommendations