<div id="loading">
  <h1>Three.js SkyBoxes</h1>
  <div>Loading...</div>
</div>
  <div class="drag">Click And Drag the screen to move around</div>
<div class="buttons">
  <button id="space">Space</button>
  <button id="mountains">Mountains</button>
    <button id="water">Water</button>
  <button id="lava">Lava</button>
<button id="autoRotate">Auto Rotate</button>

<button id="zoom">Outside Box</button>

</div>


<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
body {
  margin: 0;
  height: 100vh;
  background: #bdc3c7;
}
#loading {
  position: fixed;
  font-size: 40px;
  z-index: -1;
  left: 28%;
  top: 15%;
  color: #444;
  text-align: center;
}

.buttons {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;

}
button {
  margin-bottom: 6px;
  width: 120px;
  font-size: 14px;
  outline: none;
  background: #333;
  color: #ddd;
  border: none;
  text-transform: uppercase;
  opacity: .5;
}
button:hover {
  background: #222;
  color: #eee;
}
button:active {
  background: #111;
  color: #fff;
}

#autoRotate {
  margin-top: 20px;
}

.drag {
  color: #ccc;
  font-size: 11px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  opacity: .5;
}
let scene, camera, renderer, skyboxGeo, skybox, controls, myReq;
let zoomOut = false;
let autoRotate = true;
let skyboxImage = 'purplenebula';

function createPathStrings(filename) {
  const basePath = `https://raw.githubusercontent.com/codypearce/some-skyboxes/master/skyboxes/${filename}/`;
  const baseFilename = basePath + filename;
  const fileType = filename == 'purplenebula' ? '.png' : '.jpg';
  const sides = ['ft', 'bk', 'up', 'dn', 'rt', 'lf'];
  const pathStings = sides.map(side => {
    return baseFilename + '_' + side + fileType;
  });

  return pathStings;
}

function createMaterialArray(filename) {
  const skyboxImagepaths = createPathStrings(filename);
  const materialArray = skyboxImagepaths.map(image => {
    let texture = new THREE.TextureLoader().load(image);

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

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    55,
    window.innerWidth / window.innerHeight,
    45,
    30000,
  );
  camera.position.set(1200, -250, 2000);

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.domElement.id = 'canvas';
  document.body.appendChild(renderer.domElement);

  const materialArray = createMaterialArray(skyboxImage);

  skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
  skybox = new THREE.Mesh(skyboxGeo, materialArray);

  scene.add(skybox);


  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  controls.minDistance = 700;
  controls.maxDistance = 1500;
  controls.autoRotate = true;
  controls.autoRotateSpeed = 1.0;

  window.addEventListener('resize', onWindowResize, false);
  animate();
}
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;

  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    controls.autoRotate = autoRotate;
  
    if(controls.maxDistance == 1500 && zoomOut) {
    
      controls.maxDistance = 20000;
      camera.position.z = 20000;
    } else if(controls.maxDistance == 20000 && !zoomOut) {
          console.log('called')
      controls.maxDistance = 1500;
      camera.position.z = 2000;
    }
    
    controls.update();
    renderer.render(scene, camera);
    myReq = window.requestAnimationFrame(animate);
   
}

init();

function switchSkyBox (skyboxName) {
  scene.remove(skybox);
  skyboxImage = skyboxName;
  const materialArray = createMaterialArray(skyboxImage);

  skybox = new THREE.Mesh(skyboxGeo, materialArray);
  scene.add(skybox);
}

function toggleAutoRotate(value) {
  autoRotate = value;
}

function toggleZoom(value) {
  zoomOut = value;
  zoomBtn.textContent = value ? 'Inside Box' : "Outside Box";
  loading.style.display = value ? 'none' : 'show';
}

const spaceBtn = document.getElementById('space');
const mountainsBtn = document.getElementById('mountains');
const waterBtn = document.getElementById('water');
const lavaButton = document.getElementById('lava');
const autoRotateBtn = document.getElementById('autoRotate');
const zoomBtn = document.getElementById('zoom');
const loading = document.getElementById('loading');


spaceBtn.addEventListener('click', () => switchSkyBox('purplenebula'))
mountainsBtn.addEventListener('click', () => switchSkyBox('afterrain'))
waterBtn.addEventListener('click', () => switchSkyBox('aqua9'))
lavaButton.addEventListener('click', () => switchSkyBox('flame'))
autoRotateBtn.addEventListener('click', () => toggleAutoRotate(!autoRotate))
zoomBtn.addEventListener('click', () => toggleZoom(!zoomOut))

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.