EffectHub.com: your best source for gaming

Recommendation

More Effects...

/* jshint esversion: 6 */

((main) => {

this.requestAnimationFrame = (() => {
		return window.requestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			window.msRequestAnimationFrame ||
			function(callback) {
				window.setTimeout(callback, 1000 / 60);
			};
	})();

main(this, document, THREE);

})((window, document, three, undefined) => {

'use strict';

const PI = Math.PI,
		SIN = Math.sin,
		COS = Math.cos;

const CONFIG = {
		dimensions: {
			x: 0,
			y: 0
		},
		map: {
			width: 0,
			height: 0
		},
		camera: {
			fov: 70,
			nearPlane: 0.1,
			farPlane: 10000,
			aspectRatio: 0.7
		}
	};

class App {
		constructor() {
			let self = this;
			self.tick = 0;
			self.props = JSON.parse(JSON.stringify(CONFIG));
			self.initCamera();
			self.initScene();
			self.initLights();
			self.initSphere();
			self.render();
			window.onresize = () => {
				self.setSize();
			};
		}

setSize() {
			this.props.dimensions.x = window.innerWidth;
			this.props.dimensions.y = window.innerHeight;
			this.renderer.setSize(this.props.dimensions.x, this.props.dimensions.y);
			this.camera.aspect = this.props.camera.aspectRatio = this.props.dimensions.x / this.props.dimensions.y;
			this.camera.updateProjectionMatrix();
		}

initCamera() {
			this.camera = new three.PerspectiveCamera(
				this.props.camera.fov,
				this.props.camera.aspectRatio,
				this.props.camera.nearPlane,
				this.props.camera.farPlane
			);
		}

initScene() {
			this.scene = new three.Scene();
			this.scene.add(this.camera);
			this.renderer = new THREE.WebGLRenderer({
				alpha: true,
				antialias: true
			});
			this.setSize();
			this.container = document.querySelector('.container');
			this.container.appendChild(this.renderer.domElement);
		}

initLights() {
			this.mainLight = new three.HemisphereLight(0x000000, 0xffffff, 0.5);
			this.mainLight.position.set(0, -500, 0);
			this.scene.add(this.mainLight);

this.ambientLight = new three.AmbientLight(0xd40000, 0.75);
			this.ambientLight.position.set(0, -100, 0);
			this.scene.add(this.ambientLight);
		}

initSphere() {
			let geom = new three.SphereGeometry(500, 100, 100, 0, PI * 2, 0, PI * 2),
				mat = new three.MeshNormalMaterial();
			geom.mergeVertices();
			this.sphere = new three.Mesh(geom, mat);
			this.sphere.rotation.x = PI/2;
			this.scene.add(this.sphere);
		}

render() {
			let self = this;
			self.update();
			self.renderer.render(self.scene, self.camera);
			window.requestAnimationFrame(self.render.bind(self));
		}

update() {
			this.tick++;
			let delta = this.tick * 0.025;
			for (let i = 0, len = this.sphere.geometry.vertices.length; i < len; i++) {
				let v = this.sphere.geometry.vertices[i],
					dX = COS(delta + i),
					dZ = SIN(delta + i);
				v.x += dX;
				v.z += dZ;
			}
			this.sphere.geometry.verticesNeedUpdate = true;
			this.sphere.rotation.x += 0.0025;
			this.sphere.rotation.y += 0.00125;
			this.sphere.rotation.z += 0.0025;
			this.mainLight.position.x = COS(delta) * 500;
			this.mainLight.position.y = SIN(delta) * 500;
		}
	}

window.onload = () => {
		let app = new App();
	};

});

CSS

HTML

Recommendation

Join Effecthub.com