Hologram Earth

clouds.jpg

earthBumpMap.jpg

earthSatTexture.jpg

EarthScene.js

/**
 * Earth and Scene
 * 
 * @constructor
 */
function EarthScene() {
    //create scene
    this.scene = new THREE.Scene();
    this.textureloader = new THREE.TextureLoader();
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    // create a Directional light as pretend sunshine.
    var directional = new THREE.DirectionalLight(0xCCCCCC, 1.5);
    directional.castShadow = true;
    directional.position.set(100, 200, 300);
    directional.target.position.copy(new THREE.Vector3(0, 0, 0));
    directional.shadowCameraTop = 2000;
    directional.shadowCameraRight = 2000;
    directional.shadowCameraBottom = -2000;
    directional.shadowCameraLeft = -1000;
    directional.shadowCameraNear = 600;
    directional.shadowCameraFar = -600;
    directional.shadowBias = -0.0001;
    directional.shadowDarkness = 0.1;
    directional.shadowMapWidth = directional.shadowMapHeight = 2048;
    this.scene.add(directional);
    var ambient = new THREE.AmbientLight(0x666666);
    this.scene.add(ambient);
    //clouds object
    this.clouds = new THREE.Mesh(new THREE.SphereGeometry(50 + 1, 32, 32), new THREE.MeshLambertMaterial({
        map: this.textureloader.load('clouds.jpg'),
        transparent: true,
        blending: THREE.CustomBlending,
        blendSrc: THREE.SrcAlphaFactor,
        blendDst: THREE.OneMinusSrcColorFactor,
        blendEquation: THREE.AddEquation
    }));
    this.clouds.position.set(0, 0, 0);
    this.clouds.receiveShadow = true;
    this.clouds.castShadow = true;
    this.scene.add(this.clouds);
    //earth object
    var geometry = new THREE.SphereGeometry(50, 50, 50);
    var material = new THREE.MeshPhongMaterial({
        map: this.textureloader.load('earthSatTexture.jpg'),
        specular: 0x555555,
        shininess: 6,
        bumpMap: this.textureloader.load("earthBumpMap.jpg"),
        bumpScale: 16,
        metal: true
    });
    this.earth = new THREE.Mesh(geometry, material);
    this.scene.add(this.earth);
}
//# sourceMappingURL=scene.js.map

Halo.js

/**
 * Holo Object:
 *     that contains 4 different views
 * @param windowWidth
 * @param windowHeight
 * @constructor
 */
function Holo(windowWidth, windowHeight) {
    this.windowWidth = windowWidth || 300;
    this.windowHeight = windowHeight || 300;
    //create views
    this.views = [
        {
            left: 0,
            bottom: 0.5,
            width: 0.5,
            height: 0.5,
            background: { r: 0.0, g: 0.0, b: 0.0, a: 1 },
            eye: [0, 300, 1800],
            up: [0, 1, 0],
            fov: 30,
            angle: 0,
            rotation: 33.75
        },
        {
            left: 0,
            bottom: 0,
            width: 0.5,
            height: 0.5,
            background: { r: 0.0, g: 0.0, b: 0.0, a: 1 },
            eye: [0, 300, 1800],
            up: [0, 1, 0],
            fov: 30,
            angle: 90,
            rotation: 101.25
        },
        {
            left: 0.5,
            bottom: 0,
            width: 0.5,
            height: 0.5,
            background: { r: 0.0, g: 0.0, b: 0.0, a: 1 },
            eye: [0, 300, 1800],
            up: [0, 1, 0],
            fov: 30,
            angle: 180,
            rotation: -101.25
        },
        {
            left: 0.5,
            bottom: 0.5,
            width: 0.5,
            height: 0.5,
            background: { r: 0.0, g: 0.0, b: 0.0, a: 1 },
            eye: [0, 300, 1800],
            up: [0, 1, 0],
            fov: 30,
            angle: 270,
            rotation: 101.25
        }
    ];
    for (var i = 0; i < this.views.length; i++) {
        var view = this.views[i];
        var camera = new THREE.PerspectiveCamera(view.fov, this.windowWidth / this.windowHeight, 1, 10000);
        camera.position.x = view.eye[0];
        camera.position.y = view.eye[1];
        camera.position.z = view.eye[2];
        camera.up.x = view.up[0];
        camera.up.y = view.up[1];
        camera.up.z = view.up[2];
        view.camera = camera;
    }
}
/**
 * render
 * @param renderer THREE.WebGLRenderer
 * @param scene THREE.Scene
 * @param cehtralObj Object to focus for camera
 */
