<link href="https://ui-unicorn.co.uk/data.css" rel="stylesheet" />
<script src="https://ui-unicorn.co.uk/hostinger-exp/js/jquery-3.4.1.min.js"></script>


 <!-- Page Content -->
	<div id="page-content" class="about">
   
    	<!-- Hero -->
   		<div id="hero">
            <div id="hero-styles" class="parallax-hero">
            
            	<!-- Showcase Slider -->
                <div id="showcase-slider" class="first-load">
    
                    <!-- Section -->
                    <div class="section">
                   
                    	
                    	
                        
                        
                        
                        	<div class="content-caption light-content">
                        	
                            		<div class="open-project-link-h1">
                            		    
                                		<h1 class="open-project-h1">UI <BR> UNICORN</h1>
                                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>Cras pretium magna dignissim aliquam malesuada.</p>
                                                </div>
                                
                                	
                        
                        	</div>                        
                       
                        
                        <div class="disable-section"></div>
                        
                    </div>
                    <!--/Section -->
                    
                    
                  
                    
                </div>
                <!--/Showcase Slider -->
                
        
            </div>        
        </div>
        <!--/Hero -->
      </div>
    <!--/Page Content -->

html, body{position: fixed;
    overflow: hidden;
    width:100vw;
    height:100vh;
    margin:0px;
    background:#fff;
}

canvas{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;outline:none;}

#page-content{position:absolute;top:0;pointer-events:none;}#hero{mix-blend-mode: difference;background-color:transparent!important;}#hero p{line-height:20px;margin-bottom:0px;color:#fff}#fp-nav ul li a:after{opacity:1;}

import * as THREE from 'https://ui-unicorn.co.uk/hostinger-exp/js/three.module.js';
import TWEEN from 'https://ui-unicorn.co.uk/hostinger-exp/js/tween.esm.js';

import {
    RGBELoader
}
from 'https://ui-unicorn.co.uk/hostinger-exp/js/RGBELoader.js';
import {
    OrbitControls
}
from 'https://ui-unicorn.co.uk/hostinger-exp/js/OrbitControls.js';
import {
    GLTFLoader
}
from 'https://ui-unicorn.co.uk/hostinger-exp/js/GLTFLoader.js';
import {
    RoughnessMipmapper
}
from 'https://ui-unicorn.co.uk/hostinger-exp/js/RoughnessMipmapper.js';

import {
    CSS2DRenderer,
    CSS2DObject
} from 'https://threejs.org/examples/jsm/renderers/CSS2DRenderer.js';
var container, controls;
var camera, scene, renderergl, mixer, clock, 
    
   WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight,
        ASPECT = WIDTH / HEIGHT,
        VIEW_ANGLE = 45, NEAR = 0.1, FAR = 10000;

    var sphere;

    function init() {
        var directionalLight;

        //div element that will hold renderer
         container = document.createElement('div');
    container.className = "experience-div";
	$('body').prepend(container);
	$('.experience-div').attr('id', 'sphere');
        //renderer
       renderergl = new THREE.WebGLRenderer( { alpha: true } );
        renderergl.setSize(WIDTH, HEIGHT);
        container.appendChild(renderergl.domElement);

        //camera
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0,0,-230);
   
renderergl.setPixelRatio(window.devicePixelRatio);
    renderergl.setSize(window.innerWidth, window.innerHeight);
        //lights
        renderergl.gammaInput = true;
        renderergl.gammaOutput = true;

        renderergl.setClearColor( 0x000000, 0 );
        directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
        directionalLight.position.set(0, -1, 0);

        scene = new THREE.Scene();
        scene.add(camera);
        scene.add(directionalLight);
      
      var size = 1000;
var divisions = 10;

var gridHelper = new THREE.GridHelper( size, divisions );
      
scene.add( gridHelper );
      
        //scene.add(sphere);

        /**/
        var distance = 100;    
        var geometry = new THREE.Geometry();

        for (var i = 0; i < 1000; i++) {

            var vertex = new THREE.Vector3();
            
            var theta = THREE.Math.randFloatSpread(360);
            var phi = THREE.Math.randFloatSpread(360);
            
            vertex.x = distance * Math.sin(theta) * Math.cos(phi);
            vertex.y = distance * Math.sin(theta) * Math.sin(phi);
            vertex.z = distance * Math.cos(theta);

            geometry.vertices.push(vertex);
        }
        var particles = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({color: 0xffffff}));
        particles.boundingSphere = 50;
        //var particles = new THREE.Mesh(geometry, sphereMaterial);
        scene.add(particles);
     
       controls = new OrbitControls(camera, renderergl.domElement);
  
    controls.enableKeys = false;
  
    controls.enableDamping = true;
  
    controls.dampingFactor = 0.095;
    controls.autoRotate = false;
    controls.rotateSpeed = 0.10;
    controls.minDistance = 2;
    
    controls.update();

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

    }

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


}

    function animate() {
       requestAnimationFrame(animate);
	    renderergl.render(scene, camera);
	     controls.update();

    }

    init();
    animate();