three.jsskybox

Skybox for Three.js

I was self-learning on three.js for my individual assignment and me still new to this computer graphic things. I want to add Skybox in my animation system but I failed to do it after a lot of trials. In the code, I put a lot of notes to make it run.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mine</title>
		<style>
			/*body{
			margin: 0;
			padding: 0;
			background-color: #000000;
			font-size: 0;
			overflow: hidden;}
			*/
			canvas{
  			width: 100%; height: 100%;
  		    }

		</style>
	</head>
	<body>
		<script src="build/three.js"></script>
		<script src="FirstPersonControls.js"></script>
		<script src="build/three.min.js"></script>
		<script src="OrbitControls.js"></script>
		<script>

			//adding the scene with camera
			var scene = new THREE.Scene();

			var meshes=[];
			var clock=new THREE.Clock();


			var camera = new THREE.PerspectiveCamera(
			45, window.innerWidth / window.innerHeight, 0.01, 1000 );
			camera.position.set(0,5,60);

			

			var renderer = new THREE.WebGLRenderer({antialias: true});
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.setPixelRatio(window.devicePixelRatio);
			// renderer.setClearColor(0xffffff);
			renderer.shadowMap.enabled=true;
			renderer.shadowMap.type=0;
			renderer.gammaInput=true;
			renderer.gammaOutput=true;
			renderer.domElement.style.position = 'relative';
			document.body.appendChild( renderer.domElement );

			//controls
			// var controls = new THREE.FirstPersonControls(camera,renderer.domElement);
			// controls.movementSpeed=200;
			// controls.lookSpeed=0.1;
			// controls.lookVertical=true;
			// controls.lon=-1.5*180/Math.PI; 

			var sunLight = new THREE.SpotLight(0xffffff, 0.3, 0, Math.PI / 2);
			sunLight.position.set(1000, 2000, 1000);
			sunLight.castShadow = true;
			sunLight.shadow.bias = -0.0002;
			sunLight.shadow.camera.far = 4000;
			sunLight.shadow.camera.near = 750;
			sunLight.shadow.camera.fov = 30;
			scene.add(sunLight);

			var ambientLight = new THREE.AmbientLight(0x3f2806);
			scene.add(ambientLight);
		    var pointLight = new THREE.PointLight(0xffaa00, 1, 5000);
       	    pointLight.position.set(0, 0, 0);
			scene.add(pointLight);


			//adding the geometry (spheregeometry)
			var geometry = new THREE.SphereGeometry( 10, 90, 50 );
			var material = new THREE.MeshPhongMaterial( {
			shininess: 100,
		    color: 0xffffff,
		    specular: 0xffffff,
		    //envMap: cubeCamera1.renderTarget.texture,
		    transparent: true,
		    side: THREE.BackSide,
		    blending: THREE.AdditiveBlending,
		    depthWrite: false
			} );

			var sphere = new THREE.Mesh( geometry, material );
			scene.add( sphere );

			// var cubegeometry = new THREE.CubeGeometry (1000, 1000, 1000);
			// var cubeMaterials = 
			// [
			// 	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_ft.jpg"), side: THREE.DoubleSide}),
			// 	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_bk.jpg"), side: THREE.DoubleSide}),
			// 	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_up.jpg"), side: THREE.DoubleSide}),
			// 	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_dn.jpg"), side: THREE.DoubleSide}),
			// 	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_rt.jpg"), side: THREE.DoubleSide}),
			// 	new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_lf.jpg"), side: THREE.DoubleSide})
			// 	];

			// // var cubeMaterials = new Three.MeshFaceMaterial( cubeMaterials );
			// var cubenew = new Three.Mesh( cubegeometry, cubeMaterials);
			// scene.add(cubenew);

			// function loop(){
			// requestAnimationFrame(loop);
			// var delta=clock.getDelta();
			// controls.update(delta);
			// renderer.render(scene,camera);
			// }


			// loop();


			

			//rendering the scene
			function animate() {
			requestAnimationFrame( animate );
			renderer.render( scene, camera );
			}
			animate();

			//animating the scene
			// cube.rotation.x += 0.01;
			// cube.rotation.y += 0.01
			
			var render = function render() {
			requestAnimationFrame( render );
			renderer.render( scene, camera );
			};

			render();

		</script>
	</body>
</html>

Solution

  • you can add a skybox by loading the 6 textures of the box into a cubemap using the CubeTextureLoader and then assigning the texture to scene.background

    {
  const loader = new THREE.CubeTextureLoader();
  const texture = loader.load([
    'resources/images/cubemaps/computer-history-museum/pos-x.jpg',
    'resources/images/cubemaps/computer-history-museum/neg-x.jpg',
    'resources/images/cubemaps/computer-history-museum/pos-y.jpg',
    'resources/images/cubemaps/computer-history-museum/neg-y.jpg',
    'resources/images/cubemaps/computer-history-museum/pos-z.jpg',
    'resources/images/cubemaps/computer-history-museum/neg-z.jpg',
  ]);
  scene.background = texture;
}

    See this