EffectHub.com: your best source for gaming

Recommendation

More Effects...

"use strict";

var global = {
    scene: null,
    camera: null,
    renderer: null,
    loadManager: null,
    loader: null
};

var mesh = {
    jsonData: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/304639/plus.json',
    geometry: null,
    plus: null
};

var init = function init() {
    initScene();
    initLight();
    initLoader();
    loadModel();
};

var initScene = function initScene() {
    global.scene = new THREE.Scene();

global.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.0001, 10000);
    global.camera.position.set(0, 0, 20);
    global.camera.lookAt(global.scene.position);
    global.scene.add(global.camera);

global.renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true,
        logarithmicDepthBuffer: true
    });
    global.renderer.setSize(window.innerWidth, window.innerHeight);

document.querySelector("[data-stage]").appendChild(global.renderer.domElement);
};

var initLight = function initLight() {
    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(0, 100, 0);
    global.scene.add(directionalLight);

var l = new THREE.DirectionalLight(0xffffff, 0.65);
    l.position.set(0, -100, 0);
    // global.scene.add(l);
};

var initLoader = function initLoader() {
    global.loadManager = new THREE.LoadingManager();
    global.loader = new THREE.JSONLoader(global.loadManager);
    global.loadManager.onLoad = function () {
        createPlus();
        render();
    };
};

var loadModel = function loadModel() {
    global.loader.load(mesh.jsonData, function (geometry) {
        mesh.geometry = geometry;
    });
};

var createPlus = function createPlus() {
    var material = new THREE.MeshPhongMaterial({
        emissive: 0x111111,
        emissiveIntensity: 0.3,
        specular: 0x000000,
        shininess: 0
    });

mesh.plus = new THREE.Mesh(mesh.geometry, material);
    global.scene.add(mesh.plus);

animate();
};

var animate = function animate() {
    TweenMax.to(mesh.plus.rotation, 5, {
        x: Math.PI * 2,
        y: Math.PI * 2,
        ease: Power0.easeNone,
        repeat: -1
    });
};

window.addEventListener("resize", resizeHandler);

var render = function render() {
    requestAnimationFrame(render);
    global.renderer.render(global.scene, global.camera);
};

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

init();

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto");
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
.stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #a7a6a4;
  background-image: -webkit-radial-gradient(#f1f1f1, rgba(241, 241, 241, 0) 70%), -webkit-linear-gradient(rgba(241, 241, 241, 0), rgba(241, 241, 241, 0.8));
  background-image: radial-gradient(#f1f1f1, rgba(241, 241, 241, 0) 70%), linear-gradient(rgba(241, 241, 241, 0), rgba(241, 241, 241, 0.8));
  background-size: 100vw 100vw, 100% 30%;
  background-position: 50% -50vw, 50% 100%;
  background-repeat: no-repeat;
}

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 10px;
  text-align: right;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
}
.footer.v-dark {
  background-color: rgba(52, 52, 54, 0.3);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.footer.v-light {
  background-color: #fff;
  color: #343436;
}

.footer-anchor {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 4px;
  color: #343436;
  text-decoration: none;
  background-color: #fcd000;
  border-radius: 4px;
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.footer-anchor:hover {
  opacity: 0.6;
}

HTML

Recommendation

Join Effecthub.com