threejs skybox

//main.js

import './style.css'

import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

import { SpotLight } from 'three';

// Setup

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 45, 10000);

const renderer = new THREE.WebGLRenderer({

  canvas: document.querySelector('#bg'),

});

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

camera.position.set(-900, -200, -900);

renderer.render(scene, camera);

const materials = []

const texture_ft = new THREE.TextureLoader().load('skybox/arid2_ft.jpg')

const texture_bk = new THREE.TextureLoader().load('skybox/arid2_bk.jpg')

const texture_up = new THREE.TextureLoader().load('skybox/arid2_up.jpg')

const texture_dn = new THREE.TextureLoader().load('skybox/arid2_dn.jpg')

const texture_rt = new THREE.TextureLoader().load('skybox/arid2_rt.jpg')

const texture_lf = new THREE.TextureLoader().load('skybox/arid2_lf.jpg')

materials.push(new THREE.MeshBasicMaterial({ map: texture_ft }))

materials.push(new THREE.MeshBasicMaterial({ map: texture_bk }))

materials.push(new THREE.MeshBasicMaterial({ map: texture_up }))

materials.push(new THREE.MeshBasicMaterial({ map: texture_dn }))

materials.push(new THREE.MeshBasicMaterial({ map: texture_rt }))

materials.push(new THREE.MeshBasicMaterial({ map: texture_lf }))

for (let i = 0; i < 6; i++) {

  materials[i].side = THREE.BackSide;

}

const skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);

const skybox = new THREE.Mesh(skyboxGeo, materials)

scene.add(skybox)

const controls = new OrbitControls(camera, renderer.domElement);

controls.minDistance = 500

controls.maxDistance = 1500

function animate() {

  requestAnimationFrame(animate);

  controls.update();

  renderer.render(scene, camera);

}

animate()

reference:

https://www.youtube.com/watch?v=cp-H_6VODko&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM&index=8

https://opengameart.org/content/skiingpenguins-skybox-pack