Holo.prototype.render = function (renderer, scene, centralObj) {
    centralObj = centralObj ? centralObj : scene;
    var cameraRadius = 290;
    var rotateY = 90, rotateX = 0, curY = 0;
    for (var i = 0; i < this.views.length; i++) {
        //grab each view
        var view = this.views[i];
        //grab each camera
        var camera = view.camera;
        //Adjust camera within 3D spherical coordinates
        camera.position.x = centralObj.position.x + cameraRadius * Math.sin(rotateY * Math.PI / 180) * Math.cos(view.angle * Math.PI / 180);
        camera.position.z = centralObj.position.y + cameraRadius * Math.sin(rotateY * Math.PI / 180) * Math.sin(view.angle * Math.PI / 180);
        camera.position.y = centralObj.position.z + cameraRadius * Math.cos(rotateY * Math.PI / 180);
        camera.lookAt(scene.position);
        //Set rotation of camera on Z-Axis
        camera.rotation.z = view.rotation - Math.PI;
        //Grab view ports
        var left = Math.floor(this.windowWidth * view.left);
        var bottom = Math.floor(this.windowHeight * view.bottom);
        var width = Math.floor(this.windowWidth * view.width);
        var height = Math.floor(this.windowHeight * view.height);
        //Render
        renderer.setViewport(left, bottom, width, height);
        renderer.setScissor(left, bottom, width, height);
        renderer.enableScissorTest(true);
        renderer.setClearColor(view.background, view.background.a);
        renderer.render(scene, camera);
    }
};
/**
 * onResize
 * @param windowWidth
 * @param windowHeight
 */
Holo.prototype.onResize = function (windowWidth, windowHeight) {
    this.windowWidth = windowWidth;
    this.windowHeight = windowHeight;
    for (var i = 0; i < this.views.length; i++) {
        var view = this.views[i];
        var camera = view.camera;
        camera.aspect = this.windowWidth / this.windowHeight;
        camera.updateProjectionMatrix();
    }
};
//# sourceMappingURL=render.js.map

index.html

<html>
<head>
    <title>Hologram Earth</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            background-color: black;
        }

        canvas {
            width: 100%;
            height: 100%;
            background-color: black;
        }

        p {
            position: absolute;
            color: lightgreen;
            font-size: larger;
            z-index: 999;
            left: 50%;
            top: 50%;
            margin-top: -9px;
            margin-left: -4px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
</head>
<body>
<p id="p">+</p>
<script src="Halo.js"></script>
<script src="EarthScene.js"></script>
<script>


    //create holo object
    var holo = new Holo();
    //create earth scene
    var earth = new EarthScene();
    //add to DOM
    document.body.appendChild(earth.renderer.domElement);
    //resize the drawings
    onWindowResize();
    //window resize method
    window.addEventListener('resize', onWindowResize, false);

    function onWindowResize() {
        windowWidth =   window.innerWidth ;
        windowHeight =  window.innerHeight;
        if (windowWidth > windowHeight) {
            windowWidth = windowHeight;
        }
        else {
            windowHeight = windowWidth;
        }
        document.getElementById('p').style.left = windowWidth / 2;
        document.getElementById('p').style.top = windowHeight / 2;
        holo.onResize(windowWidth, windowHeight);
        earth.renderer.setSize(windowWidth, windowHeight);
    }


    function render() {
        //rotate cloud and earth independently
        earth.clouds.rotation.y += .002;
        earth.earth.rotation.y += .001;
        holo.render(earth.renderer, earth.scene);
    }
    function animate() {
        render();
        requestAnimationFrame(animate);
    }
    //start animation loop
    animate();
</script>
</body>
</html>

thumbnail.png