Expressing the Sky in Three.js using Sky.js[r145]
If you want to render a realistic sky in Three.js, leveraging Sky.js is highly effective.
In this article, we explain how to achieve a natural sky representation by adjusting
atmospheric transparency, light scattering, and the sun’s position,
with implementation code examples.
Recommended for those who want to create a sky in Three.js or are unsure about the parameters of Sky.js.
Left mouse drag rotates, right mouse drag moves the camera, and the wheel zooms in/out.
Swipe to rotate, drag with two fingers on the screen to move the camera, and pinch in/out to zoom.
Double-click/tap also provides a focus function.
Source Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=yes"> <script src="./js/three.min.js"></script> <script src="./js/ArcballControls.js"></script> <script src="./js/Sky.js"></script> <script> var scene,camera,controls; var main = function () { // Get target canvas and retrieve width and height let can=document.getElementById('can'); let w = parseInt(can.style.width);// get width let h = parseInt(can.style.height);// get height // ■ Scene scene = new THREE.Scene(); // ■ Camera // THREE.PerspectiveCamera( field of view (deg), aspect ratio, near clipping plane, far clipping plane ); camera = new THREE.PerspectiveCamera(20, w/h, 0.1, 10000); camera.position.set(-30, -80, 200);// set camera position //camera.rotation.set(0,0,0);// set camera rotation (0,0,0) camera.lookAt(new THREE.Vector3(0, 0, 0));// set camera to look at (0,0,0) scene.add(camera);// add camera to scene // ■ Renderer renderer = new THREE.WebGLRenderer({canvas:can, antialias: true});// enable antialiasing renderer.setSize(w, h); renderer.setClearColor(0x000000, 1);// set background color // ■ Lights ------------------------------------------------ // Ambient light (applies light from all directions, prevents completely black shadows) var AmbientLight=new THREE.AmbientLight(0xffffff,0.4); scene.add( AmbientLight );// add ambient light to scene // SpotLight(color, intensity, distance, angle, penumbra[0-1], decay[1,1]) const spotLight=new THREE.SpotLight(0xffffff, 2,1000,Math.PI/8, 0.4, 1); spotLight.position.set(100,400,300); spotLight.target.position.set(0,0,0); scene.add(spotLight); scene.add(spotLight.target); // ■ Lambert material (non-glossy material affected by lights) let material=new THREE.MeshLambertMaterial({color:0x6699FF}); // ■ Box geometry (width, height, depth) let boxGeometry=new THREE.BoxGeometry(40,30,20); // ■ Create mesh from geometry and Lambert material let mesh=new THREE.Mesh(boxGeometry,material); scene.add(mesh);// add mesh to scene // ■ Sky let sky=new THREE.Sky(); sky.scale.setScalar(50000); sky.material.uniforms.turbidity.value=0.8; // atmospheric transparency sky.material.uniforms.rayleigh.value=0.3; // number of incident photons sky.material.uniforms.mieCoefficient.value=0.005; // scattering coefficient sky.material.uniforms.mieDirectionalG.value=0.8; // scattering directional G sky.material.uniforms.sunPosition.value.x= 10000; // sun position x sky.material.uniforms.sunPosition.value.y= 30000; // sun position y sky.material.uniforms.sunPosition.value.z=-40000; // sun position z scene.add(sky); // Create Arcball controls (camera moves with mouse drag, wheel, etc.) controls = new THREE.ArcballControls(camera, renderer.domElement, scene); // If adjustNearFar is true, near/far clipping planes are adjusted to maintain visibility when zooming controls.adjustNearFar=true; controls.enableAnimations=true;// enable animation for rotation/focus controls.enableGrid=true;// show grid during pan operation controls.setGizmosVisible(true);// show gizmos (wireframe sphere for rotation center) renderLoop(); } function renderLoop () { requestAnimationFrame( renderLoop ); renderer.render( scene, camera ); } window.addEventListener( 'DOMContentLoaded', main, false ); </script> </head> <body> <canvas id="can" style="width:500px; height:300px;-ms-touch-action:none;touch-action:none;"> </canvas> </body> </html>