I am currently experimenting with creating a basic Skybox using Three.js, but I've encountered an issue where the texture I'm applying to the cube is only visible on the outside and not on the inside.
Below is the code for my skybox:
const path = assetPath + skyboxPrefix;
const urls = [
path + 'alpine_front.jpg',
path + 'alpine_back.jpg',
path + 'alpine_left.jpg',
path + 'alpine_right.jpg',
path + 'alpine_top.jpg'
];
const cubeTexture = new THREE.CubeTextureLoader().load( urls );
let shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = cubeTexture;
const skyboxMaterial = new THREE.ShaderMaterial( {
uniforms: shader.uniforms,
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
depthWrite: false
});
const skyboxGeometry = new THREE.BoxGeometry( 10000, 10000, 10000 );
skybox = new THREE.Mesh( skyboxGeometry, skyboxMaterial );
skybox.material.side = THREE.BackSide;
scene.add(skybox);
You can view a live version here.