조명 효과

const TEXTURE_PATH = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123879/';

var camera,
    scene,
    renderer,
    effect,
    controls,
    element,
    container,
    rotationPoint;

var textureFlare0;
var textureFlare2;
var textureFlare3;

document.addEventListener('mousemove', onDocumentMouseMove, false);

init();
animate();

/**
 * Initializer function.
 */
function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    scene = new THREE.Scene();

    rotationPoint = new THREE.Object3D();
    rotationPoint.position.set(0, 0, 1000);
    scene.add(rotationPoint);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 23000);
    rotationPoint.add(camera);

    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    element = renderer.domElement;
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled;
    container.appendChild(element);

    controls = new THREE.OrbitControls(camera, element);
    controls.enablePan = true;
    controls.enableZoom = true;
    controls.maxDistance = 4000;
    controls.minDistance = 1000;
    controls.target.copy(new THREE.Vector3(0, 0, -100));

    function setOrientationControls(e) {
        if (!e.alpha) {
            return;
        }

        controls = new THREE.DeviceOrientationControls(camera);
        controls.connect();

        window.removeEventListener('deviceorientation', setOrientationControls, true);
    }
    window.addEventListener('deviceorientation', setOrientationControls, true);

    // 조명
    var ambient = new THREE.AmbientLight(0x222222);
    scene.add(ambient);

    // 태양
    var light = new THREE.PointLight(0xffffff, 1, 10000, 0);
    light.position.set(-8000, 0, 0);
    scene.add(light);

    addSkybox();
    createSun(-11600, 0, 0);
    createLensflare(-11400, 0, 0);
    createSun(-11600, 4000, 5500);
    createLensflare(-11400, 4000, 5500);
    createSun(11600, 0, 0);
    createLensflare(11400, 0, 0);
    createSun(11600, -4000, 5500);
    createLensflare(11400, -4000, 5500);
    createSun(0, 0, -11600);
    createLensflare(0, 0, -11400);
    createSun(5500, 4000, -11600);
    createLensflare(5500, 4000, -11400);
    createSun(0, 0, 11600);
    createLensflare(0, 0, 11400);
    createSun(11600, 0, 11600);
    createLensflare(11400, 0, 11400);
    createSun(11600, 0, -11600);
    createLensflare(11400, 0, -11400);
    createSun(-11600, 0, -11600);
    createLensflare(-11400, 0, -11400);
    createSun(-11600, 0, 11600);
    createLensflare(-11400, 0, 11400);
    createSun(0, -11600, 0);
    createLensflare(0, -11400, 0);
    createSun(0, 11600, 0);
    createLensflare(0, 11400, 0);

    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function createSun(x, y, z) {
    var sunGeometry = new THREE.SphereGeometry(100, 16, 16);
    var sunMaterial = new THREE.MeshLambertMaterial({
        color: '#ffff55',
        emissive: '#ffff55',
    });

    sun = new THREE.Mesh(sunGeometry, sunMaterial);
    sun.castShadow = false;
    sun.receiveShadow = false;
    sun.position.set(x, y, z);
    sun.rotation.y = Math.PI;

    scene.add(sun);
}

function update() {
    camera.updateProjectionMatrix();
    rotationPoint.rotation.y -= 0.0015;
}

function render() {
    renderer.render(scene, camera);
}

function animate() {
    requestAnimationFrame(animate);
    update();
    render();
}

function addSkybox() {
    var urlPrefix = TEXTURE_PATH;
    var urls = [
        urlPrefix + 'test.jpg',
        urlPrefix + 'test.jpg',
        urlPrefix + 'test.jpg',
        urlPrefix + 'test.jpg',
        urlPrefix + 'test.jpg',
        urlPrefix + 'test.jpg',
    ];

    var loader = new THREE.CubeTextureLoader();
    loader.setCrossOrigin('https://s.codepen.io');

    var textureCube = loader.load(urls);
    textureCube.format = THREE.RGBFormat;

    var shader = THREE.ShaderLib["cube"];
    shader.uniforms["tCube"].value = textureCube;

    var material = new THREE.ShaderMaterial({
        fragmentShader: shader.fragmentShader,
        vertexShader: shader.vertexShader,
        uniforms: shader.uniforms,
        depthWrite: false,
        side: THREE.BackSide
    });

    var geometry = new THREE.BoxGeometry(20000, 20000, 20000);

    var skybox = new THREE.Mesh(geometry, material);
    skybox.position.x = -30;

    scene.add(skybox);
}

function createLensflare(x, y, z) {
    var textureLoader = new THREE.TextureLoader();
    textureLoader.setCrossOrigin('https://s.codepen.io');
    textureFlare0 = textureLoader.load(TEXTURE_PATH + "sun.png");
    textureFlare2 = textureLoader.load(TEXTURE_PATH + "lensflare2.png");
    textureFlare3 = textureLoader.load(TEXTURE_PATH + "lensflare3.png");

    addLight(0.55, 0.9, 0.5, x, y, z);
}

function addLight(h, s, l, x, y, z) {
    var flareColor = new THREE.Color(0xffffff);
    flareColor.setHSL(h, s, l + 0.5);

    var lensFlare = new THREE.LensFlare(textureFlare0, 700, 0.0, THREE.AdditiveBlending, flareColor);

    lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);
    lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);
    lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);
    lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);

    lensFlare.customUpdateCallback = lensFlareUpdateCallback;
    lensFlare.position.set(x, y, z);

    scene.add(lensFlare);
}

/* Code from https://threejs.org/examples/webgl_lensflares.html */

function lensFlareUpdateCallback(object) {
    var f, fl = object.lensFlares.length;
    var flare;
    var vecX = -object.positionScreen.x * 2;
    var vecY = -object.positionScreen.y * 2;

    for (f = 0; f < fl; f++) {
        flare = object.lensFlares[f];
        flare.x = object.positionScreen.x + vecX * flare.distance;
        flare.y = object.positionScreen.y + vecY * flare.distance;
        flare.rotation = 0;
    }

    object.lensFlares[2].y += 0.025;
    object.lensFlares[3].rotation = object.positionScreen.x * 0.5 + THREE.Math.degToRad(45);
}

function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}